Three.ez - BatchedMesh extensions
Simplify your three.js application development with three.ez!
three.ez/instanced-mesh - Enhanced InstancedMesh with features for performance and usability
[](https://discord.gg/MVTwrdX3JM)
[](https://www.npmjs.com/package/@three.ez/batched-mesh-extensions)
[](https://github.com/agargaro/batched-mesh-extensions)
[](https://bundlephobia.com/package/@three.ez/batched-mesh-extensions)
[](https://sonarcloud.io/summary/new_code?id=agargaro_batched-mesh-extensions)
[](https://deepscan.io/dashboard#view=project&tid=21196&pid=29481&bid=948373)
This library adds and overrides some `BatchedMesh` methods to improve performance and add new features.
```ts
// Extends BatchedMesh prototype with new methods
extendBatchedMeshPrototype();
// Calculate the number of vertices and indices for a BatchedMesh and create it
const { vertexCount, indexCount } = getBatchedMeshCount(geometries);
const myBatchedMesh = new BatchedMesh(instanceCount, vertexCount, indexCount, material);
// Add geometries
const geoId = myBatchedMesh.addGeometry(geometries[geometryIndex]);
// Add instances
const instanceId = myBatchedMesh.addInstance(geoId);
// Compute the BVH to accelerate raycasting and frustum culling after adding all instances
myBatchedMesh.computeBVH();
```
- [**Spatial indexing (dynamic BVH)**](#spatial-indexing-dynamic-bvh): *speed up raycasting and frustum culling.*
- [**Per-instance uniforms**](#per-instance-uniforms-webglrenderer-only): *assign unique shader data to individual instances.* (**WebGLRenderer only)**
- [**Level of Detail (LOD)**](#level-of-detail-lod): *dynamically adjust instance detail based on distance.*
## Live Examples
**Using three.js vanilla**
- Will be added in the future. Or you consider to contribute with a PR.
**Using three.ez/main (WebGLRenderer)**
- [Custom uniforms per instance](https://stackblitz.com/edit/three-ez-batchedmesh-extensions?file=src%2Fmain.ts)
- [Compute a BVH](https://glitch.com/edit/#!/three-ez-batched-mesh-extensions-bvh)
- [Compute a BVH and use three-mesh-bvh](https://glitch.com/edit/#!/three-ez-batched-mesh-extensions-three-mesh-bvh?path=main.js)
- [LOD](https://glitch.com/edit/#!/three-ez-batched-mesh-extensions-lod?path=main.js)
## Need help?
Join us on [Discord](https://discord.gg/MVTwrdX3JM) or open an issue on GitHub.
## Like it?
If you like this project, please leave a star. Thank you! ❤️
## Documentation
The documentation is available [here](https://agargaro.github.io/batched-mesh-extensions).
## Installation
You can install it via npm using the following command:
```bash
npm install @three.ez/batched-mesh-extensions
```
Or you can import it from CDN:
### WebGLRenderer
```html
```
### WebGPURenderer
```html
```
## Extend BatchedMesh prototype
To extend the `BatchedMesh` prototype with the new methods, you need to call the `extendBatchedMeshPrototype()` method at the top of your application.
```ts
import { extendBatchedMeshPrototype } from '@three.ez/batched-mesh-extensions';
extendBatchedMeshPrototype();
```
For more advanced use, it's also possible to manually update the `BatchedMesh` prototype because the new methods are all exported.
## Features
### Spatial indexing (dynamic BVH)
**To speed up raycasting and frustum culling**, a spatial indexing data structure can be created to contain the bounding boxes of all instances.