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：更改頂點着色器中的屬性值並將其傳遞到緩衝區

回答

相關問題