Add tonemapping selector (#391)

playcanvas · Jan 29, 2025 · a548084 · a548084
1 parent d2a14e6
commit a548084
Show file tree

Hide file tree

Showing 6 changed files with 111 additions and 6 deletions.
diff --git a/src/camera.ts b/src/camera.ts
@@ -6,6 +6,7 @@ import {
     PIXELFORMAT_DEPTH,
     PROJECTION_ORTHOGRAPHIC,
     PROJECTION_PERSPECTIVE,
+    TONEMAP_NONE,
     TONEMAP_ACES,
     TONEMAP_ACES2,
     TONEMAP_FILMIC,
@@ -104,6 +105,39 @@ class Camera extends Element {
         return this.entity.camera.fov;
     }
 
+    // tonemapping
+    set tonemapping(value: string) {
+        const mapping: Record<string, number> = {
+            none: TONEMAP_NONE,
+            linear: TONEMAP_LINEAR,
+            neutral: TONEMAP_NEUTRAL,
+            aces: TONEMAP_ACES,
+            aces2: TONEMAP_ACES2,
+            filmic: TONEMAP_FILMIC,
+            hejl: TONEMAP_HEJL
+        };
+
+        const tvalue = mapping[value];
+
+        if (tvalue !== undefined && tvalue !== this.entity.camera.toneMapping) {
+            this.entity.camera.toneMapping = tvalue;
+            this.scene.events.fire('camera.tonemapping', value);
+        }
+    }
+
+    get tonemapping() {
+        switch (this.entity.camera.toneMapping) {
+            case TONEMAP_NONE: return 'none';
+            case TONEMAP_LINEAR: return 'linear';
+            case TONEMAP_NEUTRAL: return 'neutral';
+            case TONEMAP_ACES: return 'aces';
+            case TONEMAP_ACES2: return 'aces2';
+            case TONEMAP_FILMIC: return 'filmic';
+            case TONEMAP_HEJL: return 'hejl';
+        }
+        return 'none';
+    }
+
     // near clip
     set near(value: number) {
         this.entity.camera.nearClip = value;
@@ -309,9 +343,13 @@ class Camera extends Element {
     }
 
     serialize(serializer: Serializer) {
-        serializer.pack(this.fov);
         serializer.packa(this.entity.getWorldTransform().data);
-        serializer.pack(this.entity.camera.renderTarget?.width, this.entity.camera.renderTarget?.height);
+        serializer.pack(
+            this.fov,
+            this.tonemapping,
+            this.entity.camera.renderTarget?.width,
+            this.entity.camera.renderTarget?.height
+        );
     }
 
     // handle the viewer canvas resizing
@@ -592,7 +630,8 @@ class Camera extends Element {
             azim: this.azim,
             elev: this.elevation,
             distance: this.distance,
-            fov: this.fov
+            fov: this.fov,
+            tonemapping: this.tonemapping
         };
     }
 
@@ -601,6 +640,7 @@ class Camera extends Element {
         this.setAzimElev(settings.azim, settings.elev, 0);
         this.setDistance(settings.distance, 0);
         this.fov = settings.fov;
+        this.tonemapping = settings.tonemapping;
     }
 }
 

diff --git a/src/editor.ts b/src/editor.ts
@@ -114,6 +114,16 @@ const registerEditorEvents = (events: Events, editHistory: EditHistory, scene: S
         setCameraFov(fov);
     });
 
+    // camera.tonemapping
+
+    events.function('camera.tonemapping', () => {
+        return scene.camera.tonemapping;
+    });
+
+    events.on('camera.setTonemapping', (value: string) => {
+        scene.camera.tonemapping = value;
+    });
+
     // camera.bound
 
     let bound = scene.config.show.bound;

diff --git a/src/shaders/splat-shader.ts b/src/shaders/splat-shader.ts
@@ -109,6 +109,9 @@ void main(void) {
         // don't allow out-of-range alpha
         color.a = clamp(color.a, 0.0, 1.0);
 
+        // apply tonemapping
+        color = vec4(prepareOutputFromGamma(max(color.xyz, 0.0)), color.w);
+
         // apply locked/selected colors
         if ((vertexState & 2u) != 0u) {
             // locked

diff --git a/src/ui/localization.ts b/src/ui/localization.ts
@@ -255,6 +255,14 @@ const localizeInit = () => {
                     'options.show-grid': 'Show Grid',
                     'options.show-bound': 'Show Bound',
                     'options.camera-fly-speed': 'Fly Speed',
+                    'options.tonemapping': 'Tonemapping',
+                    'options.tonemapping-none': 'None',
+                    'options.tonemapping-linear': 'Linear',
+                    'options.tonemapping-neutral': 'Neutral',
+                    'options.tonemapping-aces': 'ACES',
+                    'options.tonemapping-aces2': 'ACES2',
+                    'options.tonemapping-filmic': 'Filmic',
+                    'options.tonemapping-hejl': 'Hejl',
 
                     // Camera panel
                     'camera': 'CAMERA POSES',

diff --git a/src/ui/scss/view-panel.scss b/src/ui/scss/view-panel.scss
@@ -54,7 +54,7 @@
             display: flex;
             flex-direction: row;
             margin: 2px 2px;
-            width: 187px;
+            width: 185px;
             justify-content: space-between;
 
             & > .view-panel-row-picker {
@@ -63,5 +63,10 @@
                 height: 24px;
             }
         }
+
+        & > .view-panel-row-select {
+            width: 187px;
+            margin: 0;
+        }
     }
 }
diff --git a/src/ui/view-panel.ts b/src/ui/view-panel.ts
@@ -1,4 +1,4 @@
-import { BooleanInput, ColorPicker, Container, Label, SliderInput } from 'pcui';
+import { BooleanInput, ColorPicker, Container, Label, SelectInput, SliderInput } from 'pcui';
 import { Color } from 'playcanvas';
 
 import { Events } from '../events';
@@ -103,6 +103,34 @@ class ViewPanel extends Container {
         clrRow.append(clrLabel);
         clrRow.append(clrPickers);
 
+        // tonemapping
+
+        const tonemappingRow = new Container({
+            class: 'view-panel-row'
+        });
+
+        const tonemappingLabel = new Label({
+            text: localize('options.tonemapping'),
+            class: 'view-panel-row-label'
+        });
+
+        const tonemappingSelection = new SelectInput({
+            class: 'view-panel-row-select',
+            defaultValue: 'none',
+            options: [
+                { v: 'none', t: localize('options.tonemapping-none') },
+                { v: 'linear', t: localize('options.tonemapping-linear') },
+                { v: 'neutral', t: localize('options.tonemapping-neutral') },
+                { v: 'aces', t: localize('options.tonemapping-aces') },
+                { v: 'aces2', t: localize('options.tonemapping-aces2') },
+                { v: 'filmic', t: localize('options.tonemapping-filmic') },
+                { v: 'hejl', t: localize('options.tonemapping-hejl') }
+            ]
+        });
+
+        tonemappingRow.append(tonemappingLabel);
+        tonemappingRow.append(tonemappingSelection);
+
         // camera fov
 
         const fovRow = new Container({
@@ -252,13 +280,14 @@ class ViewPanel extends Container {
 
         this.append(header);
         this.append(clrRow);
+        this.append(tonemappingRow);
         this.append(fovRow);
         this.append(shBandsRow);
         this.append(centersSizeRow);
+        this.append(cameraFlySpeedRow);
         this.append(outlineSelectionRow);
         this.append(showGridRow);
         this.append(showBoundRow);
-        this.append(cameraFlySpeedRow);
 
         // handle panel visibility
 
@@ -383,6 +412,16 @@ class ViewPanel extends Container {
             events.fire('camera.setFov', value);
         });
 
+        // tonemapping
+
+        events.on('camera.tonemapping', (tonemapping: string) => {
+            tonemappingSelection.value = tonemapping;
+        });
+
+        tonemappingSelection.on('change', (value: string) => {
+            events.fire('camera.setTonemapping', value);
+        });
+
         // tooltips
         tooltips.register(bgClrPicker, localize('options.bg-color'), 'left');
         tooltips.register(selectedClrPicker, localize('options.selected-color'), 'top');