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
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):
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
texture2D()to sample textures
- shadertoy writes out values to
- 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
Make sure that you choose your uniforms / attributes / varying names carefully, to avoid conflicting with the ones already provided by THREE.js