javascript - View 向量与法线之间的 Angular ？

Question

相当标准的 GLSL 问题。不幸的是，尽管我熟悉其背后的数学原理，但我不太确定 webgl 级别的实现。而且着色器的调试相当棘手。

我试图在 glsl 着色器级别获取 View 向量与对象法线之间的 Angular 。我正在使用 Threejs，但通过它们创建我自己的共享器。

这是顶点着色器的相关部分:

void main() {
    gl_Position = projectionMatrix * modelViewMatrix * vec4(position, 1.0);

    vec3 nmalInWorld = normalize(normalMatrix * normal);
    vec3 camInWorld = cameraPosition;
    vec4 posInWorld = modelViewMatrix * vec4(position, 1.0);
    posInWorld /= posInWorld[3];
    angle = -dot(normalize(posInWorld - vec4(cameraPosition, 1.0)), normalize(vec4(nmalInWorld,1.0)));
    if(angle > 0.7){
      angle = 1.0;
    }else{
      angle = 0.0;
    }

我已经尝试了这种安排的几种排列，所以如果它不必要地复杂，我提前道歉。我确实得到了与我想要的非常相似的东西 - 它在相机视角方面当然总是相同的，但由于某种我不明白的原因它没有居中。片段着色器只是直接将 Angular 修补到色域。

正如您所看到的，白点并未集中在球体的中间，这是预期的结果。我真的不明白为什么。也许它缺少透视变换应用程序？尝试了一下没有成功。我不认为 View 向量在这种情况下应该是相关的，无论相机的目标如何，球体都应该保持相同的颜色。

Answer 1

posInWorld、vec4(cameraPosition, 1.0) 和 vec4(nmalInWorld,1.0) 为 Homogeneous coordinates .

Dot product共 2 Cartesian Unit vectors等于 Cosine向量之间的 Angular 。

“ View ”向量是从顶点位置到相机位置的归一化笛卡尔向量。当顶点位置由 modelViewMatrix 变换时，结果是 View 空间中的位置。相机的 View 空间位置为(0, 0, 0)，因为 View 空间的原点就是相机的位置:

vec4 posInView = modelViewMatrix * vec4(position, 1.0);
posInView /= posInView[3];

vec3 VinView = normalize(-posInView.xyz); // (0, 0, 0) - posInView

normalMatrix 将向量从模型空间转换到 View 空间:

vecr NinView = normalize(normalMatrix * normal);

VinView 和 NinView 都是视空间中的向量。前者是从顶点到相机的点，后者是顶点坐标处曲面的法向量。
通过点积可以得到2个向量夹 Angular 的余弦:

float NdotV = dot(NinView, VinView);