08 What Three.js writes for you

ShaderMaterial: write the whole material yourself

The sphere on the left is coloured entirely by the code on the right. Edit it, and switch material type and GLSL version.

Material type

GLSL version

Runs once per pixelDrag numbers, or edit the code

uniform float uTime;
uniform sampler2D uMap;
varying vec2 vUv;
varying vec3 vNormal;

void main() {
  float stripes = step(0.5, fract(vUv.x * 12.0 + uTime * 0.2));
  vec3 color = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), stripes);
  vec3 tex = texture2D(uMap, vUv * vec2(4.0, 2.0)).rgb;
  color = mix(color, tex, 0.3);
  float light = max(dot(normalize(vNormal), normalize(vec3(-0.4, 0.8, 1.0))), 0.0);
  gl_FragColor = vec4(color * (0.25 + 0.75 * light), 1.0);
}

uniform float uTime;
uniform sampler2D uMap;
varying vec2 vUv;
varying vec3 vNormal;

void main() {
  float stripes = step(0.5, fract(vUv.x * 12.0 + uTime * 0.2));
  vec3 color = mix(vec3(0.96, 0.43, 0.30), vec3(0.48, 0.83, 0.69), stripes);
  vec3 tex = texture2D(uMap, vUv * vec2(4.0, 2.0)).rgb;
  color = mix(color, tex, 0.3);
  float light = max(dot(normalize(vNormal), normalize(vec3(-0.4, 0.8, 1.0))), 0.0);
  gl_FragColor = vec4(color * (0.25 + 0.75 * light), 1.0);
}

JS sidematerial.uniforms.uTime.value = 0.00

ShaderMaterial injects the matrix and attribute declarations for you; RawShaderMaterial adds nothing. GLSL 3.00 uses in/out and texture().

Try it

Change 12.0 in the fragment code for more stripes
Switch to RawShaderMaterial and read the extra declarations
Switch to GLSL 3.00 and compare how names change
Press “Full code” to see the source Three.js actually compiles