three .js光线投射器与自定义顶点着色器不相交

Question

我正在使用专用顶点着色器实现粒子系统。下面是一个代码示例:https://jsfiddle.net/dthevenin/7arntcog/

我确实使用Raycaster来进行鼠标拾取，并使与一个粒子交互成为可能。

代码工作如预期，直到我试图从顶点着色器改变顶点的位置。例如，在那个例子中，我传递了一个时间值作为Uniform，并使用该时间值修改x位置。

vec4 mvPosition = modelViewMatrix * vec4(position.x + time, position.y, position.z, 1.0);

那么Raycaster计算交集失败。

要查看问题，取消第86行的注释，然后单击一个粒子不起作用。

那个代码/那个解决方案有什么问题?

Answer 1

当你使用raycaster交集方法时，你是在针对原始geometry.attributes.position顶点值进行测试。此计算在之前在CPU中进行。它们会在你的顶点着色器中移位。这些值不知道GPU中发生了什么，所以任何顶点着色器位置的变化都不会反映在你的光线投射中。

如果你需要位移你的顶点，并在此位移后执行光线投射，你将不得不不断更新position属性，以便在CPU和GPU计算中都可以访问更改。下面是该方法的官方示例。您可以在角落的按钮中看到源代码，但这里是使几何图形动态的相关代码。

const position = geometry.attributes.position;
position.usage = THREE.DynamicDrawUsage;
for ( let i = 0; i < position.count; i ++ ) {
const y = 35 * Math.sin( i / 2 );
position.setY( i, y );
}

在CPU中这样做肯定比在顶点着色器中效率低，但如果你需要做光线投射，这是唯一简单的解决方案。