Scene and views

Combine both registrations

Use an initialized alpha: truerenderer and a positioned container at the document’s top-left. Give every registration its own camera. Add the overlay groups directly to worldScene before tracking them.

import { ThreeDOM } from "portalgl/three"

const dom = new ThreeDOM({ renderer, container })

// Each view has its own scene and camera.
dom.addView(blueElement, { scene: blueScene, camera: blueCamera })
dom.addView(greenElement, { scene: greenScene, camera: greenCamera })

// Both overlay groups share one world and a third camera.
worldScene.add(firstGroup, secondGroup)
const world = dom.addScene({ scene: worldScene, camera: worldCamera })
world.track(firstAnchor, firstGroup, { fill: 0.85, clip: false })
world.track(secondAnchor, secondGroup, { fill: 0.85, clip: false })

await dom.prepare() // Prepares independent view targets.
renderer.setAnimationLoop(time => {
  dom.advance(time)
  // Animate child meshes here.
  dom.render() // Views first, then the shared world above them.
})

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

WebGPU uses two local view canvases plus the shared overlay canvas, all on one renderer and device. WebGL2 draws everything on one shared canvas. Shared scenes render above views with independent depth, so objects in different registrations do not occlude one another through a common depth buffer.