Relu Spatial Docs

Appearance

VideoSystem ​

Reconciles VideoComponent state with the underlying HTML <video> element and THREE.js mesh/material each frame. Only active in preview mode — editor viewports are unaffected.

Overview ​

VideoSystem runs every frame in preview and is responsible for:

  • Driving play(), pause(), and stop (pause + seek to 0) on the HTML <video> element based on the intent flags set by VideoComponent.play(), .pause(), and .stop().
  • Detecting when a non-looping video ends naturally and resetting the component flags.
  • Syncing loop, volume, width, height, positional, refDistance, distanceModel, and rolloffFactor to the video element and THREE.js mesh material.
  • Updating the green-screen chroma key shader uniforms (backgroundColor, similarity, smoothness, spill) live when they change.

Queried components ​

ComponentAccess
VideoComponentRead + mutate (isPlaying, isPaused flags; option properties)

Behavior notes ​

  • Editor skip — when constructed with { isEditor: true } the update method returns immediately so no video state is applied in the editor.
  • Natural end detection — the system compares HTMLVideoElement.paused and ended state between frames. If the video ended on its own while the component still believed it was playing, the component flags are reset.
  • Change detection — option sync uses a per-entity snapshot from the previous frame. Chroma key shader uniforms and other options are only written when they change, avoiding redundant material updates every frame.
  • Positional audio — videos with options.positional = true use a THREE.PositionalAudio node attached to the mesh; non-positional videos use a standard THREE.Audio node. The system respects refDistance, distanceModel, and rolloffFactor for spatial audio falloff.

API reference ​