This is an example component for A-Frame to take advantage of three.js instanced rendering support. This is useful if you have to render a large number of objects with the same geometry and material but with different world transformations. This will help you to reduce the number of draw calls and thus improve the overall rendering performance in your application.
This is a proof of concept that replicates a large number of spheres with random colors and transformations in just one draw call.
| Property | Description | Default Value |
|---|---|---|
count |
The number of geometries to instance | 10000 |
frustumCulled |
Attempt to hide the instances when out of view of the camera frustum to improve performance. Setting to true doesn't work well at the moment because the camera frustum doesn't "know" where the instanced geometries are located. |
false |
Install and use by directly including the browser files:
<head>
<title>My A-Frame Scene</title>
<script src="https://aframe.io/releases/1.0.4/aframe.min.js"></script>
<script src="[update this URL when takahirox accepts PR and pushes to npm]"></script>
</head>
<body>
<a-scene>
<a-entity instancing="count:40000; frustumCulled: false;"></a-entity>
</a-scene>
</body>This is a work in progress and could be improved in the future, for example:
- Allow other primitive geometries to be instanced in addition to the default sphere geometry
- Provide support for more advanced materials
- Provide support for imported glTF models to be instanced
- Provide improved support for frustumCulling (further research on frustum culling with instancing)