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.
  • OrderingRenderSystem must be registered last in World.setup. All scene mutations (transform sync, visibility, etc.) must have already run.

API reference