aframe-geometry-merger-component

An A-Frame component to merge geometries to reduce draw calls.

Usage no npm install needed!

<script type="module">
  import aframeGeometryMergerComponent from 'https://cdn.skypack.dev/aframe-geometry-merger-component';
</script>

README

aframe-geometry-merger-component

Version License

An A-Frame component to merge geometries to reduce draw calls.

For A-Frame.

This component is attached to a parent and will merge any meshes found in the descendants. A-Frame transforms placed on entities will be preserved. The merged geometry will be set on the parent entity's mesh (el.getObject3D('mesh')).

Useful if using vertex or face coloring as individual geometries' colors can still be manipulated individually since this component keeps a faceIndex and vertexIndex.

Source code for interactive merged geometries

API

For either geometry-merger or buffer-geometry-merger components:

Property Description Default Value
preserveOriginal Whether to remove the now-merged child goemetry or keep in scene graph. It can be useful to keep the original child entities' geometries and set their material="visible: false" so that we can still interact with them with colliders and raycasters. false

Members

Member Description
faceIndex Map of child A-Frame entitites Object3D UUIDs to array of face indices indiciating which faces in the merged geometries belong to the former child geometry
vertexIndex Map of child A-Frame entitites Object3D UUIDs to array of vertex indices indiciating which vertices in the merged geometries belong to the former child geometry

Installation

Browser

Install and use by directly including the browser files:

<head>
  <title>My A-Frame Scene</title>
  <script src="https://aframe.io/releases/0.7.0/aframe.min.js"></script>
  <script src="https://unpkg.com/aframe-geometry-merger-component/dist/aframe-geometry-merger-component.min.js"></script>
</head>

<body>
  <a-scene>
    <a-entity geometry-merger="preserveOriginal: false" material="color: #AAA">
      <a-entity geometry="primitive: box; buffer: false" position="-1 0.5 -2"></a-entity>
      <a-entity geometry="primitive: sphere; buffer: false" position="0 0.5 -2"></a-entity>
      <a-entity geometry="primitive: cylinder; buffer: false" position="1 0.5 -2" scale="0.5 0.5 05"></a-entity>
    </a-entity>
  </a-scene>
</body>

npm

Install via npm:

npm install aframe-geometry-merger-component

Then require and use.

require('aframe');
require('aframe-geometry-merger-component');