Skip to main content

Rendering

Forge's renderer is a WebGL2, sprite-batching renderer driven by the ECS. RenderContext owns the canvas and WebGL2 context; createRenderEcsSystem queries every camera entity (a CameraEcsComponent) and draws the sprites matching that camera's cullingMask, sorted by each sprite's layer (draw order, lower first) and then by depth (world Y position) within a layer, batching consecutive sprites that share a Renderable into a single draw call.

This section is a work in progress and currently covers the multipass rendering foundation and its first post-processing effect; a full guide to sprites, materials, and cameras is planned separately.

Guides in this section:

  • World Units and Cameras: fixing a camera's vertical world units so rendering stays consistent across screen resolutions and aspect ratios, instead of hand-computing canvas-pixel fractions in game logic.
  • Multipass Rendering: rendering a camera into an off-screen texture and presenting it, the groundwork for future post-processing and lighting passes.
  • Gaussian Blur: a two-pass separable blur post-processing effect built on top of multipass rendering.
  • Bloom: an additive glow post-processing effect built on the same separable blur technique.
  • HDR Rendering & Tone Mapping: opting a camera's render target into HDR storage and compressing it back to displayable range, so bloom can react to true HDR brightness (including emissive maps) instead of an 8-bit ceiling.
  • Nine-Slice Sprites: slicing a sprite into a 3x3 grid so its corners keep their size while its edges/center stretch or tile, for UI panels and buttons that resize without distorting.