Updating buffers from within shaders in webgl

Question

I'm a beginner at shaders and WebGL and I've taken some shortcuts to develop what I currently have, so please bear with me.

Is there a way to update attribute buffer data within the GPU only? Basically what I want to do is to send in three buffers t0, t1, t2 into the GPU representing points and their position in time 0, 1, and 2 respectively. Then I wish to update their new position tn depending on the properties of t2, t1, and t0 depending on the velocity of the points, turning angle, and so on.

My current implementation updates the positions in javascript and then copies the buffers into WebGL at every draw. But why? This seems terribly inefficient to me, and I don't see why I couldn't do everything in the shader to skip moving data from CPU->GPU all the time. Is this possible somehow?

This is current vertex shader which sets color on the point depending on the turn direction and angle it's turning at (tn is updated in JS atm by debugging functions):

export const VsSource = `
    #define M_PI 3.1415926535897932384626433832795
    
    attribute vec4 t0_pos;
    attribute vec4 t1_pos;
    attribute vec4 t2_pos;

    varying vec4 color;

    attribute vec4 r_texture;

    void main() {

        float dist = distance(t1_pos, t2_pos);
        vec4 v = normalize(t1_pos-t0_pos);
        vec4 u = normalize(t2_pos-t1_pos);
        float angle = acos(dot(u, v));
        float intensinty = angle / M_PI * 25.0;
        float turnDirr = (t0_pos.y-t1_pos.y) * (t2_pos.x-t1_pos.x) + (t1_pos.x-t0_pos.x) * (t2_pos.y-t1_pos.y);

        if(turnDirr > 0.000000001 ) {
            color = vec4(1.0, 0.0, 0.0, intensinty);
        } else if( turnDirr < -0.000000001 ) {
            color = vec4(0.0, 0.0, 1.0, intensinty);
        } else {
            color = vec4(1.0, 1.0, 1.0, 0.03);
        }
                
        gl_Position = t2_pos;

        gl_PointSize = 50.0;
    }
`;

What I want to do is to update the position gl_Position (tn) depending on these properties, and then somehow shuffle/copy the buffers tn->t2, t2->t1, t1->t0 to prepare for another cycle, but all within the vertex shader (not only for the efficiency, but also for some other reasons which are unrelated to the question but related to the project I'm working on).

Side note. The best float precision of webGL shaders is 32 bits. Most of the defined string 3.1415926535897932384626433832795 is lost as the closest you can get is ~3.141593 — Blindman67, Jul 07 '20 at 18:01

gman · Answer 1 · 2020-07-06T08:18:58.717

Note, your question should probably be closed as a duplicate since how to write output from a vertex shader is already covered but just to add some notes relevant to your question...

In WebGL1 is it not possible to update buffers in the GPU. You can instead store your data in a texture and update a texture. Still, you can not update a texture from itself

 pos = pos + vel   // won't work

But you can update another texture

 newPos = pos + vel   // will work

Then next time pass the texture called newPos as pos and visa versa

In WebGL2 you can use "transformFeedback" to write the output a vertex shader (the varyings) to a buffer. It has the same issue that you can not write back to a buffer you are reading from.

There is an example of writing to a texture and also an example of writing to a buffer using transformfeedback in this answer

Also an example of putting vertex data in a texture here

There is an example of a particle system using textures to update the positions in this Q&A

Updating buffers from within shaders in webgl

1 Answers1

Linked