[BREAKING] Colors of lights, fog and materials are always supplied in…

… sRGB space, for both LDR and HDR (#6714)

* Colors of lights, fog and materials are always supplied in sRGB space, for both LDR and HDR

* UI update

* deprecated function

* lint + export renderingParams

* clarifications of tonemapping options

* update to gamma to linear conversions

* Update src/scene/constants.js

Co-authored-by: Will Eastcott <will@playcanvas.com>

* feedback

* exposure adjusted in the example

---------

Co-authored-by: Martin Valigursky <mvaligursky@snapchat.com>
Co-authored-by: Will Eastcott <will@playcanvas.com>

examples/assets/models/playbot/26020273/Playbot_head.json

@@ -1 +1 @@
-{"shader":"blinn","ambient":[0.588,0.588,0.588],"diffuse":[0.588,0.588,0.588],"diffuseMap":"../26020286/head_clean.png","diffuseMapOffset":[0,0],"diffuseMapTiling":[1,1],"specular":[0.9,0.9,0.9],"shininess":90.9091,"emissive":[0,0,0],"emissiveMap":"../26020277/head_E.png","emissiveMapOffset":[0,0],"emissiveMapTiling":[1,1],"normalMap":"../26020276/head_N_clean.png","normalMapOffset":[0,0],"normalMapTiling":[1,1],"bumpMapFactor":0.3,"opacity":1,"sphereMap":"../26020278/env_01.png","reflectivity":0.2,"aoMapChannel":"r","aoMapTiling":[1,1],"aoMapOffset":[0,0],"occludeSpecular":1,"diffuseMapChannel":"rgb","specularMapChannel":"rgb","specularMapTiling":[1,1],"specularMapOffset":[0,0],"specularAntialias":true,"metalnessMapChannel":"r","metalnessMapTiling":[1,1],"metalnessMapOffset":[0,0],"metalness":1,"conserveEnergy":true,"glossMapChannel":"r","glossMapTiling":[1,1],"glossMapOffset":[0,0],"emissiveMapChannel":"rgb","emissiveIntensity":1,"heightMapChannel":"r","heightMapTiling":[1,1],"heightMapOffset":[0,0],"heightMapFactor":1,"opacityMapChannel":"r","opacityMapTiling":[1,1],"opacityMapOffset":[0,0],"refractionIndex":0.6666666666666666,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":1,"lightMapTiling":[1,1],"lightMapOffset":[0,0],"depthTest":true,"depthWrite":true,"cull":1,"blendType":3,"shadowSampleType":1,"useFog":true,"useLighting":true,"useSkybox":true,"useGammaTonemap":true,"mapping_format":"path"}
+{"shader":"blinn","ambient":[0.588,0.588,0.588],"diffuse":[0.588,0.588,0.588],"diffuseMap":"../26020286/head_clean.png","diffuseMapOffset":[0,0],"diffuseMapTiling":[1,1],"specular":[0.9,0.9,0.9],"shininess":90.9091,"emissive":[0,0,0],"emissiveMap":"../26020277/head_E.png","emissiveMapOffset":[0,0],"emissiveMapTiling":[1,1],"normalMap":"../26020276/head_N_clean.png","normalMapOffset":[0,0],"normalMapTiling":[1,1],"bumpMapFactor":0.3,"opacity":1,"sphereMap":"../26020278/env_01.png","reflectivity":0.2,"aoMapChannel":"r","aoMapTiling":[1,1],"aoMapOffset":[0,0],"occludeSpecular":1,"diffuseMapChannel":"rgb","specularMapChannel":"rgb","specularMapTiling":[1,1],"specularMapOffset":[0,0],"specularAntialias":true,"metalnessMapChannel":"r","metalnessMapTiling":[1,1],"metalnessMapOffset":[0,0],"metalness":1,"conserveEnergy":true,"glossMapChannel":"r","glossMapTiling":[1,1],"glossMapOffset":[0,0],"emissiveMapChannel":"rgb","emissiveIntensity":1,"heightMapChannel":"r","heightMapTiling":[1,1],"heightMapOffset":[0,0],"heightMapFactor":1,"opacityMapChannel":"r","opacityMapTiling":[1,1],"opacityMapOffset":[0,0],"refractionIndex":0.6666666666666666,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":1,"lightMapTiling":[1,1],"lightMapOffset":[0,0],"depthTest":true,"depthWrite":true,"cull":1,"blendType":3,"shadowSampleType":1,"useFog":true,"useLighting":true,"useSkybox":true,"mapping_format":"path"}

examples/assets/models/playbot/26020274/Playbot_body.json

@@ -1 +1 @@
-{"shader":"blinn","ambient":[0.588,0.588,0.588],"diffuse":[0.588,0.588,0.588],"diffuseMap":"../26020287/body_clean.png","diffuseMapOffset":[0,0],"diffuseMapTiling":[1,1],"specular":[0.9,0.9,0.9],"shininess":90.9091,"emissive":[0,0,0],"emissiveMap":"../26020288/body_E.png","emissiveMapOffset":[0,0],"emissiveMapTiling":[1,1],"normalMap":"../26020280/body_N_clean.png","normalMapOffset":[0,0],"normalMapTiling":[1,1],"bumpMapFactor":0.3,"opacity":1,"sphereMap":"../26020278/env_01.png","reflectivity":0.2,"aoMapChannel":"r","aoMapTiling":[1,1],"aoMapOffset":[0,0],"occludeSpecular":1,"diffuseMapChannel":"rgb","specularMapChannel":"rgb","specularMapTiling":[1,1],"specularMapOffset":[0,0],"specularAntialias":true,"metalnessMapChannel":"r","metalnessMapTiling":[1,1],"metalnessMapOffset":[0,0],"metalness":1,"conserveEnergy":true,"glossMapChannel":"r","glossMapTiling":[1,1],"glossMapOffset":[0,0],"emissiveMapChannel":"rgb","emissiveIntensity":1,"heightMapChannel":"r","heightMapTiling":[1,1],"heightMapOffset":[0,0],"heightMapFactor":1,"opacityMapChannel":"r","opacityMapTiling":[1,1],"opacityMapOffset":[0,0],"refractionIndex":0.6666666666666666,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":1,"lightMapTiling":[1,1],"lightMapOffset":[0,0],"depthTest":true,"depthWrite":true,"cull":1,"blendType":3,"shadowSampleType":1,"useFog":true,"useLighting":true,"useSkybox":true,"useGammaTonemap":true,"mapping_format":"path"}
+{"shader":"blinn","ambient":[0.588,0.588,0.588],"diffuse":[0.588,0.588,0.588],"diffuseMap":"../26020287/body_clean.png","diffuseMapOffset":[0,0],"diffuseMapTiling":[1,1],"specular":[0.9,0.9,0.9],"shininess":90.9091,"emissive":[0,0,0],"emissiveMap":"../26020288/body_E.png","emissiveMapOffset":[0,0],"emissiveMapTiling":[1,1],"normalMap":"../26020280/body_N_clean.png","normalMapOffset":[0,0],"normalMapTiling":[1,1],"bumpMapFactor":0.3,"opacity":1,"sphereMap":"../26020278/env_01.png","reflectivity":0.2,"aoMapChannel":"r","aoMapTiling":[1,1],"aoMapOffset":[0,0],"occludeSpecular":1,"diffuseMapChannel":"rgb","specularMapChannel":"rgb","specularMapTiling":[1,1],"specularMapOffset":[0,0],"specularAntialias":true,"metalnessMapChannel":"r","metalnessMapTiling":[1,1],"metalnessMapOffset":[0,0],"metalness":1,"conserveEnergy":true,"glossMapChannel":"r","glossMapTiling":[1,1],"glossMapOffset":[0,0],"emissiveMapChannel":"rgb","emissiveIntensity":1,"heightMapChannel":"r","heightMapTiling":[1,1],"heightMapOffset":[0,0],"heightMapFactor":1,"opacityMapChannel":"r","opacityMapTiling":[1,1],"opacityMapOffset":[0,0],"refractionIndex":0.6666666666666666,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":1,"lightMapTiling":[1,1],"lightMapOffset":[0,0],"depthTest":true,"depthWrite":true,"cull":1,"blendType":3,"shadowSampleType":1,"useFog":true,"useLighting":true,"useSkybox":true,"mapping_format":"path"}

examples/assets/models/playbot/26020283/Playbot_arm.json

@@ -1 +1 @@
-{"shader":"blinn","ambient":[0.588,0.588,0.588],"diffuse":[0.588,0.588,0.588],"diffuseMap":"../26020279/arm_clean.png","diffuseMapOffset":[0,0],"diffuseMapTiling":[1,1],"specular":[0.9,0.9,0.9],"shininess":90.9091,"emissive":[0,0,0],"emissiveMap":"../26020281/arm_E.png","emissiveMapOffset":[0,0],"emissiveMapTiling":[1,1],"normalMap":"../26020289/arm_N_clean.png","normalMapOffset":[0,0],"normalMapTiling":[1,1],"bumpMapFactor":0.3,"opacity":1,"sphereMap":"../26020278/env_01.png","reflectivity":0.2,"aoMapChannel":"r","aoMapTiling":[1,1],"aoMapOffset":[0,0],"occludeSpecular":1,"diffuseMapChannel":"rgb","specularMapChannel":"rgb","specularMapTiling":[1,1],"specularMapOffset":[0,0],"specularAntialias":true,"metalnessMapChannel":"r","metalnessMapTiling":[1,1],"metalnessMapOffset":[0,0],"metalness":1,"conserveEnergy":true,"glossMapChannel":"r","glossMapTiling":[1,1],"glossMapOffset":[0,0],"emissiveMapChannel":"rgb","emissiveIntensity":1,"heightMapChannel":"r","heightMapTiling":[1,1],"heightMapOffset":[0,0],"heightMapFactor":1,"opacityMapChannel":"r","opacityMapTiling":[1,1],"opacityMapOffset":[0,0],"refractionIndex":0.6666666666666666,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":1,"lightMapTiling":[1,1],"lightMapOffset":[0,0],"depthTest":true,"depthWrite":true,"cull":1,"blendType":3,"shadowSampleType":1,"useFog":true,"useLighting":true,"useSkybox":true,"useGammaTonemap":true,"mapping_format":"path"}
+{"shader":"blinn","ambient":[0.588,0.588,0.588],"diffuse":[0.588,0.588,0.588],"diffuseMap":"../26020279/arm_clean.png","diffuseMapOffset":[0,0],"diffuseMapTiling":[1,1],"specular":[0.9,0.9,0.9],"shininess":90.9091,"emissive":[0,0,0],"emissiveMap":"../26020281/arm_E.png","emissiveMapOffset":[0,0],"emissiveMapTiling":[1,1],"normalMap":"../26020289/arm_N_clean.png","normalMapOffset":[0,0],"normalMapTiling":[1,1],"bumpMapFactor":0.3,"opacity":1,"sphereMap":"../26020278/env_01.png","reflectivity":0.2,"aoMapChannel":"r","aoMapTiling":[1,1],"aoMapOffset":[0,0],"occludeSpecular":1,"diffuseMapChannel":"rgb","specularMapChannel":"rgb","specularMapTiling":[1,1],"specularMapOffset":[0,0],"specularAntialias":true,"metalnessMapChannel":"r","metalnessMapTiling":[1,1],"metalnessMapOffset":[0,0],"metalness":1,"conserveEnergy":true,"glossMapChannel":"r","glossMapTiling":[1,1],"glossMapOffset":[0,0],"emissiveMapChannel":"rgb","emissiveIntensity":1,"heightMapChannel":"r","heightMapTiling":[1,1],"heightMapOffset":[0,0],"heightMapFactor":1,"opacityMapChannel":"r","opacityMapTiling":[1,1],"opacityMapOffset":[0,0],"refractionIndex":0.6666666666666666,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":1,"lightMapTiling":[1,1],"lightMapOffset":[0,0],"depthTest":true,"depthWrite":true,"cull":1,"blendType":3,"shadowSampleType":1,"useFog":true,"useLighting":true,"useSkybox":true,"mapping_format":"path"}

examples/assets/models/playbot/26020285/Playbot_leg.json

@@ -1 +1 @@
-{"shader":"blinn","ambient":[0.588,0.588,0.588],"diffuse":[0.588,0.588,0.588],"diffuseMap":"../26020290/leg_clean.png","diffuseMapOffset":[0,0],"diffuseMapTiling":[1,1],"specular":[0.9,0.9,0.9],"shininess":90.9091,"emissive":[0,0,0],"emissiveMap":"../26020284/leg_E.png","emissiveMapOffset":[0,0],"emissiveMapTiling":[1,1],"normalMap":"../26020282/leg_N_clean.png","normalMapOffset":[0,0],"normalMapTiling":[1,1],"bumpMapFactor":0.3,"opacity":1,"sphereMap":"../26020278/env_01.png","reflectivity":0.2,"aoMapChannel":"r","aoMapTiling":[1,1],"aoMapOffset":[0,0],"occludeSpecular":1,"diffuseMapChannel":"rgb","specularMapChannel":"rgb","specularMapTiling":[1,1],"specularMapOffset":[0,0],"specularAntialias":true,"metalnessMapChannel":"r","metalnessMapTiling":[1,1],"metalnessMapOffset":[0,0],"metalness":1,"conserveEnergy":true,"glossMapChannel":"r","glossMapTiling":[1,1],"glossMapOffset":[0,0],"emissiveMapChannel":"rgb","emissiveIntensity":1,"heightMapChannel":"r","heightMapTiling":[1,1],"heightMapOffset":[0,0],"heightMapFactor":1,"opacityMapChannel":"r","opacityMapTiling":[1,1],"opacityMapOffset":[0,0],"refractionIndex":0.6666666666666666,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":1,"lightMapTiling":[1,1],"lightMapOffset":[0,0],"depthTest":true,"depthWrite":true,"cull":1,"blendType":3,"shadowSampleType":1,"useFog":true,"useLighting":true,"useSkybox":true,"useGammaTonemap":true,"mapping_format":"path"}
+{"shader":"blinn","ambient":[0.588,0.588,0.588],"diffuse":[0.588,0.588,0.588],"diffuseMap":"../26020290/leg_clean.png","diffuseMapOffset":[0,0],"diffuseMapTiling":[1,1],"specular":[0.9,0.9,0.9],"shininess":90.9091,"emissive":[0,0,0],"emissiveMap":"../26020284/leg_E.png","emissiveMapOffset":[0,0],"emissiveMapTiling":[1,1],"normalMap":"../26020282/leg_N_clean.png","normalMapOffset":[0,0],"normalMapTiling":[1,1],"bumpMapFactor":0.3,"opacity":1,"sphereMap":"../26020278/env_01.png","reflectivity":0.2,"aoMapChannel":"r","aoMapTiling":[1,1],"aoMapOffset":[0,0],"occludeSpecular":1,"diffuseMapChannel":"rgb","specularMapChannel":"rgb","specularMapTiling":[1,1],"specularMapOffset":[0,0],"specularAntialias":true,"metalnessMapChannel":"r","metalnessMapTiling":[1,1],"metalnessMapOffset":[0,0],"metalness":1,"conserveEnergy":true,"glossMapChannel":"r","glossMapTiling":[1,1],"glossMapOffset":[0,0],"emissiveMapChannel":"rgb","emissiveIntensity":1,"heightMapChannel":"r","heightMapTiling":[1,1],"heightMapOffset":[0,0],"heightMapFactor":1,"opacityMapChannel":"r","opacityMapTiling":[1,1],"opacityMapOffset":[0,0],"refractionIndex":0.6666666666666666,"cubeMapProjectionBox":{"center":[0,0,0],"halfExtents":[0.5,0.5,0.5]},"lightMapChannel":"rgb","lightMapUv":1,"lightMapTiling":[1,1],"lightMapOffset":[0,0],"depthTest":true,"depthWrite":true,"cull":1,"blendType":3,"shadowSampleType":1,"useFog":true,"useLighting":true,"useSkybox":true,"mapping_format":"path"}

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 = 2.5;
 
     // get the instance of the laboratory
     const laboratoryEntity = assets.laboratory.resource.instantiateRenderEntity({
@@ -196,7 +196,6 @@ assetListLoader.load(() => {
         renderPassCamera.ssaoEnabled = currentOptions.ssaoEnabled;
 
         const composePass = renderPassCamera.composePass;
-        composePass.toneMapping = pc.TONEMAP_NEUTRAL;
         composePass.sharpness = 0;
 
         // and set up these rendering passes to be used by the camera, instead of its default rendering

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

@@ -319,7 +319,7 @@ assetListLoader.load(() => {
         },
         bloom: {
             enabled: currentOptions.bloomEnabled,
-            intensity: 20,
+            intensity: 10,
             lastMipLevel: 1
         },
         grading: {

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

@@ -62,7 +62,7 @@ assetListLoader.load(() => {
     // setup skydome with low intensity
     app.scene.envAtlas = assets.envatlas.resource;
     app.scene.skyboxMip = 0;
-    app.scene.exposure = 1.6;
+    app.scene.exposure = 2.5;
 
     // create an instance of the house and add it to the scene
     const houseEntity = assets.house.resource.instantiateRenderEntity();

src/core/math/color.js

@@ -49,7 +49,7 @@ class Color {
             this.r = r[0];
             this.g = r[1];
             this.b = r[2];
-            this.a = r[3] !== undefined ? r[3] : 1;
+            this.a = r[3] ?? 1;
         } else {
             this.r = r;
             this.g = g;
@@ -150,6 +150,49 @@ class Color {
         return this;
     }
 
+    /**
+     * Converts the color from gamma to linear color space.
+     *
+     * @param {Color} [src] - The color to convert to linear color space. If not set, the operation
+     * is done in place.
+     * @returns {Color} Self for chaining.
+     */
+    linear(src = this) {
+        this.r = Math.pow(src.r, 2.2);
+        this.g = Math.pow(src.g, 2.2);
+        this.b = Math.pow(src.b, 2.2);
+        this.a = src.a;
+        return this;
+    }
+
+    /**
+     * Converts the color from linear to gamma color space.
+     *
+     * @param {Color} [src] - The color to convert to gamma color space. If not set, the operation is
+     * done in place.
+     * @returns {Color} Self for chaining.
+     */
+    gamma(src = this) {
+        this.r = Math.pow(src.r, 1 / 2.2);
+        this.g = Math.pow(src.g, 1 / 2.2);
+        this.b = Math.pow(src.b, 1 / 2.2);
+        this.a = src.a;
+        return this;
+    }
+
+    /**
+     * Multiplies RGB elements of a Color by a number. Note that the alpha value is left unchanged.
+     *
+     * @param {number} scalar - The number to multiply by.
+     * @returns {Color} Self for chaining.
+     */
+    mulScalar(scalar) {
+        this.r *= scalar;
+        this.g *= scalar;
+        this.b *= scalar;
+        return this;
+    }
+
     /**
      * Set the values of the color from a string representation '#11223344' or '#112233'.
      *

src/deprecated/deprecated.js

@@ -650,6 +650,17 @@ Object.defineProperty(StandardMaterial.prototype, 'shininess', {
     }
 });
 
+// useGammaTonemap was renamed to useTonemap. For now do not log a deprecated warning to make existing
+// code work without warnings.
+Object.defineProperty(StandardMaterial.prototype, 'useGammaTonemap', {
+    get: function () {
+        return this.useTonemap;
+    },
+    set: function (value) {
+        this.useTonemap = value;
+    }
+});
+
 function _defineAlias(newName, oldName) {
     Object.defineProperty(StandardMaterial.prototype, oldName, {
         get: function () {

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

@@ -1,4 +1,4 @@
-import { LAYERID_SKYBOX, LAYERID_IMMEDIATE, TONEMAP_LINEAR, GAMMA_NONE } from '../../scene/constants.js';
+import { LAYERID_SKYBOX, LAYERID_IMMEDIATE, TONEMAP_NONE, GAMMA_NONE } from '../../scene/constants.js';
 import {
     ADDRESS_CLAMP_TO_EDGE,
     FILTER_LINEAR,
@@ -155,14 +155,14 @@ class RenderPassCameraFrame extends RenderPass {
         if (!cameraComponent.rendering) {
             const renderingParams = new RenderingParams();
             renderingParams.gammaCorrection = GAMMA_NONE;
-            renderingParams.toneMapping = TONEMAP_LINEAR;
+            renderingParams.toneMapping = TONEMAP_NONE;
             cameraComponent.rendering = renderingParams;
         }
 
         Debug.call(() => {
             const renderingParams = cameraComponent.rendering;
-            if (renderingParams.gammaCorrection !== GAMMA_NONE || renderingParams.toneMapping !== TONEMAP_LINEAR) {
-                Debug.error('Camera rendering parameters are not set to HDR mode');
+            if (renderingParams.gammaCorrection !== GAMMA_NONE || renderingParams.toneMapping !== TONEMAP_NONE) {
+                Debug.error('Camera rendering parameters are not set to HDR mode: GAMMA_NONE and TONEMAP_NONE');
             }
         });
 

src/extras/render-passes/render-pass-compose.js

@@ -2,7 +2,8 @@ import { math } from '../../core/math/math.js';
 import { Color } from '../../core/math/color.js';
 import { RenderPassShaderQuad } from '../../scene/graphics/render-pass-shader-quad.js';
 import { shaderChunks } from '../../scene/shader-lib/chunks/chunks.js';
-import { TONEMAP_LINEAR, TONEMAP_FILMIC, TONEMAP_HEJL, TONEMAP_ACES, TONEMAP_ACES2, TONEMAP_NEUTRAL } from '../../scene/constants.js';
+import { TONEMAP_LINEAR } from '../../scene/constants.js';
+import { ShaderGenerator } from '../../scene/shader-lib/programs/shader-generator.js';
 
 
 // Contrast Adaptive Sharpening (CAS) is used to apply the sharpening. It's based on AMD's
@@ -176,7 +177,7 @@ class RenderPassCompose extends RenderPassShaderQuad {
 
     _ssaoTexture = null;
 
-    _toneMapping = TONEMAP_ACES2;
+    _toneMapping = TONEMAP_LINEAR;
 
     _gradingEnabled = false;
 
@@ -301,18 +302,6 @@ class RenderPassCompose extends RenderPassShaderQuad {
         return this._toneMapping;
     }
 
-    get toneMapChunk() {
-        switch (this.toneMapping) {
-            case TONEMAP_LINEAR: return shaderChunks.tonemappingLinearPS;
-            case TONEMAP_FILMIC: return shaderChunks.tonemappingFilmicPS;
-            case TONEMAP_HEJL: return shaderChunks.tonemappingHejlPS;
-            case TONEMAP_ACES: return shaderChunks.tonemappingAcesPS;
-            case TONEMAP_ACES2: return shaderChunks.tonemappingAces2PS;
-            case TONEMAP_NEUTRAL: return shaderChunks.tonemappingNeutralPS;
-        }
-        return shaderChunks.tonemappingNonePS;
-    }
-
     set sharpness(value) {
         if (this._sharpness !== value) {
             this._sharpness = value;
@@ -364,7 +353,7 @@ class RenderPassCompose extends RenderPassShaderQuad {
                 const fsChunks =
                 shaderChunks.decodePS +
                 shaderChunks.gamma2_2PS +
-                this.toneMapChunk;
+                ShaderGenerator.tonemapCode(this.toneMapping);
 
                 this.shader = this.createQuadShader(`ComposeShader-${key}`, defines + fsChunks + fragmentShader);
             }

src/framework/components/element/system.js

@@ -372,7 +372,7 @@ class ElementComponentSystem extends ComponentSystem {
         //  defaultScreenSpaceBitmapTextMaterial
         material.name = 'default' + name;
         material.useLighting = false;
-        material.useGammaTonemap = false;
+        material.useTonemap = false;
         material.useFog = false;
         material.useSkybox = false;
         material.diffuse.set(0, 0, 0); // black diffuse color to prevent ambient light being included
@@ -399,7 +399,7 @@ class ElementComponentSystem extends ComponentSystem {
         material.opacityTint = true;
         material.opacity = 0; // use non-1 opacity to compile shader correctly
         material.useLighting = false;
-        material.useGammaTonemap = false;
+        material.useTonemap = false;
         material.useFog = false;
         material.useSkybox = false;
         material.blendType = BLEND_PREMULTIPLIED;

src/framework/components/sprite/system.js

@@ -81,7 +81,7 @@ class SpriteComponentSystem extends ComponentSystem {
             material.opacityTint = true;
             material.opacity = 0; // use non-1 opacity to compile shader correctly
             material.useLighting = false;
-            material.useGammaTonemap = false;
+            material.useTonemap = false;
             material.useFog = false;
             material.useSkybox = false;
             material.blendType = BLEND_PREMULTIPLIED;