Three.js着色器点光源位置

3

我正在尝试编写我的着色器并添加光源,我已经有点想通了并且完成了。

但是存在问题,光源的位置确定不正确,当相机旋转或移动时,会发生一些难以想象的事情。

因此,我获取了顶点着色器的位置。

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

你能否创建一个 fiddle 或 codepen 来演示这个问题? - gromiczek
@gromiczek,请不要要求其他人使用codepen或jsfiddle。请将代码放在问题本身中。如果您想要它运行,请使用a snippet - gman
添加了一个示例:http://codepen.io/korner/pen/XMzEaG - user2783211
1个回答

1
你的问题与 "vPos" 有关。目前你所做的是:

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

相反,您需要使用modelViewMatrix乘以位置:

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

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


谢谢,有所帮助,但引起了另一个问题。是否可以转换为全局位置?因为我制作了一个雾效果,并使用了“modelMatrix”。 - user2783211
不客气!在当前的示例中,我没有看到任何雾,所以我建议您创建一个新的问题,而不是在评论中添加混乱。 :) - vallentin
请看一下这篇帖子,也许你可以再次帮助我 :) http://stackoverflow.com/questions/42873013/three-js-shader-pointlight-to-global-position - user2783211
很高兴看到你解决了它,看起来你已经在我的网站上看到了一个例子。我想知道为什么我的例子使用modelMatrix可以工作。 - 2pha
@2pha PointLight.position 位置并不总是相对于相机的,所以可能是因为您使用的版本较旧。另一个原因可能是您手动设置了统一值。 - vallentin
哦,好的,我链接的那个使用的是版本70。 - 2pha

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接