InstancedMesh LOD - 1 million instances

Showcase
, , ,
1

Hello :slight_smile:

I am implementing the LOD for my InstancedMesh2 library and would like to share with you the first result.

In this example there are a million instances (but it’s possible to edit the example), which change color (and geometry) depending on the distance. This is done using a BVH.

There are several things to improve including support for shadows, render the nearest layer first and make a unique drawcall for objects that share the same material.

Edit: https://instanced-mesh2-lod-demo.vercel.app/

Live example: three.ez/InstancedMesh2 - InstancedMeshLOD - StackBlitz

7 Likes
2

Screenshot_20240915_211859
Screenshot_20240915_2118591080×988 93.2 KB

This sounds amazing but unable to run like official webgpu examples from three on huawei p30… :thinking:…

Screenshot_20240915_212041
Screenshot_20240915_2120411080×1894 107 KB

1 Like
3

I deployed it here also: https://instanced-mesh2-lod-demo.vercel.app/

1 Like
4

Screenshot_20240915_234820
Screenshot_20240915_2348201080×2245 165 KB

:flushed::heart_eyes::heart_eyes: Oh that’s awesome!!! Runs like butter :astonished::scream::heart_eyes::heart_eyes::heart_eyes: that’s stunning work with amplitudes of potential!!!

2 Likes
5

thanks :grin:

this is the current code:

const instancedMeshLOD = new InstancedMeshLOD(main.renderer, count);

instancedMeshLOD.addLevel(new SphereGeometry(5, 30, 15), new MeshLambertMaterial({ color: 'green' }));
instancedMeshLOD.addLevel(new SphereGeometry(5, 20, 10), new MeshLambertMaterial({ color: 'yellow' }), 100);
instancedMeshLOD.addLevel(new SphereGeometry(5, 10, 5), new MeshLambertMaterial({ color: 'orange' }), 500);
instancedMeshLOD.addLevel(new SphereGeometry(5, 5, 3), new MeshLambertMaterial({ color: 'red' }), 1000);

instancedMeshLOD.updateInstances((object, index) => {
  object.position.x = random.range(-spawnRange, spawnRange);
  object.position.z = random.range(-spawnRange, spawnRange);
});

instancedMeshLOD.computeBVH();
2 Likes