User Manual


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 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 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





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


Watch out

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