Creating a vertex buffer using a divisor

I have been working on a g-code viewer and have a working prototype using thin instances but I found after you get to a certain size the performance of the thin instances tends to drop quite a bit.

I decided to test out an approach of building a mesh using a cube and transforming it’s points into a buffer. Loading time is slower due to all the transformations but the scene runs significantly better.

That being said I am trying to build out a VertexBuffer with metadata that needs to be sent per item instance and was trying to avoid making a buffer that was per vertex yet have the vertices get the appropriate data similar to how thin instances are able to retrieve data but have not had any success.

I put together a PG that is roughly how I am putting the mesh together programmatically in hopes that I could be steered in the correct direction to allow a shader to access the data.


I guess you are trying to add a custom attribute so this should help Thin Instances | Babylon.js Documentation

cc @Evgeni_Popov our own thin instance hero

In this case I am not using a thin instance but creating a regular mesh per the pg. I am trying to make a custom attribute that acts like a thin instance attribute on a regular mesh to keep the VertexBuffer small

I think I am totally misunderstanding what you are trying to do ?

In this case what I am doing is I am building up a vertex buffer with transformed vertices and indices to build a mesh instead of using thin instances. I need to ship some metadata through an attribute about a group of vertices. What I am trying to do is instead of sending the same metadata (color in my example) to every vertex I am trying to partition the data to use the first color for the first set of vertices and so on to reduce the size of the buffer that needs to be built with the data.

In the PG you’ll see that based on a set of matrices I am creating new vertices and building new indices to “duplicate” the cube in a new position within a single mesh. What I want to do is have a vertex buffer with a matching number of cubes and reference that value in the shader. a vertex buffer with 3 colors (9 floats) instead of a vertex buffer with with a color per vertex (72 floats).

Was hoping to be able to set the 3 colors with a divisor of 24 and have the be picked up in the custom shader.

I hope that makes sense.

in the PG I set
let pickColor = new Float32Array(3 * matrices.length)
where normally I would have to do
let pickColor = new Float32Array(3 * matrices.length * vertices.length)
and set a color per vertex.

My sample is a color but in reality I need to send metadata used by the shader for custom rendering.

The divisor of a vertex buffer is only used in the case of instance rendering. It has no effect for no instanced rendering. See:

To my knowledge, you can’t instruct the GPU to advance in a vertex buffer with a different rate than in another vertex buffer when in non instanced mode.

Thanks for the information, that’s unfortunate that OpenGL does not support this option but it’s out of our control :slight_smile:

I may have to stick with the thin instance route for now though I am looking to see if using a Buffer Texture and passing a single float value to the vertices as an index would work

Or would a storage buffer be a viable option?

Storage buffers don’t exist in WebGL, it’s WebGPU only.