Mesmerizing Animations with 200k Instances and Shader Material

Demos and projects
1

Working with VertexBuffer and Float32Array lets takes your animations to the next level, and here it is for you to play with:

3 Likes
2

Woaaaah this is so nice to stare at :eye::nose::eye: beautiful effect!

3

A whole new world has opened up for me as I’ve created my first shader for my web game using shaderMaterial.

It took me around 10-15 hours to complete, and before this, I had no idea how to make a program like this.

It was a fun run!

4

Could you tell me a little about how you approached this and the sources you used for your learning?
I think it’s about a year now I said I wanted to dig into this but I never found (or wanted to find) the time to push it to the next level. May be your experience will help me gather my guts together and finally really start with this. That of course, if you have a minute (else, no worries).
Meanwhile, have a great weekend :sunglasses:

5

I used Babylon Playground to find some examples for instances and using ShaderMaterial.

Then I used ChatGPT to learn about VertexShader and FragmentShader, their purposes, and the attributes and uniforms in the shader programs. I also learned how to pass values from the VertexShader to the FragmentShader, and other things such as “#include<instances…>” that are required for instances.

After that, I started making my first shader program and used Playground for it (as you can see in the first post for this thread).

For the flame effect, this was my first actual program, which uses only three variables: a normalized particle time offset, particle strength, and a shared time. Here is the program that I used for the VertexShader, which is quite simple:

void main(void) {
        vec4 p = vec4( position, 1.0 );
        vColor = color;
        
        if(strength > 0.5) {
           float particletime = ptime + time;
           if(particletime > 1.0)
           particletime = particletime -1.0;
           p.y = p.y + (strength*particletime);
           vColor.a = 1.0-particletime;
        }

        gl_Position = worldViewProjection * finalWorld * p;
}
3 Likes
6

Thanks so much for taking the time to explain all this to me.
Enjoy your weekend :palm_tree: :sun_with_face:

2 Likes