Notes

Various things found in process of doing this.

Building blocks

• Astro
• Reveal.js

Helpful links

• The Book of Shaders
• LYGIA Shader Library
• Useful Functions for Shader Live Coding by Blackle Mori
• Ray Marching by Michael Walczyk

Inigo Quilez (iq)

• Raymarching distance fields 2008
• distance functions
• domain repetition

MDN

• WebGLRenderingContext: compileShader() method
• WebGL best practices
• Adding 2D content to a WebGL context

Shadertoy

• Noise - simplex - 2D by iq
• 3d simplex noise by nikat
• Chromatic Aberration by willeves07
• Radial Chromatic Aberration by AlphaRogue
• Chromatic Aberration Particles by playmobil
• isovalues 3 by FabriceNeyret2
• Raymarched Reflections by Shane
• Input - Mouse by iq

Own experiments

• A pattern of plusses: 2024-06-15_experiment_2
• A different pattern of plusses: 2024-06-15_experiment_2.1
• Diagonally swiping the screen with plusses: 2024-06-15_experiment_3
• A fast sine-wave of some plusses: 2024-06-15_experiment_3.1
• A color-stepped sine-wave of plusses: 2024-06-15_experiment_3.2
• A smooth sine-wave of plusses: 2024-06-18_experiment_2
• A torus with reflections: 2024-06-30_experiment_2
• A big 3D plus: 2024-06-30_experiment_3
• A box full of plusses: 2024-07-21_experiment_1

Wikipedia

• Shader
• Shading
• Transform, clipping and lighting
• Graphics Pipeline

YouTube

• Perfect Pistons in Shadertoy by Blackle Mori
• How Ray Tracing (Modern CGI) Works And How To Do It 600x Faster by Josh’s Channel
• Ray Marching, and making 3D Worlds with Math by SimonDev
• This is the Difference of Gaussians by Acerola
• Coding Adventure: Ray Tracing by Sebastian Lague
• Coding Adventure: Optimizing a Ray Tracer (by building a BVH) by Sebastian Lague
• Painting a Landscape with Maths by Inigo Quilez
• Lerp smoothing is broken by Freya Holmér
• SDF (signed distance function) by CGMatter

Misc

• GitHub, Patricio Gonzalez Vivo: GlslCanvas.js
• WebGL shader examples by Javier Gracia Carpio
• GitHub, Boni García: draw a rectangle
• Reddit, GraphicsProgramming, dgreensp Precision (highp, mediump, lowp) in WebGL/OpenGL Shaders
• StackOverflow: WebGL/GLSL - How does a ShaderToy work?
• Viscircle: Fragment Shader WebGL
• webglfundamentals.org: WebGL Shaders and GLSL
• webglfundamentals.org: WebGL Drawing Without Data
• khronos.org: Rendering Pipeline Overview
• StackOverflow: WebGL: differences between attribute, uniform and varying