Shader.ProceduralTexture

There are two types of shaders: vertex shaders transform 3D geometries into 2D shapes and projects them on your screen, then a fragment shader fills these shapes in with colors. See this link for more information on the WebGL rendering pipeline.

Shader.ProceduralTexture are fragment shaders, letting us create static or animated images via code.

Head to https://thebookofshaders.com/ for more information on how to code them.

On the XR.Club platform, fragment shaders write their output to vec4 diffuseColor.

Shaders can have various types of parameters to customise them. As an example, a fragment shader can draw circles, and we can decide to give it parameters such as the color for the circles and their radius. This means we can reuse the same shader to create multiple variations by varying the parameters.

The simplest type of parameters are uniforms.

Uniforms

Uniforms are parameters shared between vertex and fragment shaders.

The XR.Club framework takes care of declaring the uniform variables. It also supplies a float iTime uniform that is automatically updated to the current time each frame to make animations easier.

Here is a list of uniforms supplied by THREE.js.

XR.Club currently supports the following uniform types (mapped from JS/THREE.js to GLSL types):

float
int
boolean -> bool
Vector2 -> vec2
Vector3 -> vec3
Vector4 -> vec4
Color -> vec3
Texture -> sampler2D

Attributes

Varyings

Defines

Tips

Shadertoy contains a great number of great shaders, but the GLSL implementation is slightly different from THREE.js:

shadertoy uses texture() instead of texture2D() to sample textures
shadertoy writes out values to fragColor instead of diffuseColor

Resources

thebookofshaders: introduction to fragment shaders
WebGL noise functions: useful repertoire of common procedural noise functions
Introduction to raymarching: a technique used for high quality images
Inigo Quilez articles: advanced articles on shaders / 3D graphics

Watch out

Make sure that you choose your uniforms / attributes / varying names carefully, to avoid conflicting with the ones already provided by THREE.js