bryik · bryik · May 9, 2020 · May 9, 2020 · May 9, 2020 · May 9, 2020
diff --git a/README.md b/README.md
@@ -8,12 +8,13 @@ An [A-Frame](https://aframe.io) component for creating a skybox from a cubemap.
 
 ### Properties
 
-|   Property   |               Description               | Default Value |
-|:------------:|:---------------------------------------:|:-------------:|
-|    folder    | Path to the folder holding your cubemap |      none     |
-|  edgeLength  |  Controls the dimensions of the skybox  |      5000     |
-|     ext      |           The image extension           |      jpg      |
-|  transparent |       Enable transparency for png       |     false     |
+|  Property   |               Description               | Default Value  |
+| :---------: | :-------------------------------------: | :------------: |
+|   folder    | Path to the folder holding your cubemap |      none      |
+| edgeLength  |  Controls the dimensions of the skybox  |      5000      |
+|     ext     |           The image extension           |      jpg       |
+| transparent |       Enable transparency for png       |     false      |
+|  encoding   |    The [texture encoding][0] to use     | LinearEncoding |
 
 By default, the height, width, and depth of the skybox are set to 5000. In other words, the dimensions of the skybox are 5000x5000x5000.
 
@@ -28,6 +29,7 @@ Attach the component to an entity using the path to the folder holding your cube
 Inside the folder, the component assumes the following naming scheme:
 
 ```javascript
+// prettier-ignore
 const urls = [
   'posx.jpg', 'negx.jpg',
   'posy.jpg', 'negy.jpg',
@@ -44,7 +46,7 @@ The Yokohama cubemap texture is the work of [Emil Persson, aka Humus](http://www
 To modify the size of the resulting skybox, use the edgeLength property.
 
 ```html
-  <a-entity cubemap="folder: /assets/Yokohama3/; edgeLength: 1000"></a-entity>
+<a-entity cubemap="folder: /assets/Yokohama3/; edgeLength: 1000"></a-entity>
 ```
 
 #### Browser Installation
@@ -64,3 +66,5 @@ Install and use by directly including the [browser files](dist):
   </a-scene>
 </body>
 ```
+
+[0]: https://threejs.org/docs/index.html#api/en/textures/Texture.encoding
diff --git a/examples/change-cubemap/index.html b/examples/change-cubemap/index.html
@@ -11,9 +11,9 @@
     <script type="text/javascript">
       setTimeout(changeBackground, 5000);
 
-      function changeBackground () {
-        var skybox = document.querySelector('#skybox');
-        skybox.setAttribute('cubemap', 'folder: /assets/GoldenGateBridge2/');
+      function changeBackground() {
+        var skybox = document.querySelector("#skybox");
+        skybox.setAttribute("cubemap", "folder: /assets/GoldenGateBridge2/");
       }
     </script>
   </body>

diff --git a/examples/encoding/index.html b/examples/encoding/index.html
@@ -0,0 +1,17 @@
+<html>
+  <head>
+    <title>A-Frame Cubemap Component - Yokohama Encoding</title>
+    <script src="../build.js"></script>
+  </head>
+  <body>
+    <!--
+    With colorManagement: true, this example looks identical to the Yokohama
+    example. With colorManagement: false, Yokohama appears too dark.
+    -->
+    <a-scene renderer="colorManagement: true">
+      <a-entity
+        cubemap="folder: /assets/Yokohama3/; encoding: sRGBEncoding"
+      ></a-entity>
+    </a-scene>
+  </body>
+</html>
diff --git a/examples/index.html b/examples/index.html
@@ -1,11 +1,14 @@
 <html>
   <head>
     <title>A-Frame Cubemap Component</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css"/>
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/github-fork-ribbon-css/0.1.1/gh-fork-ribbon.min.css"
+    />
     <style>
       html {
-        background: #EF2D5E;
-        color: #FAFAFA;
+        background: #ef2d5e;
+        color: #fafafa;
         font-family: monospace;
         font-size: 20px;
         padding: 10px 20px;
@@ -14,7 +17,7 @@
         font-weight: 300;
       }
       a {
-        color: #FAFAFA;
+        color: #fafafa;
         display: block;
         padding: 15px 0;
       }
@@ -27,13 +30,18 @@ <h3>Examples</h3>
     <h3>Tests</h3>
     <a href="edgeLength/index.html">edgeLength</a>
     <a href="multi-cubemaps/index.html">Multiple cubemaps</a>
-    <a href="change-cubemap/index.html">Change cubemap with setAttribute (wait 5 seconds)</a>
+    <a href="change-cubemap/index.html"
+      >Change cubemap with setAttribute (wait 5 seconds)</a
+    >
     <a href="milkyWay/index.html">PNG extension</a>
     <a href="fade/index.html">Fade</a>
+    <a href="encoding/index.html">Texture encoding</a>
 
     <div class="github-fork-ribbon-wrapper right">
-      <div class="github-fork-ribbon" style="background: #3482AA">
-        <a href="https://github.com/bryik/aframe-cubemap-component">Fork me on GitHub</a>
+      <div class="github-fork-ribbon" style="background: #3482aa;">
+        <a href="https://github.com/bryik/aframe-cubemap-component"
+          >Fork me on GitHub</a
+        >
       </div>
     </div>
   </body>

diff --git a/examples/multi-cubemaps/index.html b/examples/multi-cubemaps/index.html
@@ -5,8 +5,14 @@
   </head>
   <body>
     <a-scene>
-      <a-entity position="-5 0 -5" cubemap="folder: /assets/Yokohama3/; edgeLength: 5"></a-entity>
-      <a-entity position="5 0 -5" cubemap="folder: /assets/GoldenGateBridge2/; edgeLength: 5"></a-entity>
+      <a-entity
+        position="-5 0 -5"
+        cubemap="folder: /assets/Yokohama3/; edgeLength: 5"
+      ></a-entity>
+      <a-entity
+        position="5 0 -5"
+        cubemap="folder: /assets/GoldenGateBridge2/; edgeLength: 5"
+      ></a-entity>
     </a-scene>
   </body>
 </html>
diff --git a/index.js b/index.js
@@ -1,28 +1,33 @@
 /* global AFRAME, THREE */
-if (typeof AFRAME === 'undefined') {
-  throw new Error('Component attempted to register before AFRAME was available.');
+if (typeof AFRAME === "undefined") {
+  throw new Error(
+    "Component attempted to register before AFRAME was available."
+  );
 }
 
 /**
  * Cubemap component for A-Frame.
  */
-AFRAME.registerComponent('cubemap', {
+AFRAME.registerComponent("cubemap", {
   schema: {
     folder: {
-      type: 'string'
+      type: "string",
     },
     edgeLength: {
-      type: 'int',
-      default: 5000
+      type: "int",
+      default: 5000,
     },
     ext: {
-      type: 'string',
-      default: 'jpg'
+      type: "string",
+      default: "jpg",
     },
     transparent: {
-      type: 'boolean',
-      default: false
-    }
+      type: "boolean",
+      default: false,
+    },
+    encoding: {
+      default: "LinearEncoding",
+    },
   },
 
   /**
@@ -39,20 +44,16 @@ AFRAME.registerComponent('cubemap', {
 
     // Cubemap image files must follow this naming scheme
     // from: http://threejs.org/docs/index.html#Reference/Textures/CubeTexture
-    var urls = [
-      'posx', 'negx',
-      'posy', 'negy',
-      'posz', 'negz'
-    ];
+    var urls = ["posx", "negx", "posy", "negy", "posz", "negz"];
     // Apply extension
-    urls = urls.map(function(val) {
+    urls = urls.map(function (val) {
       return val + "." + data.ext;
     });
 
     // Code that follows is adapted from "Skybox and environment map in Three.js" by Roman Liutikov
     // http://blog.romanliutikov.com/post/58705840698/skybox-and-environment-map-in-threejs
 
-    var shader = THREE.ShaderLib['cube']; // init cube shader from built-in lib
+    var shader = THREE.ShaderLib["cube"]; // init cube shader from built-in lib
 
     // Create shader material
     var skyBoxShader = new THREE.ShaderMaterial({
@@ -61,17 +62,31 @@ AFRAME.registerComponent('cubemap', {
       uniforms: shader.uniforms,
       depthWrite: false,
       side: THREE.BackSide,
-      transparent: data.transparent
+      transparent: data.transparent,
     });
 
     // Set skybox dimensions
     var edgeLength = data.edgeLength;
-    var skyBoxGeometry = new THREE.CubeGeometry(edgeLength, edgeLength, edgeLength);
+    var skyBoxGeometry = new THREE.CubeGeometry(
+      edgeLength,
+      edgeLength,
+      edgeLength
+    );
 
     // Create loader, set folder path, and load cubemap textures
     var loader = new THREE.CubeTextureLoader();
     loader.setPath(srcPath);
-    loader.load(urls, function(texture) {
+    loader.load(urls, function (texture) {
+      // Set texture encoding.
+      let encoding = THREE[data.encoding];
+      if (!encoding) {
+        console.warn(
+          `Unknown texture encoding: ${value}. Defaulting to THREE.LinearEncoding`
+        );
+        encoding = THREE.LinearEncoding;
+      }
+      texture.encoding = encoding;
+
       // Clone ShaderMaterial (necessary for multiple cubemaps)
       var skyBoxMaterial = skyBoxShader.clone();
       // Threejs seems to have removed the 'tCube' uniform.
@@ -84,16 +99,15 @@ AFRAME.registerComponent('cubemap', {
       skyBoxMaterial.uniforms["envMap"].value = texture; // Apply cubemap textures to shader uniforms
 
       // Set entity's object3D
-      el.setObject3D('cubemap', new THREE.Mesh(skyBoxGeometry, skyBoxMaterial));
+      el.setObject3D("cubemap", new THREE.Mesh(skyBoxGeometry, skyBoxMaterial));
     });
-
   },
 
   /**
    * Called when a component is removed (e.g., via removeAttribute).
    * Generally undoes all modifications to the entity.
    */
   remove: function () {
-    this.el.removeObject3D('cubemap');
-  }
+    this.el.removeObject3D("cubemap");
+  },
 });
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -36,6 +36,7 @@
     "budo": "^11.6.3",
     "envify": "^4.1.0",
     "ghpages": "^0.0.10",
+    "prettier": "^2.0.5",
     "webpack": "^2.5.1"
   }
 }