Render targets can use sRGB color buffer (playcanvas#6752)

mvaligursky · Martin Valigursky · willeastcott · web-flow · commit 68f5330d9f17 · 2024-07-02T10:12:46.000+01:00
* Support for compressed sRGB formats

* lint

* Update src/framework/parsers/glb-parser.js

Co-authored-by: Will Eastcott &lt;will@playcanvas.com&gt;

* feedback

* clarified docs

* updates

* Render targets can use sRGB color buffer

* cleanup

* Update src/platform/graphics/render-target.js

Co-authored-by: Will Eastcott &lt;will@playcanvas.com&gt;

---------

Co-authored-by: Martin Valigursky &lt;mvaligursky@snapchat.com&gt;
Co-authored-by: Will Eastcott &lt;will@playcanvas.com&gt;
diff --git a/examples/src/examples/graphics/reflection-planar.shader.frag b/examples/src/examples/graphics/reflection-planar.shader.frag
@@ -4,12 +4,18 @@ uniform vec4 uScreenSize;
 // reflection texture
 uniform sampler2D uDiffuseMap;
 
+vec3 gammaCorrectOutput(vec3 color) {
+    return pow(color + 0.0000001, vec3(1.0 / 2.2));
+}
+
 void main(void)
 {
     // sample reflection texture
     vec2 coord = gl_FragCoord.xy * uScreenSize.zw;
     coord.y = 1.0 - coord.y;
     vec4 reflection = texture2D(uDiffuseMap, coord);
 
-    gl_FragColor = vec4(reflection.xyz * 0.7, 1);
+    vec3 linearColor = reflection.xyz * 0.4;
+    gl_FragColor.rgb = gammaCorrectOutput(linearColor);
+    gl_FragColor.a = 1.0;
 }
diff --git a/examples/src/examples/graphics/render-to-texture.example.mjs b/examples/src/examples/graphics/render-to-texture.example.mjs
@@ -142,7 +142,7 @@ assetListLoader.load(() => {
     const texture = new pc.Texture(app.graphicsDevice, {
         width: 512,
         height: 256,
-        format: pc.PIXELFORMAT_RGB8,
+        format: pc.PIXELFORMAT_SRGBA8,
         mipmaps: true,
         minFilter: pc.FILTER_LINEAR,
         magFilter: pc.FILTER_LINEAR,
diff --git a/scripts/utils/cubemap-renderer.js b/scripts/utils/cubemap-renderer.js
@@ -49,7 +49,7 @@ CubemapRenderer.prototype.initialize = function () {
         name: this.entity.name + ':CubemapRenderer-' + resolution,
         width: resolution,
         height: resolution,
-        format: pc.PIXELFORMAT_RGBA8,
+        format: pc.PIXELFORMAT_SRGBA8,
         cubemap: true,
         mipmaps: this.mipmaps,
         minFilter: pc.FILTER_LINEAR_MIPMAP_LINEAR,
diff --git a/scripts/utils/planar-renderer.js b/scripts/utils/planar-renderer.js
@@ -102,7 +102,7 @@ PlanarRenderer.prototype.updateRenderTarget = function () {
             name: this.entity.name + ':PlanarRenderer-',
             width: width,
             height: height,
-            format: pc.PIXELFORMAT_RGBA8,
+            format: pc.PIXELFORMAT_SRGBA8,
             mipmaps: this.mipmaps,
             addressU: pc.ADDRESS_CLAMP_TO_EDGE,
             addressV: pc.ADDRESS_CLAMP_TO_EDGE,
diff --git a/src/framework/graphics/render-pass-picker.js b/src/framework/graphics/render-pass-picker.js
@@ -95,7 +95,7 @@ class RenderPassPicker extends RenderPass {
                             renderer.setupViewUniformBuffers(this.viewBindGroups, renderer.viewUniformFormat, renderer.viewBindGroupFormat, 1);
                         }
 
-                        renderer.renderForward(camera.camera, tempMeshInstances, lights, SHADER_PICK, (meshInstance) => {
+                        renderer.renderForward(camera.camera, renderTarget, tempMeshInstances, lights, SHADER_PICK, (meshInstance) => {
                             device.setBlendState(BlendState.NOBLEND);
                         });
 
diff --git a/src/framework/lightmapper/lightmapper.js b/src/framework/lightmapper/lightmapper.js
@@ -1126,7 +1126,7 @@ class Lightmapper {
                             this.renderer._forwardTime = 0;
                             this.renderer._shadowMapTime = 0;
 
-                            this.renderer.renderForward(this.camera, rcv, lightArray, SHADER_FORWARD);
+                            this.renderer.renderForward(this.camera, tempRT, rcv, lightArray, SHADER_FORWARD);
 
                             device.updateEnd();
                         }
diff --git a/src/platform/graphics/constants.js b/src/platform/graphics/constants.js
@@ -1116,6 +1116,10 @@ export const isCompressedPixelFormat = (format) => {
     return pixelFormatInfo.get(format)?.blockSize !== undefined;
 };
 
+export const isSrgbPixelFormat = (format) => {
+    return pixelFormatInfo.get(format)?.srgb === true;
+};
+
 export const isIntegerPixelFormat = (format) => {
     return pixelFormatInfo.get(format)?.isInt === true;
 };
diff --git a/src/platform/graphics/render-target.js b/src/platform/graphics/render-target.js
@@ -1,6 +1,6 @@
 import { Debug } from '../../core/debug.js';
 import { TRACEID_RENDER_TARGET_ALLOC } from '../../core/constants.js';
-import { PIXELFORMAT_DEPTH, PIXELFORMAT_DEPTHSTENCIL } from './constants.js';
+import { PIXELFORMAT_DEPTH, PIXELFORMAT_DEPTHSTENCIL, isSrgbPixelFormat } from './constants.js';
 import { DebugGraphics } from './debug-graphics.js';
 import { GraphicsDevice } from './graphics-device.js';
 
@@ -482,6 +482,16 @@ class RenderTarget {
     get height() {
         return this._colorBuffer?.height || this._depthBuffer?.height || this._device.height;
     }
+
+    /**
+     * Gets whether the first color buffer format is sRGB.
+     *
+     * @type {boolean}
+     * @ignore
+     */
+    get srgb() {
+        return this.colorBuffer ? isSrgbPixelFormat(this.colorBuffer.format) : false;
+    }
 }
 
 export { RenderTarget };
diff --git a/src/scene/gsplat/gsplat-compressed-material.js b/src/scene/gsplat/gsplat-compressed-material.js
@@ -369,7 +369,7 @@ const createGSplatCompressedMaterial = (options = {}) => {
 
         const programOptions = {
             pass: pass,
-            gamma: renderParams.gammaCorrection,
+            gamma: renderParams.shaderOutputGamma,
             toneMapping: renderParams.toneMapping,
             vertex: options.vertex ?? splatMainVS,
             fragment: options.fragment ?? splatMainFS,
diff --git a/src/scene/gsplat/gsplat-material.js b/src/scene/gsplat/gsplat-material.js
@@ -71,7 +71,7 @@ const createGSplatMaterial = (options = {}) => {
 
         const programOptions = {
             pass: pass,
-            gamma: renderParams.gammaCorrection,
+            gamma: renderParams.shaderOutputGamma,
             toneMapping: renderParams.toneMapping,
             vertex: options.vertex ?? splatMainVS,
             fragment: options.fragment ?? splatMainFS,
diff --git a/src/scene/materials/lit-material-options-builder.js b/src/scene/materials/lit-material-options-builder.js
@@ -91,7 +91,7 @@ class LitMaterialOptionsBuilder {
 
     static updateEnvOptions(litOptions, material, scene, renderParams) {
         litOptions.fog = material.useFog ? scene.fog : 'none';
-        litOptions.gamma = renderParams.gammaCorrection;
+        litOptions.gamma = renderParams.shaderOutputGamma;
         litOptions.toneMap = material.useTonemap ? renderParams.toneMapping : TONEMAP_NONE;
 
         // source of reflections
diff --git a/src/scene/materials/standard-material-options-builder.js b/src/scene/materials/standard-material-options-builder.js
@@ -288,7 +288,7 @@ class StandardMaterialOptionsBuilder {
 
     _updateEnvOptions(options, stdMat, scene, renderParams) {
         options.litOptions.fog = stdMat.useFog ? scene.fog : 'none';
-        options.litOptions.gamma = renderParams.gammaCorrection;
+        options.litOptions.gamma = renderParams.shaderOutputGamma;
         options.litOptions.toneMap = stdMat.useTonemap ? renderParams.toneMapping : TONEMAP_NONE;
 
         let usingSceneEnv = false;
diff --git a/src/scene/particle-system/particle-emitter.js b/src/scene/particle-system/particle-emitter.js
@@ -31,10 +31,12 @@ import { ShaderProcessorOptions } from '../../platform/graphics/shader-processor
 import {
     BLEND_NORMAL,
     EMITTERSHAPE_BOX,
+    GAMMA_NONE,
     PARTICLEMODE_GPU,
     PARTICLEORIENTATION_SCREEN, PARTICLEORIENTATION_WORLD,
     PARTICLESORT_NONE,
-    SHADER_FORWARD
+    SHADER_FORWARD,
+    TONEMAP_LINEAR
 } from '../constants.js';
 import { Mesh } from '../mesh.js';
 import { MeshInstance } from '../mesh-instance.js';
@@ -850,8 +852,8 @@ class ParticleEmitter {
                 alignToMotion: this.emitter.alignToMotion,
                 soft: this.emitter.depthSoftening,
                 mesh: this.emitter.useMesh,
-                gamma: renderParams?.gammaCorrection ?? 0,
-                toneMap: renderParams?.toneMapping ?? 0,
+                gamma: renderParams?.shaderOutputGamma ?? GAMMA_NONE,
+                toneMap: renderParams?.toneMapping ?? TONEMAP_LINEAR,
                 fog: (this.emitter.scene && !this.emitter.noFog) ? this.emitter.scene.fog : 'none',
                 wrap: this.emitter.wrap && this.emitter.wrapBounds,
                 localSpace: this.emitter.localSpace,
diff --git a/src/scene/renderer/forward-renderer.js b/src/scene/renderer/forward-renderer.js
@@ -461,11 +461,14 @@ class ForwardRenderer extends Renderer {
     }
 
     // execute first pass over draw calls, in order to update materials / shaders
-    renderForwardPrepareMaterials(camera, drawCalls, sortedLights, layer, pass) {
+    renderForwardPrepareMaterials(camera, renderTarget, drawCalls, sortedLights, layer, pass) {
 
         // rendering params from the scene, or overridden by the camera
         const renderParams = camera.renderingParams ?? this.scene.rendering;
 
+        // output gamma correction is determined by the render target
+        renderParams.srgbRenderTarget = renderTarget?.srgb ?? false;
+
         const addCall = (drawCall, shaderInstance, isNewMaterial, lightMaskChanged) => {
             _drawCallList.drawCalls.push(drawCall);
             _drawCallList.shaderInstances.push(shaderInstance);
@@ -641,14 +644,14 @@ class ForwardRenderer extends Renderer {
         }
     }
 
-    renderForward(camera, allDrawCalls, sortedLights, pass, drawCallback, layer, flipFaces) {
+    renderForward(camera, renderTarget, allDrawCalls, sortedLights, pass, drawCallback, layer, flipFaces) {
 
         // #if _PROFILER
         const forwardStartTime = now();
         // #endif
 
         // run first pass over draw calls and handle material / shader updates
-        const preparedCalls = this.renderForwardPrepareMaterials(camera, allDrawCalls, sortedLights, layer, pass);
+        const preparedCalls = this.renderForwardPrepareMaterials(camera, renderTarget, allDrawCalls, sortedLights, layer, pass);
 
         // render mesh instances
         this.renderForwardInternal(camera, preparedCalls, sortedLights, pass, drawCallback, flipFaces);
@@ -760,6 +763,7 @@ class ForwardRenderer extends Renderer {
 
         const forwardDrawCalls = this._forwardDrawCalls;
         this.renderForward(camera,
+                           renderTarget,
                            visible,
                            splitLights,
                            shaderPass,
diff --git a/src/scene/renderer/rendering-params.js b/src/scene/renderer/rendering-params.js
@@ -1,5 +1,5 @@
 import { hashCode } from '../../core/hash.js';
-import { GAMMA_SRGB, TONEMAP_LINEAR } from '../constants.js';
+import { GAMMA_NONE, GAMMA_SRGB, TONEMAP_LINEAR } from '../constants.js';
 
 /**
  * Rendering parameters, allow configuration of the rendering parameters.
@@ -13,6 +13,9 @@ class RenderingParams {
     /** @private */
     _toneMapping = TONEMAP_LINEAR;
 
+    /** @private */
+    _srgbRenderTarget = false;
+
     /**
      * The hash of the rendering parameters, or undefined if the hash has not been computed yet.
      *
@@ -29,7 +32,7 @@ class RenderingParams {
      */
     get hash() {
         if (this._hash === undefined) {
-            const key = `${this.gammaCorrection}_${this.toneMapping}`;
+            const key = `${this.gammaCorrection}_${this.toneMapping}_${this.srgbRenderTarget}`;
             this._hash = hashCode(key);
         }
         return this._hash;
@@ -84,6 +87,31 @@ class RenderingParams {
     get toneMapping() {
         return this._toneMapping;
     }
+
+    set srgbRenderTarget(value) {
+        if (this._srgbRenderTarget !== value) {
+            this._srgbRenderTarget = value;
+            this.markDirty();
+        }
+    }
+
+    get srgbRenderTarget() {
+        return this._srgbRenderTarget;
+    }
+
+    /**
+     * Returns {@link GAMMA_SRGB} if the shader code needs to output gamma corrected color, otherwise
+     * returns {@link GAMMA_NONE}.
+     *
+     * @type {number}
+     * @ignore
+     */
+    get shaderOutputGamma() {
+        // if gamma rendering is enabled, but the render target does not have sRGB format,
+        // the shader needs to do the linear -> gamma conversion
+        const gammaOutput = this._gammaCorrection === GAMMA_SRGB && !this._srgbRenderTarget;
+        return gammaOutput ? GAMMA_SRGB : GAMMA_NONE;
+    }
 }
 
 export { RenderingParams };
diff --git a/src/scene/skybox/sky-mesh.js b/src/scene/skybox/sky-mesh.js
@@ -38,7 +38,7 @@ class SkyMesh {
             const options = {
                 pass: pass,
                 encoding: texture.encoding,
-                gamma: renderParams.gammaCorrection,
+                gamma: renderParams.shaderOutputGamma,
                 toneMapping: renderParams.toneMapping,
                 skymesh: type
             };

Original file line number	Diff line number	Diff line change
`@@ -95,7 +95,7 @@ class RenderPassPicker extends RenderPass {`
`95`	`95`	`renderer.setupViewUniformBuffers(this.viewBindGroups, renderer.viewUniformFormat, renderer.viewBindGroupFormat, 1);`
`96`	`96`	`}`
`97`	`97`
`98`		`- renderer.renderForward(camera.camera, tempMeshInstances, lights, SHADER_PICK, (meshInstance) => {`
	`98`	`+ renderer.renderForward(camera.camera, renderTarget, tempMeshInstances, lights, SHADER_PICK, (meshInstance) => {`
`99`	`99`	`device.setBlendState(BlendState.NOBLEND);`
`100`	`100`	`});`
`101`	`101`
Original file line number	Diff line number	Diff line change
`@@ -1126,7 +1126,7 @@ class Lightmapper {`
`1126`	`1126`	`this.renderer._forwardTime = 0;`
`1127`	`1127`	`this.renderer._shadowMapTime = 0;`
`1128`	`1128`
`1129`		`- this.renderer.renderForward(this.camera, rcv, lightArray, SHADER_FORWARD);`
	`1129`	`+ this.renderer.renderForward(this.camera, tempRT, rcv, lightArray, SHADER_FORWARD);`
`1130`	`1130`
`1131`	`1131`	`device.updateEnd();`
`1132`	`1132`	`}`