three.js: Change attributes value in vertex shader and pass to buffer

Question

Is it possible to change the value of an attribute in the shader and have this reflected in the buffer for the next frame render?

So for example change the position of a vertex in the vertex shader and send this new value back to the javascript buffer object?

Code sample below:

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;
}

Edit:

Right now I do this in the JS itself, but understand it will be faster if I move as much calculation as I can to the shaders? This is my current 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];
    }
}

yeah but it has nothing to do with glsl. At a three.js level its much more abstract. You can do this by updating both Geometry or BufferGeometry, share more code? — pailhead
– pailhead, Commented Feb 11, 2017 at 1:06
You can use webgl2 transform feedback for that (here is a very simple example: ibiblio.org/e-notes/webgl/gpu/bounce.htm), but I'm not sure how you can hook this up with three.js, maybe using object.onBeforeRender. — Martin Schuhfuß
– Martin Schuhfuß, Commented Feb 11, 2017 at 20:50

Tuqire Hussain · Accepted Answer · 2017-03-30 13:58:01Z

3

I found out how to do this.

Using a concept called FBO Simulation, I created a simulation shader, which computes the calculations in its glsl shaders, and then rather than displaying the results on screens, writes them to a texture. I then read from that texture in the "real" shader and wrote the results to the screen. This also allowed me to compare different output textures to work out velocity and size differences of particles between frames.

You can read more about it being discussed here: https://github.com/mrdoob/three.js/issues/1183

Example: http://barradeau.com/blog/?p=621

edited Mar 30, 2017 at 13:58

answered Mar 30, 2017 at 13:51

Tuqire Hussain

1811 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

three.js: Change attributes value in vertex shader and pass to buffer

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related