Change vertex-color by BufferAttribute using copy?

Questions
,
1

I am building a digital earth that is made up of hexagons. I want to change the color of the individual hexagonal cells according to a time slider, to e.g. show cloud coverage, or rainfall, etc over time.

0004
00041000×750 2.02 MB

Each cell is a BufferGeometry with one BufferAttribute for color (the vertex-color) and an id so I can use the raycaster and identify the cell. I merge all cells with BufferGeometryUtils.mergeBufferGeometries(geoms)

I made a stripped down fiddle version with only 4 cells and a slider.

You can see that I define the colors per cell id in

let cells = [
  [1, '#ff0000', '#ff0000', '#ff0000','#ffffff'],
  [2, '#00ff00', '#ff00ff', '#ff0000','#ffffff'],
  [3, '#0000ff', '#ffff00', '#ff00ff','#ffffff'],
  [4, '#ffffff', '#ffff00', '#00ff00','#ffffff']
];

I added more BufferAttributes like color1, color2, color3 and color4 and thought of using copy to get them to color with

mesh.geometry.attributes.color.copy(mesh.geometry.attributes.color1);

each time slider.oninput happens.

I found this very helpful, but could not find a working way to apply this to my problem. I guess I am missing the needsUpdate for the color?

BUT Maybe there is a way better approach to changing the vertex colors than multiple BufferAttributes and copy???

2

I think I would go for InstancedMesh. I mean geometry merging is a fine approach but if you need a more flexible solution that allows you to position and color individual instances, instanced rendering is better. Especially since InstancedMesh provides an great API for setting per instance transformation and color. Check out how this works in the following demo:

https://jsfiddle.net/t4ov5r8b/

1 Like
3

To answer this question: Yes :slight_smile:. Otherwise the buffer data on the GPU are not updated.

1 Like
4

Thanks, its perfect! What’s your experience, will this approach still be good with millions of cells/vertices?

5

That really depends on what device you are running your app. A few million vertices is definitely problematic for devices with limited GPU capabilities. The performance also depends on how expensive your fragment shader will be.

Sorry for these vague statements but it’s hard to make such performance predictions in advance^^.

2 Likes