# Points mesh renders wrongly after switching to BufferGeometry

**URL:** <https://discourse.threejs.org/t/points-mesh-renders-wrongly-after-switching-to-buffergeometry/11147>\
**Category:** Questions\
**Tags:** buffergeometry\
**Created:** [December 2, 2019, 8:05am UTC](https://discourse.threejs.org/t/points-mesh-renders-wrongly-after-switching-to-buffergeometry/11147 "2019-12-02T08:05:13Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![stopyransky](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/stopyransky/32/3526_2.png) [@stopyransky](https://discourse.threejs.org/u/stopyransky)\
**Post date:** [December 2, 2019, 8:05am UTC](https://discourse.threejs.org/t/points-mesh-renders-wrongly-after-switching-to-buffergeometry/11147/1 "2019-12-02T08:05:13Z")

</div>

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](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](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](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 ?

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [December 2, 2019, 12:08pm UTC](https://discourse.threejs.org/t/points-mesh-renders-wrongly-after-switching-to-buffergeometry/11147/2 "2019-12-02T12:08:16Z")

</div>

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

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

```

You have to do this:

```auto
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/](https://jsfiddle.net/fs4nawtj/2/)