logo

Babylon.js Market

ToneMapping

rendering

ToneMapping

Free

Install with the CLI:

bjs download ToneMapping

ToneMapping

A scene-wide filmic grade — ACES tone mapping plus an exposure/contrast lift.

What it does

ToneMapping is data-only: it holds a mode, an exposure multiplier, and a contrast. Tone mapping is scene-global, so you put a single ToneMapping component on one world/lighting entity. On attach the System reads settings() off the component and calls apply on the toneMapping adapter plugin, which drives the live scene's imageProcessingConfiguration — enabling the curve, setting the ACES type, and pushing exposure and contrast. It applies exactly once (not per frame), and on entity removal it calls the plugin's clear to turn tone mapping back off. Babylon has no adapter-interface method for image processing, so this ships an adapter plugin (ToneMapping.babylon.ts); if no plugin is bootstrapped — headless tests, or a renderer without one — the apply is a safe no-op.

Use it in a scene

A scene is just data — a list of entities, each with its components. At startup the SceneLoader turns this JSON into a live world; edit the file and reload to rebuild it.

Build it from scratch with the bjs CLI:

  1. 1Scaffold a project
    npm create @babylonjsmarket/arcade@latest my-game

    World, renderer, and dev server — ready to run.

  2. 2Install dependencies
    cd my-game && npm install
  3. 3Add ToneMapping
    bjs download ToneMapping

    Copies its source into src/ so the scene resolves.

    First time? Run bjs login once.

  4. 4Paste the scene into src/scenes/arcade-room.ts and run
    npm run dev

    SceneLoader builds the world from the JSON; reload to rebuild.

JSON
{
  "Grade": {
    "components": {
      "ToneMapping": {
        "mode": "aces",
        "exposure": 1.05,
        "contrast": 1.05
      }
    }
  }
}

Props

  • mode ('aces' | 'standard' | 'none', default 'aces') — the tone-mapping curve. 'aces' is the filmic default; 'standard' uses Babylon's standard curve; 'none' disables tone mapping (leaves it off).
  • exposure (number, default 1.05) — linear exposure multiplier applied before the curve.
  • contrast (number, default 1.05) — post-curve contrast; 1 is neutral.

Events

None. ToneMapping is one-shot on init — it drives the adapter plugin's apply/clear through renderer.extension('toneMapping') and emits nothing on the EventBus, so there is no event to subscribe to.

Dependencies

None. ToneMapping stands alone — it needs no sibling component on its own entity. It does require the Babylon adapter plugin to be registered at bootstrap: call registerBabylonToneMappingExtension(adapter) right after creating the adapter, before new ArcadeGame(adapter, …). Without it the component loads cleanly but the grade is a no-op.

Notes

  • The grade applies once and is not reconciled each frame; changing exposure or contrast on the component at runtime does not re-push through the adapter.
  • mode: 'none' maps to the standard curve internally but leaves toneMappingEnabled false, so the scene renders ungraded.
  • Pair it with an EnvironmentTexture (image-based lighting) to reproduce the marketplace figure-render look — ACES tone mapping is what turns raw HDR/IBL output into the filmic thumbnail grade.
  • The runtime "applied" flag lives in a WeakMap keyed by the component, so re-adding the entity re-applies the grade cleanly.

More like this

DirectionalLight
EnvironmentTexture
HemisphericLight
Mesh
MeshPrimitive
Renderable
Shadow
Skybox
SpaceDust

Was this page helpful?

We read every note — tell us what's working and what isn't.

↑↓ NavigateEnter SelectEsc CloseCtrl+K Open Search