Add exposure to AFrame

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" 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: {type: ['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},
@@ -31,6 +33,7 @@ module.exports.System = registerSystem('renderer', {
     var renderer = sceneEl.renderer;
     renderer.sortObjects = data.sortObjects;
     renderer.physicallyCorrectLights = data.physicallyCorrectLights;
+    renderer.toneMapping = THREE[this.data.toneMapping + 'ToneMapping'];
 
     if (data.colorManagement || data.gammaOutput) {
       renderer.outputEncoding = THREE.sRGBEncoding;
@@ -48,6 +51,13 @@ module.exports.System = registerSystem('renderer', {
     }
   },
 
+  update: function () {
+    var data = this.data;
+    var sceneEl = this.el;
+    var renderer = sceneEl.renderer;
+    renderer.toneMappingExposure = data.exposure;
+  },
+
   applyColorCorrection: function (colorOrTexture) {
     if (!this.data.colorManagement || !colorOrTexture) {
       return;