Update to HDR rendering used by the RenderPassCameraFrame (#6687)

* Update to HDR rendering used by the RenderPassCameraFrame

* lint

---------

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>

examples/src/examples/graphics/ambient-occlusion.example.mjs

@@ -70,7 +70,7 @@ assetListLoader.load(() => {
     // setup skydome
     app.scene.envAtlas = assets.helipad.resource;
     app.scene.skyboxMip = 2;
-    app.scene.exposure = 1.5;
+    app.scene.exposure = 5;
 
     // get the instance of the laboratory
     const laboratoryEntity = assets.laboratory.resource.instantiateRenderEntity({
@@ -130,7 +130,7 @@ assetListLoader.load(() => {
     const light = new pc.Entity();
     light.addComponent('light', {
         type: 'directional',
-        intensity: 0.7,
+        intensity: 1,
         castShadows: true,
         shadowResolution: 4096,
         shadowBias: 0.4,
@@ -202,11 +202,6 @@ assetListLoader.load(() => {
         // and set up these rendering passes to be used by the camera, instead of its default rendering
         cameraEntity.camera.renderPasses = [renderPassCamera];
 
-        // the render passes render in HDR format, and so disable output tone mapping and gamma correction,
-        // as that is applied in the final compose pass
-        app.scene.toneMapping = pc.TONEMAP_LINEAR;
-        app.scene.gammaCorrection = pc.GAMMA_NONE;
-
         // jitter the camera when TAA is enabled
         cameraEntity.camera.jitter = currentOptions.taaEnabled ? 1 : 0;
     };

examples/src/examples/graphics/dithered-transparency.example.mjs

@@ -67,8 +67,7 @@ assetListLoader.load(() => {
     // setup skydome
     app.scene.envAtlas = assets.envAtlas.resource;
     app.scene.skyboxMip = 2;
-    app.scene.exposure = 1;
-    app.scene.toneMapping = pc.TONEMAP_ACES;
+    app.scene.exposure = 2.5;
 
     /**
      * Helper function to create a primitive with shape type, position, scale, color and layer.
@@ -166,6 +165,7 @@ assetListLoader.load(() => {
         camera: cameraEntity.camera, // camera used to render those passes
         samples: 0, // number of samples for multi-sampling
         sceneColorMap: true,
+        bloomEnabled: false,
 
         // enable the pre-pass to generate the depth buffer, which is needed by the TAA
         prepassEnabled: true,
@@ -183,20 +183,14 @@ assetListLoader.load(() => {
         // Use a render pass camera frame, which is a render pass that implements typical rendering of a camera.
         // Internally this sets up additional passes it needs, based on the options passed to it.
         const renderPassCamera = new pc.RenderPassCameraFrame(app, currentOptions);
-        renderPassCamera.bloomEnabled = false;
 
         const composePass = renderPassCamera.composePass;
-        composePass.toneMapping = data.get('data.scene.tonemapping');
+        composePass.toneMapping = pc.TONEMAP_ACES;
         composePass.sharpness = currentOptions.taaEnabled ? 1 : 0;
 
         // and set up these rendering passes to be used by the camera, instead of its default rendering
         cameraEntity.camera.renderPasses = [renderPassCamera];
 
-        // the render passes render in HDR format, and so disable output tone mapping and gamma correction,
-        // as that is applied in the final compose pass
-        app.scene.toneMapping = pc.TONEMAP_LINEAR;
-        app.scene.gammaCorrection = pc.GAMMA_NONE;
-
         // jitter the camera when TAA is enabled
         cameraEntity.camera.jitter = currentOptions.taaEnabled ? 1 : 0;
     };

examples/src/examples/graphics/post-processing.example.mjs

@@ -81,11 +81,6 @@ assetListLoader.load(() => {
     // disable skydome rendering itself, we don't need it as we use camera clear color
     app.scene.layers.getLayerByName('Skybox').enabled = false;
 
-    // the render passes render in HDR format, and so disable output tone mapping and gamma correction,
-    // as that is applied in the final compose pass
-    app.scene.toneMapping = pc.TONEMAP_LINEAR;
-    app.scene.gammaCorrection = pc.GAMMA_NONE;
-
     // create an instance of the platform and add it to the scene
     const platformEntity = assets.platform.resource.instantiateRenderEntity();
     platformEntity.setLocalScale(10, 10, 10);
@@ -107,11 +102,12 @@ assetListLoader.load(() => {
     app.root.addChild(mosquitoEntity);
 
     // helper function to create a box primitive
-    const createBox = (x, y, z, r, g, b, name) => {
+    const createBox = (x, y, z, r, g, b, emissive, name) => {
         // create material of random color
         const material = new pc.StandardMaterial();
         material.diffuse = pc.Color.BLACK;
         material.emissive = new pc.Color(r, g, b);
+        material.emissiveIntensity = emissive;
         material.update();
 
         // create primitive
@@ -130,9 +126,9 @@ assetListLoader.load(() => {
 
     // create 3 emissive boxes
     const boxes = [
-        createBox(100, 20, 0, 200, 0, 0, 'boxRed'),
-        createBox(-50, 20, 100, 0, 80, 0, 'boxGreen'),
-        createBox(90, 20, -80, 80, 80, 20, 'boxYellow')
+        createBox(100, 20, 0, 1, 0, 0, 60, 'boxRed'),
+        createBox(-50, 20, 100, 0, 1, 0, 60, 'boxGreen'),
+        createBox(90, 20, -80, 1, 1, 0.25, 50, 'boxYellow')
     ];
 
     // Create an Entity with a camera component
@@ -284,7 +280,6 @@ assetListLoader.load(() => {
         cameraEntity.camera.jitter = taaEnabled ? data.get('data.taa.jitter') : 0;
 
         // bloom
-        // renderPassCamera.bloomEnabled = data.get('data.bloom.enabled');
         if (bloomEnabled) {
             renderPassCamera.lastMipLevel = data.get('data.bloom.lastMipLevel');
             composePass.bloomIntensity = pc.math.lerp(0, 0.1, data.get('data.bloom.intensity') / 100);
@@ -324,7 +319,7 @@ assetListLoader.load(() => {
         },
         bloom: {
             enabled: currentOptions.bloomEnabled,
-            intensity: 20,
+            intensity: 10,
             lastMipLevel: 1
         },
         grading: {

examples/src/examples/graphics/taa.example.mjs

@@ -62,12 +62,7 @@ assetListLoader.load(() => {
     // setup skydome with low intensity
     app.scene.envAtlas = assets.envatlas.resource;
     app.scene.skyboxMip = 0;
-    app.scene.exposure = 1.0;
-
-    // the render passes render in HDR format, and so disable output tone mapping and gamma correction,
-    // as that is applied in the final compose pass
-    app.scene.toneMapping = pc.TONEMAP_LINEAR;
-    app.scene.gammaCorrection = pc.GAMMA_NONE;
+    app.scene.exposure = 1.6;
 
     // create an instance of the house and add it to the scene
     const houseEntity = assets.house.resource.instantiateRenderEntity();
@@ -104,7 +99,7 @@ assetListLoader.load(() => {
     light.addComponent('light', {
         type: 'directional',
         color: lightColor,
-        intensity: 0.2,
+        intensity: 1,
         range: 700,
         shadowResolution: 4096,
         shadowDistance: 600,

src/extras/render-passes/render-pass-camera-frame.js

@@ -1,4 +1,4 @@
-import { LAYERID_SKYBOX, LAYERID_IMMEDIATE } from '../../scene/constants.js';
+import { LAYERID_SKYBOX, LAYERID_IMMEDIATE, SHADERPASS_FORWARD_HDR } from '../../scene/constants.js';
 import {
     ADDRESS_CLAMP_TO_EDGE,
     FILTER_LINEAR,
@@ -149,6 +149,9 @@ class RenderPassCameraFrame extends RenderPass {
 
         this.hdrFormat = device.getRenderableHdrFormat() || PIXELFORMAT_RGBA8;
 
+        // camera renders in HDR mode (linear output, no tonemapping)
+        cameraComponent.setShaderPass(SHADERPASS_FORWARD_HDR);
+
         // create a render target to render the scene into
         this.sceneTexture = new Texture(device, {
             name: 'SceneColor',

src/scene/shader-lib/programs/shader-generator.js

@@ -19,22 +19,22 @@ class ShaderGenerator {
 
     static fogCode(value, chunks = shaderChunks) {
         if (value === 'linear') {
-            return chunks.fogLinearPS ? chunks.fogLinearPS : shaderChunks.fogLinearPS;
+            return chunks.fogLinearPS ?? shaderChunks.fogLinearPS;
         } else if (value === 'exp') {
-            return chunks.fogExpPS ? chunks.fogExpPS : shaderChunks.fogExpPS;
+            return chunks.fogExpPS ?? shaderChunks.fogExpPS;
         } else if (value === 'exp2') {
-            return chunks.fogExp2PS ? chunks.fogExp2PS : shaderChunks.fogExp2PS;
+            return chunks.fogExp2PS ?? shaderChunks.fogExp2PS;
         }
         return chunks.fogNonePS ? chunks.fogNonePS : shaderChunks.fogNonePS;
     }
 
     static gammaCode(value, chunks = shaderChunks) {
         if (value === GAMMA_SRGB || value === GAMMA_SRGBFAST) {
-            return chunks.gamma2_2PS ? chunks.gamma2_2PS : shaderChunks.gamma2_2PS;
+            return chunks.gamma2_2PS ?? shaderChunks.gamma2_2PS;
         } else if (value === GAMMA_SRGBHDR) {
-            return "#define HDR\n" + (chunks.gamma2_2PS ? chunks.gamma2_2PS : shaderChunks.gamma2_2PS);
+            return "#define HDR\n" + (chunks.gamma2_2PS ?? shaderChunks.gamma2_2PS);
         }
-        return chunks.gamma1_0PS ? chunks.gamma1_0PS : shaderChunks.gamma1_0PS;
+        return chunks.gamma1_0PS ?? shaderChunks.gamma1_0PS;
     }
 
     static tonemapCode(value, chunks = shaderChunks) {

src/scene/skybox/sky-mesh.js

@@ -1,7 +1,7 @@
 import { CULLFACE_FRONT } from '../../platform/graphics/constants.js';
 import { ShaderProcessorOptions } from '../../platform/graphics/shader-processor-options.js';
 
-import { GAMMA_NONE, GAMMA_SRGBHDR, LAYERID_SKYBOX, SHADER_FORWARDHDR, TONEMAP_LINEAR } from '../constants.js';
+import { GAMMA_NONE, LAYERID_SKYBOX, SHADER_FORWARDHDR, TONEMAP_LINEAR } from '../constants.js';
 import { Material } from '../materials/material.js';
 import { MeshInstance } from '../mesh-instance.js';
 import { getProgramLibrary } from '../shader-lib/get-program-library.js';
@@ -38,7 +38,7 @@ class SkyMesh {
             const options = {
                 pass: pass,
                 encoding: texture.encoding,
-                gamma: (pass === SHADER_FORWARDHDR ? (scene.gammaCorrection ? GAMMA_SRGBHDR : GAMMA_NONE) : scene.gammaCorrection),
+                gamma: (pass === SHADER_FORWARDHDR ? GAMMA_NONE : scene.gammaCorrection),
                 toneMapping: (pass === SHADER_FORWARDHDR ? TONEMAP_LINEAR : scene.toneMapping),
                 skymesh: type
             };