07 表面与光照

从点阵到立体，再给表面打光

依次打开开关；也可单独开关，对比每一步。模型缓慢旋转，方便看清前后与明暗。

讲解

位置 → 表面

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

M / V / P：模型 → 相机 → 投影。

法线 → 底色

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

N 是表面朝向；映射到 RGB 可以看见方向。

灯光 → 明暗

float diffuse = 1.0;float shine = 0.0;

L 指向灯，H 是灯与视线的中间方向。

颜色 → 输出

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

Alpha 配合混合，产生透明效果。

顶点小点 · 灯光算进颜色；连面由 JS 决定。

JS 这一侧gl.uniformMatrix4fv(uModel, …) // 旋转 -0.35 / 0.10

回顾：位置 → 三角形 → 法线 → 漫反射 → 高光 → 透明，每一步都是一行代码。

试一试