Forge Universe

Renderers

All renderers read the same scene JSON. They differ in output medium, fidelity, and interaction.

Comparison

Renderer Module Hash Output WebGL Interaction
2D projections UniverseProject2D Up2 SVG No Static
Static gallery UniverseStaticCss Us3 SVG + CSS cube No Click → flyout
Solid flyout UniverseSolidFlyout Ufl WebGL + SVG Yes Dronie auto-orbit; XYZ panels
Drone flythrough UniverseDynamicGl Udr WebGL meshes Yes Play / pause dronie
Sim bounce UniverseSimGl Usb WebGL meshes + sim Yes Play / pause sim; reset
Construction assets asset-renderer.mjs Uca GLB meshes + joints Yes Orbit; sliders; keyboard
Construction realistic asset-renderer.mjs Ucr Imported GLB meshes Yes Orbit; static assets

2D projections (Up2)

Page: /demos/projections-2d.html

Renders hexahedron and sphere from the scene in two modes:

  1. Orthographic — parallel projection; axis crosshairs in each panel.
  2. Perspective — uses scene camera (eye, target, fov).

Wireframes are SVG <line> elements; sphere uses <path> great-circle rings.

Static gallery (Us3)

Page: /demos/static-solids.html

Grid of six cards — one per node in the scene:

  • Hexahedron — CSS preserve-3d cube with six faces.
  • Other solids — perspective SVG wireframe thumbnails.
  • Sphere — latitude + great-circle wire rings (not a flat circle).

Each card is focusable (tabindex="0") and opens the flyout on click or Enter/Space.

Solid flyout (Ufl)

Opened from the static gallery. Layout:

  1. Dronie rotation — single solid centered at origin; camera orbits automatically (Three.js MeshStandardMaterial; sphere adds wireframe overlay).
  2. Orthographic projections — three panels: - XY (top) — drop Z - XZ (front) — drop Y - YZ (side) — drop X

Close via ×, backdrop click, or Escape.

Drone flythrough (Udr)

Page: /demos/drone-flythrough.html

Renders all nodes as shaded Three.js meshes on a ground plane. Play dronie toggles orbital camera motion; FPS HUD shows frame timing.

Default camera uses scene camera when dronie is paused.

Sim bounce (Usb)

Page: /demos/sim-bounce.html

Renders all nodes as shaded Three.js meshes on a ground plane. UniverseSim steps gravity and contacts from scene.sim; mesh positions follow node.pose after each step.

  • Play sim — continuous UniverseSim.step while data-playing="true".
  • Reset — UniverseSim.reset and mesh resync.
  • Reduced motion — play button becomes Step once (single step per click).

See Simulation and Sim bounce page doc.

Construction assets (Uca)

Page: /demos/construction-assets.html

ES-module Three.js renderer loads GLB assets from scene asset.uri fields. Articulation joints drive GLB node transforms kinematically — not via UniverseSim.

  • Orbit controls on the viewport.
  • Per-joint sliders in the side panel; keyboard bindings from controls.bindings.
  • Optional ?ws= WebSocket bridge for forge-universe/state-v1 messages.

See Construction assets and Omniverse import.

Projection data shapes

projectNodeWireframe returns:

kind Fields SVG mapping
wireframe edges, points <line> per edge
sphereWire polylines <path> per ring

projectNodeAxisPanel uses the same kinds for flyout XYZ panels.

Accessibility

  • Flyout: role="dialog", aria-modal, focus on open.
  • Reduced motion: flyout dronie uses fixed camera when prefers-reduced-motion: reduce; sim bounce uses step-once instead of continuous play.
  • Gallery cards: role="button" with aria-label per solid type.