My creations on the fantastic GLSL Sandbox by mrdoob (this site is not moderated so you will find good, bad and ugly things there). Coding in GLSL in the browser thanks to WebGL is just pure recreation and mathematical art!
The principle is simple: write a main function setting the color of each pixel on the screen given its coordinates. Because the calls to the main function are done in parallel, no data can be stored or shared between the calls.
The variables are defined as:
gl_FragCoord: vector of 2 integers containing the pixel coordinatesgl_FragColor: vector of 4 floats containing the RGBA components of the color to computeresolution: size in pixels of the rendered rectangletime: time (in seconds?) since reload/modification of the pagemouse: virtual position of the mouse pointer inside the rendered rectangle (between 0 and 1)backbuffer: 2D texture containing the previously rendered frame (typesampler2D)
Check as well the superb but heavy Shadertoy by iq for similar, more complex shaders (with input data).
Basic calculation of a ray-tracer with mouse-controlled rotations:
Full ray-tracer with recursive reflections and lighting based on the Phong reflection model:
It only supports 4 kinds of objects: checker, sky drawn wih Perlin noise, light and mirror-ball.
This is my first attempt at simulating the wave equation but with an inappropriate propagation speed, such that the computation is not stable:
The result is interesting: it processes the current picture, including the circles drawn under the mouse pointer, into slowly moving lines.
It is difficult to explain what happens there, give it a try!
Simulation of the wave equation on two medias with different speeds (slower in the ellipse at the center of the rendered rectangle):
The computation principle is comparable to the explicit finite-difference method.
A fake lighting is computed with the mouse pointer as light source.
Classical Mandelbrot set with wide-range zoom and rotation:
The fractal is rendered with circular orbit traps.
Superposition of a Julia set on top of the Mandelbrot set, where the reference point on the Julia set corresponds to the position of the mouse pointer on the Mandelbrot set:
The dots represent the sequence of complex numbers used in the iterations on the Mandelbrot set at the mouse pointer position.
This shader is very useful to understand how the computation evolves in different areas of the Mandelbrot set. Give it a try!
Skeleton implementation of the display of a character string (only the character "O" is implemented):
The code is particularly strange here.