Procedural textures in WebGL


Drag the mouse in the image to move the object.
Shift-drag to rotate. Use the mouse wheel to zoom.
On touch devices, drag to rotate. (That's it for touch, sorry.)

WebGL and shader programming

This is an interactive lab environment create for "Campusveckan 2017", an event at Linköping University where high school students are invited to gain some first hand experience with higher education in science and technology. The text area above contains the shader code that is compiled and executed during rendering. If you want to experiment with GLSL fragment shaders, feel free to edit the text, press "recompile" and see your own shader executed in WebGL. (Or, if you made an error, read the error message, fix the problem and retry.)

The shader is allowed to use a number of non-standard "noise" functions which we have written for you and included in the background. For a list of these functions, see the index page.