Add exposure and tone mapping to the renderer and flat shaded material (#5029)

Author: AdaRoseCannon

docs/components/material.md

@@ -238,6 +238,7 @@ such as images or videos. Set `shader` to `flat`:
 | height               | Height of video (in pixels), if defining a video texture.                                                                            | 360           |
 | repeat               | How many times a texture (defined by `src`) repeats in the X and Y direction.                                                        | 1 1           |
 | src                  | Image or video texture map. Can either be a selector to an `<img>` or `<video>`, or an inline URL.                                   | None          |
+| toneMapped           | Whether to ignore toneMapping, set to false you are using renderer.toneMapping and an element should appear to emit light.           | true          |
 | width                | Width of video (in pixels), if defining a video texture.                                                                             | 640           |
 | wireframe            | Whether to render just the geometry edges.                                                                                           | false         |
 | wireframeLinewidth   | Width in px of the rendered line.                                                                                                    | 2             |

docs/components/renderer.md

@@ -37,10 +37,12 @@ It also configures presentation attributes when entering WebVR/WebXR.
 | maxCanvasWidth          | Maximum canvas width. Uses the size multiplied by device pixel ratio. Does not limit canvas width if set to -1.                                | 1920            |
 | maxCanvasHeight         | Maximum canvas height. Behaves the same as maxCanvasWidth.                      | 1920          |
 | logarithmicDepthBuffer  | Whether to use a logarithmic depth buffer.                                      | auto          |
-| precision  |       Fragment shader [precision][precision] : low, medium or high.                                | high          |
+| precision               | Fragment shader [precision][precision] : low, medium or high.                   | high          |
 | alpha                   | Whether the canvas should contain an alpha buffer.                              | true          |
+| toneMapping             | Type of toneMapping to use, one of: 'no', 'ACESFilmic', 'linear', 'reinhard', 'cineon'  | 'no'          |
+| exposure                | When any toneMapping other than "no" is used this can be used to make the overall scene brighter or darker  | 1          |
 
-> **NOTE:** Once the scene is initialized, these properties may no longer be changed.
+> **NOTE:** Once the scene is initialized, none of these properties may no longer be changed apart from "exposure" and "toneMapping" which can be set dynamically.
 
 ### antialias
 

src/shaders/flat.js

@@ -15,7 +15,8 @@ module.exports.Shader = registerShader('flat', {
     src: {type: 'map'},
     width: {default: 512},
     wireframe: {default: false},
-    wireframeLinewidth: {default: 2}
+    wireframeLinewidth: {default: 2},
+    toneMapped: {default: true}
   },
 
   /**
@@ -63,6 +64,7 @@ function getMaterialData (data, materialData) {
   materialData.color.set(data.color);
   materialData.fog = data.fog;
   materialData.wireframe = data.wireframe;
+  materialData.toneMapped = data.toneMapped;
   materialData.wireframeLinewidth = data.wireframeLinewidth;
   return materialData;
 }

src/systems/renderer.js

@@ -16,6 +16,8 @@ module.exports.System = registerSystem('renderer', {
     maxCanvasWidth: {default: 1920},
     maxCanvasHeight: {default: 1920},
     physicallyCorrectLights: {default: false},
+    exposure: {default: 1, if: {toneMapping: ['ACESFilmic', 'linear', 'reinhard', 'cineon']}},
+    toneMapping: {default: 'no', oneOf: ['no', 'ACESFilmic', 'linear', 'reinhard', 'cineon']},
     precision: {default: 'high', oneOf: ['high', 'medium', 'low']},
     sortObjects: {default: false},
     colorManagement: {default: false},
@@ -27,10 +29,12 @@ module.exports.System = registerSystem('renderer', {
   init: function () {
     var data = this.data;
     var sceneEl = this.el;
+    var toneMappingName = this.data.toneMapping.charAt(0).toUpperCase() + this.data.toneMapping.slice(1);
     // This is the rendering engine, such as THREE.js so copy over any persistent properties from the rendering system.
     var renderer = sceneEl.renderer;
     renderer.sortObjects = data.sortObjects;
     renderer.physicallyCorrectLights = data.physicallyCorrectLights;
+    renderer.toneMapping = THREE[toneMappingName + 'ToneMapping'];
 
     if (data.colorManagement || data.gammaOutput) {
       renderer.outputEncoding = THREE.sRGBEncoding;
@@ -48,6 +52,15 @@ module.exports.System = registerSystem('renderer', {
     }
   },
 
+  update: function () {
+    var data = this.data;
+    var sceneEl = this.el;
+    var renderer = sceneEl.renderer;
+    var toneMappingName = this.data.toneMapping.charAt(0).toUpperCase() + this.data.toneMapping.slice(1);
+    renderer.toneMapping = THREE[toneMappingName + 'ToneMapping'];
+    renderer.toneMappingExposure = data.exposure;
+  },
+
   applyColorCorrection: function (colorOrTexture) {
     if (!this.data.colorManagement || !colorOrTexture) {
       return;