Question

是否可以更改着色器中属性的值并将其反映在缓冲区中以进行下一帧渲染？

例如，更改顶点着色器中顶点的位置，并将此新值发送回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];
    }
}

Answer 1

我发现了如何做到这一点。

使用一个名为FBO Simulation的概念，我创建了一个模拟着色器，它在其glsl着色器中计算计算，然后将它们写入纹理，而不是在屏幕上显示结果。然后我在“真实”着色器中读取该纹理并将结果写入屏幕。这也让我可以比较不同的输出纹理，以计算帧之间粒子的速度和大小差异。

您可以在此处详细了解正在讨论的内容：https://github.com/mrdoob/three.js/issues/1183

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

three.js：在顶点着色器中更改属性值并传递给缓冲区

1 个答案: