为什么在这个Webgl示例中光线正在移动

Question

这是教科书中Goraud插值和Lambertian反射模型的示例。

https://jsfiddle.net/zhenghaohe/r73knp0h/6/

但是，在教科书中有一个愚蠢的错误，在这本书中它说代码应该包含下面的这一行，而实际上没有。

vec3 light = vec3(uModelViewMatrix * vec4(uLightDirection, 0.0));

奇怪的是，该示例似乎仍然有效。

我知道球体在旋转，因为

mat4.rotate(modelViewMatrix, modelViewMatrix, angle * Math.PI / 180, [0, 1, 0]);  但是在我看来，光也在与球体一起移动。但是在代码中，我找不到光线如何移动。

有人可以指点我同时旋转灯的代码吗？

Answer 1

灯不旋转，它固定在一个固定的位置和方向。这里的问题是您似乎不了解什么是法线以及如何在计算机图形学中使用它。

计算机模型是一系列连接成“面孔”（通常是三角形）的“顶点”。当将“现实”光引入场景时，需要额外的一条信息来确定它应如何与模型的每个面进行交互，这称为“法线”。法线是一种方向向量，通常形成一条垂直于人脸的线，但对于您的问题而言，它不一定必须成一条线。该法线用于计算光线与该表面的交互方式。

因此，您具有三组数据：顶点，索引（顶点如何组合在一起以形成面）和法线（在示例中自动计算）。当您开始对模型进行转换（例如旋转）但不执行与转换之前计算的法线相似的转换时，就会出现问题。

让我们想象一下...说我们有以下金字塔，其中一个法线绘制来说明问题：

现在，当我们开始旋转金字塔时，但我们保持法线方向不变，我们看到法线与人脸之间的角度开始改变。

为使事情按预期工作，我们还需要旋转法线，以使相对于面部的角度不变。

光相对于表面法线的角度决定了表面如何被光着色。旋转模型时，法线开始指向“随机”方向，这会干扰光的计算，并且看起来好像光在旋转，但不是。

显然，这是对正在发生的事情的一种非常淡化的解释，但是它应该使您基本了解什么是法线以及为什么还需要对它们应用变换。