三个着色点着色点位置

时间:2017-03-16 15:54:48

标签: matrix three.js glsl webgl shader

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

但是有一个问题,光源的位置被错误地确定,当相机旋转或移动时,会发生一些不可想象的事情。

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

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

1 个答案:

答案 0 :(得分:0)

你的问题在于vPos。目前你这样做:

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

相反,您需要将位置乘以modelViewMatrix

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

您需要使用modelViewMatrix因为PointLight.position相对于相机。