three.js：更改顶点着色器中的属性值并将其传递到缓冲区

是否可以更改着色器中属性的值，并将其反映在下一帧渲染的缓冲区中？three.js：更改顶点着色器中的属性值并将其传递到缓冲区

因此，例如，在顶点着色器中更改顶点的位置并将此新值发送回javascript缓冲区对象？

代码示例如下：

attribute vec3 newPosition; 
attribute vec3 divideVal; 

void main() { 
    vec3 difference = newPosition - position; 

    velocity = difference/divideVal; 

    position += velocity; 

    vec4 mvPosition = modelViewMatrix * vec4(position, 1.0); 

    gl_PointSize = size * (sizeMultipler/-mvPosition.z); 

    gl_Position = projectionMatrix * mvPosition; 
}

编辑：

现在我做到这一点的JS本身，而是明白这将是更快，如果我移动尽可能多的计算，我可以给着色器？这是我目前的JS：

const positions = this.geometry.attributes.position.array; 
const newPositions = this.geometry.attributes.newPosition.array; 

for (let i = 0, i3 = 0; i < this.numParticles; i++, i3 += 3) { 
    const velocity = [newPositions[i3] - positions[i3], newPositions[i3 + 1] - positions[i3 + 1], newPositions[i3 + 2] - positions[i3 + 2]]; 

    if (velocity[0] || velocity[1] || velocity[2]) { 
     const minReset = 1; 

     velocity[0] = velocity[0]/60; 
     velocity[1] = velocity[1]/60; 
     velocity[2] = velocity[2]/60; 

     positions[i3] = positions[i3] + velocity[0]; 
     positions[i3 + 1] = positions[i3 + 1] + velocity[1]; 
     positions[i3 + 2] = positions[i3 + 2] + velocity[2]; 
    } 
}

来源

2017-02-11 Tuqire Hussain

是的，但它无关GLSL。在three.js级别，它更加抽象。你可以通过更新'Geometry'或'BufferGeometry'来完成这个工作，分享更多的代码？ – pailhead

你可以使用webgl2变换反馈（这里是一个非常简单的例子：https：//www.ibiblio.org/e-notes/webgl/gpu/bounce.htm），但我不确定你如何能够钩住这与three.js，也许使用'object.onBeforeRender'。 –

添加更多代码。 –

我发现如何做到这一点。

利用一种称为FBO模拟概念，我创建了一个模拟着色器，其计算的计算在其GLSL着色器，然后，而不是在屏幕上显示结果，并将其写入到纹理。然后我从“真实”着色器中读取纹理，并将结果写入屏幕。这也使我能够比较不同的输出纹理来计算帧间粒子的速度和大小差异。

你可以阅读更多关于它在这里被讨论：https://github.com/mrdoob/three.js/issues/1183

例子： http://barradeau.com/blog/?p=621

来源

2017-03-30 13:51:48

three.js：更改顶点着色器中的属性值并将其传递到缓冲区

回答

相关问题