Set THREE.ColorManagement.legacyMode to false when using color manage…

…ment

dist/aframe-master.js

@@ -15830,13 +15830,11 @@ module.exports.Component = registerComponent('light', {
           case 'color':
             {
               light.color.set(value);
-              rendererSystem.applyColorCorrection(light.color);
               break;
             }
           case 'groundColor':
             {
               light.groundColor.set(value);
-              rendererSystem.applyColorCorrection(light.groundColor);
               break;
             }
           case 'angle':
@@ -16014,12 +16012,10 @@ module.exports.Component = registerComponent('light', {
   getLight: function (data) {
     var angle = data.angle;
     var color = new THREE.Color(data.color);
-    this.rendererSystem.applyColorCorrection(color);
     color = color.getHex();
     var decay = data.decay;
     var distance = data.distance;
     var groundColor = new THREE.Color(data.groundColor);
-    this.rendererSystem.applyColorCorrection(groundColor);
     groundColor = groundColor.getHex();
     var intensity = data.intensity;
     var type = data.type;

src/components/generic-tracked-controller-controls.js

@@ -67,7 +67,6 @@ module.exports.Component = registerComponent('generic-tracked-controller-control
     this.controllerPresent = false;
     this.wasControllerConnected = false;
     this.lastControllerCheck = 0;
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.bindMethods();
 
     // generic-tracked-controller-controls has the lowest precedence.

src/components/hp-mixed-reality-controls.js

@@ -61,7 +61,6 @@ module.exports.Component = registerComponent('hp-mixed-reality-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self, self.data.hand); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self, self.data.hand); };
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
 
     this.bindMethods();
   },

src/components/light.js

@@ -56,7 +56,6 @@ module.exports.Component = registerComponent('light', {
     var el = this.el;
     this.light = null;
     this.defaultTarget = null;
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.system.registerLight(el);
   },
 
@@ -67,7 +66,6 @@ module.exports.Component = registerComponent('light', {
     var data = this.data;
     var diffData = diff(data, oldData);
     var light = this.light;
-    var rendererSystem = this.rendererSystem;
     var self = this;
 
     // Existing light.
@@ -80,13 +78,11 @@ module.exports.Component = registerComponent('light', {
         switch (key) {
           case 'color': {
             light.color.set(value);
-            rendererSystem.applyColorCorrection(light.color);
             break;
           }
 
           case 'groundColor': {
             light.groundColor.set(value);
-            rendererSystem.applyColorCorrection(light.groundColor);
             break;
           }
 
@@ -281,12 +277,10 @@ module.exports.Component = registerComponent('light', {
   getLight: function (data) {
     var angle = data.angle;
     var color = new THREE.Color(data.color);
-    this.rendererSystem.applyColorCorrection(color);
     color = color.getHex();
     var decay = data.decay;
     var distance = data.distance;
     var groundColor = new THREE.Color(data.groundColor);
-    this.rendererSystem.applyColorCorrection(groundColor);
     groundColor = groundColor.getHex();
     var intensity = data.intensity;
     var type = data.type;

src/components/line.js

@@ -16,7 +16,6 @@ module.exports.Component = registerComponent('line', {
     var data = this.data;
     var geometry;
     var material;
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     material = this.material = new THREE.LineBasicMaterial({
       color: data.color,
       opacity: data.opacity,
@@ -26,7 +25,6 @@ module.exports.Component = registerComponent('line', {
     geometry = this.geometry = new THREE.BufferGeometry();
     geometry.setAttribute('position', new THREE.BufferAttribute(new Float32Array(2 * 3), 3));
 
-    this.rendererSystem.applyColorCorrection(material.color);
     this.line = new THREE.Line(geometry, material);
     this.el.setObject3D(this.attrName, this.line);
   },
@@ -59,7 +57,6 @@ module.exports.Component = registerComponent('line', {
     }
 
     material.color.setStyle(data.color);
-    this.rendererSystem.applyColorCorrection(material.color);
     material.opacity = data.opacity;
     material.transparent = data.opacity < 1;
     material.visible = data.visible;

src/components/magicleap-controls.js

@@ -56,7 +56,6 @@ module.exports.Component = registerComponent('magicleap-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
 
     this.bindMethods();
   },

src/components/obj-model.js

@@ -64,9 +64,7 @@ module.exports.Component = registerComponent('obj-model', {
           self.model.traverse(function (object) {
             if (object.isMesh) {
               var material = object.material;
-              if (material.color) rendererSystem.applyColorCorrection(material.color);
               if (material.map) rendererSystem.applyColorCorrection(material.map);
-              if (material.emissive) rendererSystem.applyColorCorrection(material.emissive);
               if (material.emissiveMap) rendererSystem.applyColorCorrection(material.emissiveMap);
             }
           });

src/components/oculus-go-controls.js

@@ -83,7 +83,6 @@ module.exports.Component = registerComponent('oculus-go-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.controllerPresent = false;
     this.lastControllerCheck = 0;
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.bindMethods();
   },
 
@@ -197,6 +196,5 @@ module.exports.Component = registerComponent('oculus-go-controls', {
     }
     button = buttonMeshes[buttonName];
     button.material.color.set(color);
-    this.rendererSystem.applyColorCorrection(button.material.color);
   }
 });

src/components/oculus-touch-controls.js

@@ -197,7 +197,6 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     this.controllerPresent = false;
     this.lastControllerCheck = 0;
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.bindMethods();
     this.triggerEuler = new THREE.Euler();
   },
@@ -498,7 +497,6 @@ module.exports.Component = registerComponent('oculus-touch-controls', {
     if (buttonMeshes && buttonMeshes[buttonName]) {
       button = buttonMeshes[buttonName];
       button.material.color.set(color);
-      this.rendererSystem.applyColorCorrection(button.material.color);
     }
   }
 });

src/components/valve-index-controls.js

@@ -73,7 +73,6 @@ module.exports.Component = registerComponent('valve-index-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
 
     this.bindMethods();
   },

src/components/vive-controls.js

@@ -77,7 +77,6 @@ module.exports.Component = registerComponent('vive-controls', {
     this.onButtonTouchEnd = function (evt) { onButtonEvent(evt.detail.id, 'touchend', self); };
     this.onButtonTouchStart = function (evt) { onButtonEvent(evt.detail.id, 'touchstart', self); };
     this.previousButtonValues = {};
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
 
     this.bindMethods();
   },
@@ -241,19 +240,15 @@ module.exports.Component = registerComponent('vive-controls', {
 
   setButtonColor: function (buttonName, color) {
     var buttonMeshes = this.buttonMeshes;
-    var rendererSystem = this.rendererSystem;
 
     if (!buttonMeshes) { return; }
 
     // Need to do both left and right sides for grip.
     if (buttonName === 'grip') {
       buttonMeshes.grip.left.material.color.set(color);
       buttonMeshes.grip.right.material.color.set(color);
-      rendererSystem.applyColorCorrection(buttonMeshes.grip.left.material.color);
-      rendererSystem.applyColorCorrection(buttonMeshes.grip.right.material.color);
       return;
     }
     buttonMeshes[buttonName].material.color.set(color);
-    rendererSystem.applyColorCorrection(buttonMeshes[buttonName].material.color);
   }
 });

src/shaders/flat.js

@@ -24,11 +24,9 @@ module.exports.Shader = registerShader('flat', {
    * Adds a reference from the scene to this entity as the camera.
    */
   init: function (data) {
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.materialData = {color: new THREE.Color()};
     this.textureSrc = null;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
     this.material = new THREE.MeshBasicMaterial(this.materialData);
   },
 
@@ -45,7 +43,6 @@ module.exports.Shader = registerShader('flat', {
   updateMaterial: function (data) {
     var key;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
     for (key in this.materialData) {
       this.material[key] = this.materialData[key];
     }

src/shaders/phong.js

@@ -52,11 +52,9 @@ module.exports.Shader = registerShader('phong', {
    * Adds a reference from the scene to this entity as the camera.
    */
   init: function (data) {
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.materialData = { color: new THREE.Color(), specular: new THREE.Color(), emissive: new THREE.Color() };
     this.textureSrc = null;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
     this.material = new THREE.MeshPhongMaterial(this.materialData);
     utils.material.updateMap(this, data);
   },
@@ -79,7 +77,6 @@ module.exports.Shader = registerShader('phong', {
   updateMaterial: function (data) {
     var key;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
     for (key in this.materialData) {
       this.material[key] = this.materialData[key];
     }

src/shaders/shadow.js

@@ -16,7 +16,6 @@ module.exports.Shader = registerShader('shadow', {
    * Adds a reference from the scene to this entity as the camera.
    */
   init: function (data) {
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.material = new THREE.ShadowMaterial();
   },
 

src/shaders/standard.js

@@ -61,11 +61,8 @@ module.exports.Shader = registerShader('standard', {
    * Adds a reference from the scene to this entity as the camera.
    */
   init: function (data) {
-    this.rendererSystem = this.el.sceneEl.systems.renderer;
     this.materialData = {color: new THREE.Color(), emissive: new THREE.Color()};
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
-    this.rendererSystem.applyColorCorrection(this.materialData.emissive);
     this.material = new THREE.MeshStandardMaterial(this.materialData);
   },
 
@@ -90,8 +87,6 @@ module.exports.Shader = registerShader('standard', {
     var key;
     var material = this.material;
     getMaterialData(data, this.materialData);
-    this.rendererSystem.applyColorCorrection(this.materialData.color);
-    this.rendererSystem.applyColorCorrection(this.materialData.emissive);
     for (key in this.materialData) {
       material[key] = this.materialData[key];
     }

src/systems/renderer.js

@@ -38,6 +38,7 @@ module.exports.System = registerSystem('renderer', {
 
     if (data.colorManagement || data.gammaOutput) {
       renderer.outputEncoding = THREE.sRGBEncoding;
+      THREE.ColorManagement.legacyMode = false;
       if (data.gammaOutput) {
         warn('Property `gammaOutput` is deprecated. Use `renderer="colorManagement: true;"` instead.');
       }
@@ -62,13 +63,11 @@ module.exports.System = registerSystem('renderer', {
     renderer.xr.setFoveation(data.foveationLevel);
   },
 
-  applyColorCorrection: function (colorOrTexture) {
-    if (!this.data.colorManagement || !colorOrTexture) {
+  applyColorCorrection: function (texture) {
+    if (!this.data.colorManagement || !texture) {
       return;
-    } else if (colorOrTexture.isColor) {
-      colorOrTexture.convertSRGBToLinear();
-    } else if (colorOrTexture.isTexture) {
-      colorOrTexture.encoding = THREE.sRGBEncoding;
+    } else if (texture.isTexture) {
+      texture.encoding = THREE.sRGBEncoding;
     }
   }
 });