Three.js Demos
Three.js Demos

BatchedMesh Opacity + Wireframe (r183)

Performance-focused Three.js `BatchedMesh` demo showing per-instance opacity animation via `setColorAt(Vector4)` and live wireframe mode toggling.

Key topics: three.js batchedmesh, per-instance opacity, wireframe, r183, rendering performance

What this code does

- BatchedMesh Aggregation: combines many object instances into one renderable for lower CPU submission overhead.
- Per-Instance Opacity: uses `batchedMesh.setColorAt(instanceId, Vector4)` where the alpha channel controls transparency.
- Wireframe Compatibility: toggling material wireframe demonstrates r183-era support improvements for batched rendering paths.
- Mixed Geometries: boxes, spheres, and cones are packed into one batched container with shared material state.
- Dynamic Opacity Animation: alpha pulsing runs per instance to stress-test color/opacity updates each frame.
- Practical Use: useful when you need many repeated props with varying transparency and optional debugging wireframe views.

Related Demos

Continue Learning

Browse Three.js Tutorials

JavaScript Implementation

ES6+ 
import * as THREE from 'three'

const material = new THREE.MeshStandardMaterial({
  vertexColors: true,
  transparent: true
})
const batched = new THREE.BatchedMesh(200, 25000, 60000, material)

const boxId = batched.addGeometry(new THREE.BoxGeometry(1, 1, 1))
const sphereId = batched.addGeometry(new THREE.SphereGeometry(0.6, 16, 16))

const matrix = new THREE.Matrix4()
for (let i = 0; i < 200; i++) {
  const gId = i % 2 === 0 ? boxId : sphereId
  const instanceId = batched.addInstance(gId)
  matrix.makeTranslation((i % 20) - 10, 1, Math.floor(i / 20) - 5)
  batched.setMatrixAt(instanceId, matrix)
  batched.setColorAt(instanceId, new THREE.Vector4(0.2, 0.7, 1.0, 0.6))
}

batched.material.wireframe = false
scene.add(batched)
← Back