Experiment: WebGL blob
This is an experiment with WebGL shaders. The JavaScript code is nothing much; just a scaffold to load GLSL scripts, run the shader program and some events to parse mouse- and keyboard input. The cool bit is the shader code itself.
WebGL shaders are written in GLSL, a C-like language. This takes some getting used to if you’ve only coded JavaScript. Functions and variables aren’t hoisted: you have to declare methods and variables before you use them. GLSL is typed, so you have to explicitly declare the type of variables, parameters and return values. And since the GLSL code is parsed to the canvas as one string this will result in extremely long files that end with the main method.
This sucks a bit, even normal C has directive called #include which, well, it includes bits and pieces. But GLSL is parsed as a string before interpretation, so we can do stuff. If you’ve used JavaScript, probably you’ve used Grunt, and possibly you’ve written build scripts. Which is what I’ve done here (sort of): loaded the GLSL script, search it for #include references, load and include them… and finally parse the GLSL script.
The shader technique used is called raycasting. I won’t elaborate on the technical details but the result is a space where objects no longer have to be defined by vertices and polygons but by ‘simple’ formulae. A sphere is a point in space with a radius. This means naturally smooth objects.
My first go at this is quite simple really; a distance to the y axis to create an infinite horizontal cavern, a sphere modulated over a distance on the x and z axis to populate the cavern with pillars, and a 3-D simplex noise moving downward along the y-axis. Rules are multiplied rather than added so the pillars seem embedded into the cave and the ceiling seems to be dripping. And the same noise field to add some colour.