Skip to content

RenderSystem ​

The final system in the update loop. Submits the frame to the WebGL renderer, delegating to an EffectComposer when postprocessing is active.

Overview ​

RenderSystem runs last in the world update loop and is responsible for:

  • Calling renderer.render(scene, camera) to produce the final frame.
  • Detecting whether PostprocessingSyncSystem has placed an active EffectComposer on scene.userData.ecsPostprocessingComposer.
  • When a composer is active: resizing it to the current renderer element dimensions and calling composer.render() instead of the default render path.
  • Invoking an optional afterRender callback after every frame (used by editor overlays or custom render hooks).

Behavior notes ​

  • Composer precedence — the system checks scene.userData.ecsPostprocessingComposerActive each frame. If true, the EffectComposer path is used; otherwise the standard renderer.render() path is used. This coupling with PostprocessingSyncSystem means both systems must be present for postprocessing to work.
  • Dynamic resize — before calling composer.render(), the system reads renderer.domElement.clientWidth/Height (clamped to ≥ 1) and updates the composer size to match. This ensures the effect pipeline stays correct after window resizes without an explicit resize event handler.
  • Ordering — RenderSystem must be registered last in World.setup. All scene mutations (transform sync, visibility, etc.) must have already run.

API reference ​