feat: update setting color space and encoding with r152

Chau Tran · Chau Tran · commit 3f77a7d6d002 · 2023-05-05T22:09:49.000-05:00
diff --git a/libs/angular-three/src/lib/stores/store.ts b/libs/angular-three/src/lib/stores/store.ts
@@ -335,11 +335,14 @@ export class NgtStore extends NgtRxStore<NgtState> {
             if ('enabled' in ColorManagement) ColorManagement['enabled'] = !legacy ?? false;
             else if ('legacyMode' in ColorManagement) ColorManagement['legacyMode'] = legacy ?? true;
         }
-        const outputEncoding = linear ? THREE.LinearEncoding : THREE.sRGBEncoding;
-        const toneMapping = flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping;
 
-        if (gl.outputEncoding !== outputEncoding) gl.outputEncoding = outputEncoding;
-        if (gl.toneMapping !== toneMapping) gl.toneMapping = toneMapping;
+        // set color space and tonemapping preferences
+        const LinearEncoding = 3000;
+        const sRGBEncoding = 3001;
+        applyProps(gl, {
+            outputEncoding: linear ? LinearEncoding : sRGBEncoding,
+            toneMapping: flat ? THREE.NoToneMapping : THREE.ACESFilmicToneMapping,
+        });
 
         // Update color management state
         if (state.legacy !== legacy) stateToUpdate.legacy = legacy;
diff --git a/libs/angular-three/src/lib/utils/apply-props.ts b/libs/angular-three/src/lib/utils/apply-props.ts
@@ -26,34 +26,49 @@ export function applyProps(instance: NgtInstanceNode, props: NgtAnyRecord): NgtI
     const changes = diffProps(instance, props);
 
     for (let i = 0; i < changes.length; i++) {
-        const key = changes[i][0];
+        let key = changes[i][0];
         const currentInstance = instance;
         const targetProp = currentInstance[key] as NgtAnyRecord;
-        const value = changes[i][1];
+        let value = changes[i][1];
+
+        if (is.colorSpaceExist(currentInstance)) {
+            const sRGBEncoding = 3001;
+            const SRGBColorSpace = 'srgb';
+            const LinearSRGBColorSpace = 'srgb-linear';
+
+            if (key === 'encoding') {
+                key = 'colorSpace';
+                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+            } else if (key === 'outputEncoding') {
+                key = 'outputColorSpace';
+                value = value === sRGBEncoding ? SRGBColorSpace : LinearSRGBColorSpace;
+            }
+        }
 
         // special treatmen for objects with support for set/copy, and layers
         if (targetProp && targetProp['set'] && (targetProp['copy'] || targetProp instanceof THREE.Layers)) {
             const isColor = targetProp instanceof THREE.Color;
             // if value is an array
             if (Array.isArray(value)) {
-                if (targetProp['fromArray']) targetProp['fromArray'](value);
+                if ((targetProp as NgtAnyRecord)['fromArray']) (targetProp as NgtAnyRecord)['fromArray'](value);
                 else targetProp['set'](...value);
             }
             // test again target.copy
             else if (
-                targetProp['copy'] &&
+                (targetProp as NgtAnyRecord)['copy'] &&
                 value &&
                 value.constructor &&
                 targetProp.constructor.name === value.constructor.name
             ) {
-                targetProp['copy'](value);
+                (targetProp as NgtAnyRecord)['copy'](value);
                 if (!THREE.ColorManagement && !rootState.linear && isColor) targetProp['convertSRGBToLinear']();
             }
             // if nothing else fits, just set the single value, ignore undefined
             else if (value !== undefined) {
                 const isColor = targetProp instanceof THREE.Color;
                 // allow setting array scalars
-                if (!isColor && targetProp['setScalar']) targetProp['setScalar'](value);
+                if (!isColor && (targetProp as NgtAnyRecord)['setScalar'])
+                    (targetProp as NgtAnyRecord)['setScalar'](value);
                 // layers have no copy function, copy the mask
                 else if (targetProp instanceof THREE.Layers && value instanceof THREE.Layers)
                     targetProp.mask = value.mask;
@@ -69,12 +84,14 @@ export function applyProps(instance: NgtInstanceNode, props: NgtAnyRecord): NgtI
             currentInstance[key] = value;
             // auto-convert srgb textures
             if (
-                !rootState?.linear &&
                 currentInstance[key] instanceof THREE.Texture &&
                 currentInstance[key].format === THREE.RGBAFormat &&
                 currentInstance[key].type === THREE.UnsignedByteType
             ) {
-                currentInstance[key]['encoding'] = THREE.sRGBEncoding;
+                const texture = currentInstance[key] as THREE.Texture;
+                if (is.colorSpaceExist(texture) && is.colorSpaceExist(rootState.gl))
+                    texture.colorSpace = rootState.gl.outputColorSpace;
+                else texture.encoding = rootState.gl.outputEncoding;
             }
         }
 
diff --git a/libs/angular-three/src/lib/utils/is.ts b/libs/angular-three/src/lib/utils/is.ts
@@ -1,6 +1,6 @@
 import { ElementRef } from '@angular/core';
 import * as THREE from 'three';
-import type { NgtAnyRecord, NgtEquConfig, NgtInstanceNode } from '../types';
+import type { NgtAnyRecord, NgtEquConfig, NgtGLRenderer, NgtInstanceNode } from '../types';
 
 export const is = {
     obj: (a: unknown): a is object => a === Object(a) && !Array.isArray(a) && typeof a !== 'function',
@@ -16,6 +16,12 @@ export const is = {
     object3D: (a: unknown): a is THREE.Object3D => !!a && (a as THREE.Object3D).isObject3D,
     instance: (a: unknown): a is NgtInstanceNode => !!a && !!(a as NgtAnyRecord)['__ngt__'],
     ref: (a: unknown): a is ElementRef => a instanceof ElementRef,
+    colorSpaceExist: <
+        T extends NgtGLRenderer | THREE.Texture | object,
+        P = T extends NgtGLRenderer ? { outputColorSpace: string } : { colorSpace: string }
+    >(
+        object: T
+    ): object is T & P => 'colorSpace' in object || 'outputColorSpace' in object,
     equ(a: any, b: any, { arrays = 'shallow', objects = 'reference', strict = true }: NgtEquConfig = {}) {
         // Wrong type or one of the two undefined, doesn't match
         if (typeof a !== typeof b || !!a !== !!b) return false;
