[BREAKING] Refactor API for gammaCorrection, toneMapping and Fog settings

examples/assets/scripts/misc/camera-frame.mjs

@@ -4,21 +4,11 @@ import {
     Script,
     Color,
     math,
-    RenderingParams,
     CameraFrameOptions,
     RenderPassCameraFrame,
-    FOG_NONE,
     SSAOTYPE_NONE
 } from 'playcanvas';
 
-/** @enum {string} */
-const FogType = {
-    NONE: 'none',      // FOG_NONE
-    LINEAR: 'linear',  // FOG_LINEAR
-    EXP: 'exp',        // FOG_EXP
-    EXP2: 'exp2'       // FOG_EXP2
-};
-
 /** @enum {number} */
 const ToneMapping = {
     LINEAR: 0,  // TONEMAP_LINEAR
@@ -98,32 +88,6 @@ class Rendering {
      * @step 0.001
      */
     sharpness = 0.0;
-
-    /**
-     * @attribute
-     * @type {FogType}
-     */
-    fog = FogType.NONE;
-
-    /**
-     * @attribute
-     */
-    fogColor = new Color(1, 1, 1, 1);
-
-    /**
-     * @attribute
-     */
-    fogStart = 0;
-
-    /**
-     * @attribute
-     */
-    fogEnd = 100;
-
-    /**
-     * @attribute
-     */
-    fogDensity = 0.01;
 }
 
 /** @interface */
@@ -332,8 +296,6 @@ class CameraFrame extends Script {
 
     options = new CameraFrameOptions();
 
-    renderingParams = new RenderingParams();
-
     initialize() {
 
         this.updateOptions();
@@ -354,8 +316,6 @@ class CameraFrame extends Script {
 
     createRenderPass() {
         const cameraComponent = this.entity.camera;
-        cameraComponent.rendering = this.renderingParams;
-
         this.renderPassCamera = new RenderPassCameraFrame(this.app, cameraComponent, this.options);
         cameraComponent.renderPasses = [this.renderPassCamera];
     }
@@ -388,21 +348,12 @@ class CameraFrame extends Script {
     postUpdate(dt) {
 
         const cameraComponent = this.entity.camera;
-        const { options, renderPassCamera, renderingParams, rendering, bloom, grading, vignette, fringing, taa, ssao } = this;
+        const { options, renderPassCamera, rendering, bloom, grading, vignette, fringing, taa, ssao } = this;
 
         // options that can cause the passes to be re-created
         this.updateOptions();
         renderPassCamera.update(options);
 
-        // renderingParams
-        renderingParams.fog = rendering.fog;
-        if (renderingParams.fog !== FOG_NONE) {
-            renderingParams.fogColor.copy(rendering.fogColor);
-            renderingParams.fogStart = rendering.fogStart;
-            renderingParams.fogEnd = rendering.fogEnd;
-            renderingParams.fogDensity = rendering.fogDensity;
-        }
-
         // update parameters of individual render passes
         const { composePass, bloomPass, ssaoPass } = renderPassCamera;
 

examples/src/examples/animation/locomotion.example.mjs

@@ -85,13 +85,13 @@ assetListLoader.load(() => {
     app.scene.skyboxMip = 2;
     app.scene.skyboxIntensity = 0.7;
     app.scene.envAtlas = assets.helipad.resource;
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
 
     // Create an Entity with a camera component
     const cameraEntity = new pc.Entity();
     cameraEntity.name = 'Camera';
     cameraEntity.addComponent('camera', {
-        clearColor: new pc.Color(0.1, 0.15, 0.2)
+        clearColor: new pc.Color(0.1, 0.15, 0.2),
+        toneMapping: pc.TONEMAP_ACES
     });
 
     cameraEntity.translateLocal(0.5, 3, 8);

examples/src/examples/compute/histogram.example.mjs

@@ -57,8 +57,6 @@ app.on('destroy', () => {
 
 const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
 assetListLoader.load(() => {
-    // set up some general scene rendering properties
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
 
     // setup skydome
     app.scene.skyboxMip = 2;
@@ -67,7 +65,9 @@ assetListLoader.load(() => {
 
     // create camera entity
     const camera = new pc.Entity('camera');
-    camera.addComponent('camera');
+    camera.addComponent('camera', {
+        toneMapping: pc.TONEMAP_ACES
+    });
     app.root.addChild(camera);
     camera.setPosition(0, 0, 5);
 

examples/src/examples/compute/particles.example.mjs

@@ -51,14 +51,15 @@ app.on('destroy', () => {
 const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
 assetListLoader.load(() => {
     // set up some general scene rendering properties
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
     app.scene.skyboxMip = 2;
     app.scene.skyboxIntensity = 0.2;
     app.scene.envAtlas = assets.helipad.resource;
 
     // create camera entity
     const cameraEntity = new pc.Entity('camera');
-    cameraEntity.addComponent('camera');
+    cameraEntity.addComponent('camera', {
+        toneMapping: pc.TONEMAP_ACES
+    });
     app.root.addChild(cameraEntity);
     cameraEntity.setPosition(-150, -60, 190);
 

examples/src/examples/compute/texture-gen.example.mjs

@@ -54,8 +54,6 @@ app.on('destroy', () => {
 
 const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets);
 assetListLoader.load(() => {
-    // set up some general scene rendering properties
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
 
     // setup skydome
     app.scene.skyboxMip = 1;
@@ -65,7 +63,8 @@ assetListLoader.load(() => {
     // create camera entity
     const camera = new pc.Entity('camera');
     camera.addComponent('camera', {
-        clearColor: new pc.Color(0.5, 0.6, 0.9)
+        clearColor: new pc.Color(0.5, 0.6, 0.9),
+        toneMapping: pc.TONEMAP_ACES
     });
     app.root.addChild(camera);
     camera.setPosition(0.6, 0, 5);

examples/src/examples/graphics/area-lights.example.mjs

@@ -183,9 +183,6 @@ assetListLoader.load(() => {
     const luts = assets.luts.resource;
     app.setAreaLightLuts(luts.LTC_MAT_1, luts.LTC_MAT_2);
 
-    // set up some general scene rendering properties
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
-
     // setup skydome
     app.scene.skyboxMip = 1; // use top mipmap level of cubemap (full resolution)
     app.scene.skyboxIntensity = 0.4; // make it darker
@@ -204,7 +201,8 @@ assetListLoader.load(() => {
     camera.addComponent('camera', {
         clearColor: new pc.Color(0.2, 0.2, 0.2),
         fov: 60,
-        farClip: 100000
+        farClip: 100000,
+        toneMapping: pc.TONEMAP_ACES
     });
     app.root.addChild(camera);
     camera.setLocalPosition(0, 2.5, 12);

examples/src/examples/graphics/asset-viewer.example.mjs

@@ -165,7 +165,9 @@ assetListLoader.load(() => {
 
     // Create an Entity with a camera component
     const camera = new pc.Entity();
-    camera.addComponent('camera', {});
+    camera.addComponent('camera', {
+        toneMapping: pc.TONEMAP_NEUTRAL
+    });
     camera.setLocalPosition(0, 55, 160);
 
     camera.camera.requestSceneColorMap(true);
@@ -195,7 +197,6 @@ assetListLoader.load(() => {
     app.root.addChild(directionalLight);
 
     app.scene.envAtlas = assets.helipad.resource;
-    app.scene.rendering.toneMapping = pc.TONEMAP_NEUTRAL;
     app.scene.skyboxMip = 1;
     app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, 70, 0);
     app.scene.skyboxIntensity = 1.5;

examples/src/examples/graphics/clustered-lighting.example.mjs

@@ -53,10 +53,6 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
 assetListLoader.load(() => {
     app.start();
 
-    // if the device renders in HDR mode, disable tone mapping to output HDR values without any processing
-    app.scene.rendering.toneMapping = device.isHdr ? pc.TONEMAP_NONE : pc.TONEMAP_ACES;
-    app.scene.rendering.gammaCorrection = pc.GAMMA_SRGB;
-
     /** @type {Array<pc.Entity>} */
     const pointLightList = [];
     /** @type {Array<pc.Entity>} */
@@ -196,7 +192,11 @@ assetListLoader.load(() => {
     camera.addComponent('camera', {
         clearColor: new pc.Color(0.05, 0.05, 0.05),
         farClip: 500,
-        nearClip: 0.1
+        nearClip: 0.1,
+
+        // if the device renders in HDR mode, disable tone mapping to output HDR values without any processing
+        toneMapping: device.isHdr ? pc.TONEMAP_NONE : pc.TONEMAP_ACES,
+        gammaCorrection: pc.GAMMA_SRGB
     });
     camera.setLocalPosition(140, 140, 140);
     camera.lookAt(new pc.Vec3(0, 40, 0));

examples/src/examples/graphics/clustered-omni-shadows.example.mjs

@@ -68,9 +68,6 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
 assetListLoader.load(() => {
     app.start();
 
-    // set up some general scene rendering properties
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
-
     data.set('settings', {
         shadowAtlasResolution: 1300, // shadow map resolution storing all shadows
         shadowType: pc.SHADOW_PCF3, // shadow filter type
@@ -225,7 +222,8 @@ assetListLoader.load(() => {
     camera.addComponent('camera', {
         fov: 80,
         clearColor: new pc.Color(0.1, 0.1, 0.1),
-        farClip: 1500
+        farClip: 1500,
+        toneMapping: pc.TONEMAP_ACES
     });
 
     // and position it in the world

examples/src/examples/graphics/contact-hardening-shadows.example.mjs

@@ -78,7 +78,6 @@ const assetListLoader = new pc.AssetListLoader(Object.values(assets), app.assets
 assetListLoader.load(() => {
     app.start();
 
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
     app.scene.skyboxMip = 1;
     app.scene.ambientLight.set(0, 0, 0);
     app.scene.ambientLuminance = 0;
@@ -235,7 +234,8 @@ assetListLoader.load(() => {
     // Create an Entity with a camera component
     const camera = new pc.Entity();
     camera.addComponent('camera', {
-        clearColor: new pc.Color(0.4, 0.45, 0.5)
+        clearColor: new pc.Color(0.4, 0.45, 0.5),
+        toneMapping: pc.TONEMAP_ACES
     });
     camera.setLocalPosition(0, 5, 11);
 

examples/src/examples/graphics/dispersion.example.mjs

@@ -59,7 +59,6 @@ assetListLoader.load(() => {
 
     // set skybox
     app.scene.envAtlas = assets.helipad.resource;
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
     app.scene.skyboxMip = 1;
 
     // get the instance of the cube it set up with render component and add it to scene
@@ -71,7 +70,8 @@ assetListLoader.load(() => {
     camera.addComponent('camera', {
         clearColor: new pc.Color(0.2, 0.2, 0.2),
         nearClip: 0.01,
-        farClip: 2
+        farClip: 2,
+        toneMapping: pc.TONEMAP_ACES
     });
 
     // the color grab pass is needed

examples/src/examples/graphics/grab-pass.example.mjs

@@ -56,8 +56,6 @@ assetListLoader.load(() => {
     app.scene.exposure = 2;
     app.scene.envAtlas = assets.helipad.resource;
 
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
-
     // Depth layer is where the framebuffer is copied to a texture to be used in the following layers.
     // Move the depth layer to take place after World and Skydome layers, to capture both of them.
     const depthLayer = app.scene.layers.getLayerById(pc.LAYERID_DEPTH);
@@ -115,7 +113,8 @@ assetListLoader.load(() => {
     // Create the camera, which renders entities
     const camera = new pc.Entity('SceneCamera');
     camera.addComponent('camera', {
-        clearColor: new pc.Color(0.2, 0.2, 0.2)
+        clearColor: new pc.Color(0.2, 0.2, 0.2),
+        toneMapping: pc.TONEMAP_ACES
     });
     app.root.addChild(camera);
     camera.setLocalPosition(0, 10, 20);

examples/src/examples/graphics/ground-fog.example.mjs

@@ -66,7 +66,6 @@ assetListLoader.load(() => {
     app.scene.skyboxMip = 3;
     app.scene.envAtlas = assets.helipad.resource;
     app.scene.skyboxRotation = new pc.Quat().setFromEulerAngles(0, -70, 0);
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
 
     // disable skydome rendering
     const skyLayer = app.scene.layers.getLayerById(pc.LAYERID_SKYBOX);
@@ -84,7 +83,8 @@ assetListLoader.load(() => {
     const camera = new pc.Entity();
     camera.addComponent('camera', {
         clearColor: new pc.Color(150 / 255, 213 / 255, 63 / 255),
-        farClip: 1000
+        farClip: 1000,
+        toneMapping: pc.TONEMAP_ACES
     });
 
     // and position it in the world

examples/src/examples/graphics/instancing-basic.example.mjs

@@ -52,14 +52,13 @@ assetListLoader.load(() => {
     app.scene.exposure = 0.3;
     app.scene.envAtlas = assets.helipad.resource;
 
-    // set up some general scene rendering properties
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
-
     app.scene.ambientLight = new pc.Color(0.1, 0.1, 0.1);
 
     // Create an Entity with a camera component
     const camera = new pc.Entity();
-    camera.addComponent('camera', {});
+    camera.addComponent('camera', {
+        toneMapping: pc.TONEMAP_ACES
+    });
     app.root.addChild(camera);
 
     // Move the camera back to see the cubes

examples/src/examples/graphics/instancing-custom.example.mjs

@@ -53,12 +53,13 @@ assetListLoader.load(() => {
     app.scene.envAtlas = assets.helipad.resource;
 
     // set up some general scene rendering properties
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
     app.scene.ambientLight = new pc.Color(0.1, 0.1, 0.1);
 
     // Create an Entity with a camera component
     const camera = new pc.Entity();
-    camera.addComponent('camera', {});
+    camera.addComponent('camera', {
+        toneMapping: pc.TONEMAP_ACES
+    });
     app.root.addChild(camera);
 
     // create static vertex buffer containing the instancing data

examples/src/examples/graphics/instancing-glb.example.mjs

@@ -68,7 +68,8 @@ assetListLoader.load(() => {
     const camera = new pc.Entity();
     camera.addComponent('camera', {
         clearColor: new pc.Color(0.2, 0.1, 0.1),
-        farClip: 100
+        farClip: 100,
+        toneMapping: pc.TONEMAP_ACES
     });
     camera.translate(25, 15, 25);
 
@@ -89,7 +90,6 @@ assetListLoader.load(() => {
 
     // set skybox
     app.scene.envAtlas = assets.helipad.resource;
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
     app.scene.skyboxMip = 1;
 });
 

examples/src/examples/graphics/instancing-gooch.example.mjs

@@ -78,12 +78,11 @@ assetListLoader.load(() => {
     app.scene.skyboxMip = 2;
     app.scene.envAtlas = assets.helipad.resource;
 
-    // set up some general scene rendering properties
-    app.scene.rendering.toneMapping = pc.TONEMAP_ACES;
-
     // Create an Entity with a camera component
     const camera = new pc.Entity();
-    camera.addComponent('camera', {});
+    camera.addComponent('camera', {
+        toneMapping: pc.TONEMAP_ACES
+    });
     app.root.addChild(camera);
 
     // number of instanced trees to render