Draw. Shader

Shader - A custom fragment shader for objects and draws, 2D or 3D

  • Write a mainImage function in the post processing style, the renderer wraps it with its own program
  • It gives the surface color, then the object's color and additive color apply in 2D, and the lighting, shadows and fog in 3D; set emissive to 1 on a 3D object for the snippet's color to be final
  • Set it as obj.shader, or use setShader for 2D draws and render3D.shader for 3D draws
  • Draws that share a Shader share a batch; with no Shader set nothing changes
  • In 2D it shades textured draws, untextured ones like drawRect draw as they are
  • Compiled once per renderer by the first draw that needs it; a bad snippet throws with the GLSL log in debug
  • Make each Shader once, at init, and share it; every one made lives for the session with its programs
  • Names in both renderers: iChannel0 the texture, iTime, iResolution, and localUV, 0 to 1 across the sprite or the mesh's own uv
  • Names in 3D only: worldPos, worldNormal, cameraPos, sunDirection, sunColor, ambientColor, lightCount, lights[i], lightColors[i] and shadow()

Constructor

new Shader(fragmentCode)

Create a shader from a fragment snippet that defines void mainImage(out vec4 c, vec2 uv)

Parameters:
NameTypeDescription
fragmentCodestring
Source
Example
const fade = new Shader(`
void mainImage(out vec4 c, vec2 uv)
{
    c = texture(iChannel0, uv);
    c.a *= .5 + .5*sin(iTime);
}`);
obj.shader = fade;

Members

fragmentCode

Properties
TypeDescription
string

The mainImage snippet

Source

program :WebGLProgram|undefined

Type:
  • WebGLProgram | undefined
Properties
TypeDescription
WebGLProgram | undefined

The 2D program, compiled by the first draw that needs it, read only

Source

program3D :WebGLProgram|undefined

Type:
  • WebGLProgram | undefined
Properties
TypeDescription
WebGLProgram | undefined

The 3D program, compiled by the 3D plugin the same way, read only

Source