07 Surfaces and light

From points to solid, then light the surface

Turn the switches on in order, or on their own to compare each step. The model turns slowly so front, back, light and shade are easy to see.

Explanation

position → surface

vec3 p = vec3(aUv * 2.0 - 1.0, 0.0);gl_Position = P * V * M * vec4(p, 1.0);

M / V / P: model → camera → projection.

normal → base colour

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

N is the surface’s facing; mapped to RGB you can see the direction.

light → shading

float diffuse = 1.0;float shine = 0.0;

L points at the light; H is halfway between light and view.

colour → output

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

Alpha, with blending, makes it transparent.

Vertex dots · light goes into the colour; JS decides which points form faces.

JS sidegl.uniformMatrix4fv(uModel, …) // rotation -0.35 / 0.10

Review: position → triangles → normals → diffuse → specular → transparency; each step is one line of code.

Try it