Shader Learn

07 Superficies y luz

De puntos a sólido, y después iluminar la superficie

Activa los interruptores en orden o por separado para comparar cada paso. El modelo gira despacio para distinguir frente, dorso, luz y sombra.

Explicación

posición → superficie
vec3 p = vec3(aUv * 2.0 - 1.0, 0.0);gl_Position = P * V * M * vec4(p, 1.0);

M / V / P: modelo → cámara → proyección.

normal → color base
vec3 N = normalize(vNormal);vec3 base = vec3(0.48, 0.83, 0.69);

N es la orientación de la superficie; al convertirla a RGB puedes ver su dirección.

luz → sombreado
float diffuse = 1.0;float shine = 0.0;

L apunta a la luz; H está a medio camino entre luz y vista.

color → salida
vec3 color = base * diffuse + vec3(shine);gl_FragColor = vec4(color, 1.0);

Alfa, con mezcla, lo hace transparente.

Puntos de vértices · la luz se incorpora al color; JS decide qué puntos forman caras.

Lado JSgl.uniformMatrix4fv(uModel, …) // rotación -0.35 / 0.10

Repaso: posición → triángulos → normales → difusa → especular → transparencia; cada paso es una línea de código.

Pruébalo

  • Activa los interruptores de arriba abajo