Shared scene

Register one world

Start with an initialized alpha: truerenderer. The positioned container starts at the document’s top-left, as in the other demos. Both groups must be direct children of the scene.

import { ThreeDOM } from "portalgl/three"
import { ClippingGroup, Group, PerspectiveCamera, Scene } from "three/webgpu"

const dom = new ThreeDOM({ renderer, container })
const scene = new Scene()
const camera = new PerspectiveCamera(50, 1, 0.1, 100)
camera.position.z = 5

// purpleMesh and orangeMesh are your meshes; add lighting to the scene.
const purple = new ClippingGroup()
const orange = new Group()
purple.add(purpleMesh)
orange.add(orangeMesh)
scene.add(purple, orange)

const world = dom.addScene({ scene, camera })
world.track(purpleElement, purple, { fill: 0.85, clip: true })
world.track(orangeElement, orange, { fill: 0.85, clip: false })

renderer.setAnimationLoop(time => {
  dom.advance(time)
  // Animate child meshes; tracking owns the groups' position and scale.
  dom.render()
})

// On teardown:
renderer.setAnimationLoop(null)
dom.destroy() // Releases the shared scene and its bindings.
// Dispose your geometries, materials, and renderer too.

Shared scenes use a shared canvas on both WebGPU and WebGL2. This scene skips rendering when both cubes are outside the viewport. The purple cube uses a ClippingGroup with clipping enabled; the orange cube uses a Group with clip: false.