08 Lo que Three.js escribe por ti

ShaderMaterial: escribe todo el material tú mismo

El color de la esfera de la izquierda viene enteramente del código de la derecha. Edítalo y cambia el tipo de material y la versión de GLSL.

Tipo de material

Versión de GLSL

Se ejecuta una vez por píxelArrastra los números o edita el código

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);
}

Lado JSmaterial.uniforms.uTime.value = 0.00

ShaderMaterial inserta las declaraciones de matrices y atributos; RawShaderMaterial no añade ninguna. GLSL 3.00 usa in/out y texture().

Pruébalo

Cambia 12.0 en el código de fragmentos para obtener más franjas
Cambia a RawShaderMaterial y lee las declaraciones adicionales
Cambia a GLSL 3.00 y compara cómo cambian los nombres
Pulsa «Código completo» para ver el código que Three.js compila realmente