Update additional colorSpace settings

Remove depth encodings mixed in, add p3 and no-color options

build/schemas/arena-scene-options.json

@@ -303,8 +303,8 @@
                 "enum":[
                    "SRGBColorSpace",
                    "LinearSRGBColorSpace",
-                   "BasicDepthPacking",
-                   "RGBADepthPacking"
+                   "DisplayP3ColorSpace",
+                   "NoColorSpace"
                 ],
                 "title":"Output Color Space",
                 "type":"string"

src/components/README.md

@@ -50,7 +50,7 @@ Jitsi video source can be defined using a jitsiId or (ARENA/Jitsi) display name<
 <dd><p>Load scene from persistence.</p>
 </dd>
 <dt><a href="#module_material-extras">material-extras</a></dt>
-<dd><p>Allows to set extra material properties, namely texture encoding, whether to render the material&#39;s color and render order.
+<dd><p>Allows to set extra material properties, namely texture colorspace, whether to render the material&#39;s color and render order.
 The properties set here access directly <a href="https://threejs.org/docs/#api/en/materials/Material">Three.js material</a>.
 Implements a timeout scheme in lack of better understanding of the timing/events causing properties to not be available.</p>
 </dd>
@@ -267,7 +267,7 @@ Load scene from persistence.
 <a name="module_material-extras"></a>
 
 ## material-extras
-Allows to set extra material properties, namely texture encoding, whether to render the material's color and render order.
+Allows to set extra material properties, namely texture colorspace, whether to render the material's color and render order.
 The properties set here access directly [Three.js material](https://threejs.org/docs/#api/en/materials/Material).
 Implements a timeout scheme in lack of better understanding of the timing/events causing properties to not be available.
 
@@ -276,7 +276,7 @@ Implements a timeout scheme in lack of better understanding of the timing/events
 | Name | Type | Default | Description |
 | --- | --- | --- | --- |
 | [overrideSrc] | <code>string</code> | <code>&quot;&#x27;&#x27;&quot;</code> | Overrides the material in all meshes of an object (e.g. a basic shape or a GLTF). |
-| [encoding] | <code>string</code> | <code>&quot;sRGBEncoding&quot;</code> | The material encoding; One of 'LinearEncoding', 'sRGBEncoding', 'GammaEncoding', 'RGBEEncoding', 'LogLuvEncoding', 'RGBM7Encoding', 'RGBM16Encoding', 'RGBDEncoding', 'BasicDepthPacking', 'RGBADepthPacking'. See [Three.js material](https://threejs.org/docs/#api/en/materials/Material). |
+| [colorSpace] | <code>string</code> | <code>&quot;sRGBEncoding&quot;</code> | The material encoding; One of 'SRGBColorSpace', 'LinearSRGBColorSpace', 'DisplayP3ColorSpace', 'NoColorSpace'. See [Three.js material](https://threejs.org/docs/#api/en/materials/Material). |
 | [colorWrite] | <code>boolean</code> | <code>true</code> | Whether to render the material's color. See [Three.js material](https://threejs.org/docs/#api/en/materials/Material). |
 | [renderOrder] | <code>number</code> | <code>1</code> | This value allows the default rendering order of scene graph objects to be overridden. See [Three.js Object3D.renderOrder](https://threejs.org/docs/#api/en/core/Object3D.renderOrder). |
 | [transparentOccluder] | <code>boolean</code> | <code>false</code> | If `true`, will set `colorWrite=false` and `renderOrder=0` to make the material a transparent occluder. |

src/components/arena-user.js

@@ -198,7 +198,7 @@ AFRAME.registerComponent('arena-user', {
         videoCube.setAttribute('position', '0 0 0');
         videoCube.setAttribute('material', 'shader', 'flat');
         videoCube.setAttribute('src', `#${this.videoID}`); // video only! (no audio)
-        videoCube.setAttribute('material-extras', 'encoding', 'sRGBEncoding');
+        videoCube.setAttribute('material-extras', 'colorSpace', 'SRGBColorSpace');
 
         if (data.presence !== 'Portal') {
             videoCube.setAttribute('position', '0 0 0');

src/components/jitsi-video.js

@@ -113,7 +113,7 @@ AFRAME.registerComponent('jitsi-video', {
             });
         } else {
             this.el.setAttribute('material', 'src', `#${this.videoID}`); // video only! (no audio)
-            this.el.setAttribute('material-extras', 'encoding', 'sRGBEncoding');
+            this.el.setAttribute('material-extras', 'colorSpace', 'SRGBColorSpace');
             this.el.setAttribute('material-extras', 'needsUpdate', 'true');
         }
         this.el.setAttribute('material', 'shader', 'flat');

src/components/material-extras.js

@@ -12,12 +12,12 @@ import {ARENAUtils} from '../utils';
  */
 
 /**
- * Allows to set extra material properties, namely texture encoding, whether to render the material's color and render order.
+ * Allows to set extra material properties, namely texture colorspace, whether to render the material's color and render order.
  * The properties set here access directly [Three.js material]{@link https://threejs.org/docs/#api/en/materials/Material}.
  * Implements a timeout scheme in lack of better management of the timing/events causing properties to not be available.
  * @module material-extras
  * @property {string} [overrideSrc=''] - Overrides the material in all meshes of an object (e.g. a basic shape or a GLTF).
- * @property {string} [encoding=sRGBEncoding] - The material encoding; One of 'LinearEncoding', 'sRGBEncoding', 'GammaEncoding', 'RGBEEncoding', 'LogLuvEncoding', 'RGBM7Encoding', 'RGBM16Encoding', 'RGBDEncoding', 'BasicDepthPacking', 'RGBADepthPacking'. See [Three.js material]{@link https://threejs.org/docs/#api/en/materials/Material}.
+ * @property {string} [colorSpace=SRGBColorSpace] - The material colorspace; See [Three.js material]{@link https://threejs.org/docs/#api/en/materials/Material}.
  * @property {boolean} [colorWrite=true] - Whether to render the material's color. See [Three.js material]{@link https://threejs.org/docs/#api/en/materials/Material}.
  * @property {number} [renderOrder=1] - This value allows the default rendering order of scene graph objects to be overridden. See [Three.js Object3D.renderOrder]{@link https://threejs.org/docs/#api/en/core/Object3D.renderOrder}.
  * @property {boolean} [transparentOccluder=false] - If `true`, will set `colorWrite=false` and `renderOrder=0` to make the material a transparent occluder.
@@ -26,9 +26,10 @@ AFRAME.registerComponent('material-extras', {
     dependencies: ['material'],
     schema: {
         overrideSrc: {default: ''},
-        encoding: {default: 'sRGBEncoding', oneOf: [
-            'LinearEncoding', 'sRGBEncoding', 'GammaEncoding', 'RGBEEncoding', 'LogLuvEncoding',
-            'RGBM7Encoding', 'RGBM16Encoding', 'RGBDEncoding', 'BasicDepthPacking', 'RGBADepthPacking']},
+        colorSpace: {
+            default: 'SRGBColorSpace',
+            oneOf: ['SRGBColorSpace', 'LinearSRGBColorSpace', 'DisplayP3ColorSpace', 'NoColorSpace'],
+        },
         colorWrite: {default: true},
         renderOrder: {default: 1},
         occluderRenderOrder: {default: -1},
@@ -54,7 +55,7 @@ AFRAME.registerComponent('material-extras', {
             transparentOccluder = oldData.transparentOccluder;
             if (oldData.renderOrder !== this.data.renderOrder ||
                 oldData.colorWrite !== this.data.colorWrite ||
-                oldData.encoding !== this.data.encoding ||
+                oldData.colorSpace !== this.data.colorSpace ||
                 oldData.overrideSrc !== this.data.overrideSrc) {
                 this.doUpdate = true;
             }
@@ -89,7 +90,7 @@ AFRAME.registerComponent('material-extras', {
             (texture) => {
                 this.texture = texture;
                 this.doUpdate = true;
-                this.texture.encoding = THREE[this.data.encoding];
+                this.texture.colorSpace = THREE[this.data.colorSpace];
                 this.texture.flipY = false;
                 this.update();
             },
@@ -106,7 +107,7 @@ AFRAME.registerComponent('material-extras', {
         mesh.material.colorWrite = this.data.colorWrite;
         if (mesh.material.map && this.texture) {
             mesh.material.map = this.texture;
-            mesh.material.map.encoding = THREE[this.data.encoding];
+            mesh.material.map.colorSpace = THREE[this.data.colorSpace];
         }
         mesh.material.needsUpdate = true;
     },

src/core/jitsi.js

@@ -248,7 +248,7 @@ AFRAME.registerSystem('arena-jitsi', {
         screenShareEl.setAttribute('playsinline', 'true');
         screenShareEl.setAttribute('material', 'src', `#${videoId}`);
         screenShareEl.setAttribute('material', 'shader', 'flat');
-        screenShareEl.setAttribute('material-extras', 'encoding', 'sRGBEncoding');
+        screenShareEl.setAttribute('material-extras', 'colorSpace', 'SRGBColorSpace');
         screenShareEl.setAttribute('material-extras', 'needsUpdate', 'true');
         this.screenShareDict[participantId] = screenShareEl;
         return screenShareEl;

src/message-actions/create-update.js

@@ -306,8 +306,8 @@ export class CreateUpdate {
                 delete data.src; // remove attribute so we don't set it later
             }
             if (!data.hasOwnProperty('material-extras')) {
-                // default images to sRGBEncoding, if not specified
-                entityEl.setAttribute('material-extras', 'encoding', 'sRGBEncoding');
+                // default images to SRGBColorSpace, if not specified
+                entityEl.setAttribute('material-extras', 'colorSpace', 'SRGBColorSpace');
                 entityEl.setAttribute('material-extras', 'needsUpdate', 'true');
             }
             delete data.image; // no other properties applicable to image; delete it