Points mesh renders wrongly after switching to BufferGeometry

Questions
1

Hello,
I am building an interactive map based on a texture from svg file.
My initial setup was to use Three.Geometry with PointsMaterial.
Results can be viewed here https://codepen.io/stopyransky/pen/rNNXOzv.
Map animates and renders vertices in right positions.

Later I realised that i will need to have per-vertex color so I had to change to Three.BufferGeometry and assign to it BufferAttributes for position and color manually. Once i did it, scene renders without errors, but the vertices are totally in wrong positions.

Here is sketch with BufferGeometry: https://codepen.io/stopyransky/pen/abzoQKG

I have tried to switch into ShaderMaterial and looking at source code from this example:
https://threejs.org/examples/#webgl_buffergeometry_custom_attributes_particles
Unfortunately shader (trimmed to minimum features) is not rendering anything.

Please help to understand how to switch to BufferGeometry in this case. What am I missing so vertices render in correct positions and colors?
Should i move to ShaderMaterial in this case or it is not needed ?

2

You have not computed the stride correctly which is used to address single elements in your Float32Array. Instead of doing this:

arr[i] = p.x
arr[i+1] = p.y
arr[i+2] = p.z

You have to do this:

var stride = i * 3;
      
arr[stride] = p.x
arr[stride+1] = p.y
arr[stride+2] = p.z

Same for your color attribute. After this fix, the result looks as expected:

https://jsfiddle.net/fs4nawtj/2/

1 Like