Renderer Settings

The Renderer is a section of the Outliner Panel that gives you full control over how your scene is drawn, displayed, and composed on screen. It defines the renderer’s technical and visual properties, allowing precise customization of how 3D and 2D elements are handled.

At the top of the Render tab, you’ll find general renderer settings such as Pixel Ratio, Clear Color, and Tone Mapping, along with exposure, and display options for CSS2D and CSS3D layers. Each section expands to reveal all available properties for fine-tuning rendering performance and visual output.

Pixel Ratio – Adjusts rendering resolution relative to device pixel density for optimal performance and visual sharpness.
Background Overlay Color – Defines the background overlay color.
Tone Mapping – Controls how scene brightness and contrast are processed, offering a range of tone mapping methods.
Exposure – Adjusts scene brightness to achieve the desired lighting balance.

Below these, two dedicated sections manage CSS2D and CSS3D renderers:

CSS2D Settings – Handles the rendering of flat, HTML-based 2D overlays. Includes toggles for Visibility, Interaction, and Z-Index layering.
CSS3D Settings – Controls 3D HTML elements rendered within the WebGL context. Also includes Visibility, Interaction, and Z-Index properties to determine stacking order and interactivity.

Tone Mapping is a rendering process that converts the wide range of brightness values (high dynamic range, or HDR) produced by a 3D scene into a range suitable for display on a standard screen (low dynamic range, or LDR).

In other words, it’s how the renderer translates real-world lighting into something visually balanced and natural-looking on your monitor. Without tone mapping, bright areas might appear blown out and dark areas too flat or underexposed.

Here are the available options:

NoToneMapping
No color or brightness compression is applied. The renderer displays raw lighting values—useful for debugging or when applying your own post-processing pipeline.

LinearToneMapping
Applies a simple linear scale to brightness. It preserves accurate color relationships but can appear flat or harsh in bright scenes.

ReinhardToneMapping
A classic tone-mapping curve that compresses highlights smoothly, reducing blown-out whites and keeping overall brightness balanced. Produces a natural, photographic look.

CineonToneMapping
Based on the Cineon film response curve used in digital film production. It simulates the gentle highlight roll-off characteristic of film, offering a cinematic appearance.

ACESFilmicToneMapping
A standard from the Academy Color Encoding System (ACES), designed for professional film workflows. It provides a high-fidelity, filmic look with strong contrast and pleasing highlight control—commonly used in modern cinematic rendering.

AgXToneMapping
A more recent tone mapping curve that aims for perceptual accuracy and balanced contrast. It’s softer and more neutral than ACES, preserving midtones with realistic color response.

NeutralToneMapping
Similar to linear but slightly compresses highlights while maintaining color neutrality. A good general-purpose option when you want subtle tone control without strong stylization.

The Renderer Settings is where performance, clarity, and interactivity intersect, providing a clean overview of how your scene is visually constructed and displayed across both 2D and 3D layers.

Scene Animation Settings

Elementor Settings

Framing Your 3D Scene

Getting Started

Animations

AI Tools