07 表面与光照

法线贴图：不改形状，只改朝向

平面还是平的，但每个像素的法线被扰动了。移动灯光看看。

凹凸强度1.00

凹凸密度18.00

440

光线方向 X-0.80

-22

只看法线贴图关

每个像素运行一次拖动数字，或直接改代码

void main() {
  vec2 p = vUv * 18.000;
  vec2 slope = vec2(cos(p.x) * sin(p.y), sin(p.x) * cos(p.y));   // 高度场的斜率
  vec3 bump = normalize(vec3(-slope * 1.000, 1.0));     // 切线空间法线
  vec3 N = normalize(uNormalMatrix * bump);                      // 转到世界空间
  vec3 L = normalize(vec3(-0.800, 0.6, 1.0));
  float diffuse = max(dot(N, L), 0.0);
  vec3 lit = vec3(0.86, 0.80, 0.72) * (0.12 + 0.88 * diffuse);
  vec3 color = mix(lit, bump * 0.5 + 0.5, 0.000);
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 p = vUv * 18.000;
  vec2 slope = vec2(cos(p.x) * sin(p.y), sin(p.x) * cos(p.y));   // 高度场的斜率
  vec3 bump = normalize(vec3(-slope * 1.000, 1.0));     // 切线空间法线
  vec3 N = normalize(uNormalMatrix * bump);                      // 转到世界空间
  vec3 L = normalize(vec3(-0.800, 0.6, 1.0));
  float diffuse = max(dot(N, L), 0.0);
  vec3 lit = vec3(0.86, 0.80, 0.72) * (0.12 + 0.88 * diffuse);
  vec3 color = mix(lit, bump * 0.5 + 0.5, 0.000);
  gl_FragColor = vec4(color, 1.0);
}

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

法线贴图不改几何，只改每个像素的朝向；轮廓仍然是平的，光照却有了凹凸。

试一试

打开「只看法线贴图」，看到熟悉的蓝紫色
把平面转到侧面，轮廓依然平直
移动光源，凹凸跟着变