Three.js 着色器点光源位置

Question

我正在尝试编写我的着色器并添加光源，我想通了并做到了。

但是有一个问题，光源的位置判断错误，当相机旋转或移动时，会发生一些难以想象的事情。

所以我得到了顶点着色器的位置

vec3 vGlobalPosition = (modelMatrix * vec4(position, 1.0 )).xyz

现在我正在尝试制作一个照明区域

float lightDistance = pointLights[ i ].distance;
vec3 lightPosition  = pointLights[ i ].position;

float diffuseCoefficient = max( 
    1.0 - (distance(lightPosition,vGlobalPosition) / lightDistance ), 0.0);

gl_FragColor.rgb += color.rgb * diffuseCoefficient;

但是正如我之前所写，如果旋转相机，照明区域会移动到不同的位置。

手动设置灯位，一切正常

vec3 lightPosition  = vec3(2000,0,2000);
...

问题是如何得到正确的光源位置？我需要一个全局位置，我不知道光源中包含什么位置。

添加了一个示例：http://codepen.io/korner/pen/XMzEaG

Answer 1

你的问题出在vPos。目前你做的：

vPos = (modelMatrix * vec4(position, 1.0)).xyz

相反，您需要将位置乘以 modelViewMatrix:

vPos = (modelViewMatrix * vec4(position, 1.0)).xyz;

你需要使用modelViewMatrix因为PointLight.position是相对于相机的。

Three.js 着色器点光源位置

Three.js shader pointLight position

shader

glsl

matrix

webgl

three.js