Added color string support (#3931)

* Allow hex strings for color factors

* added docs, updated example

Author: elalish

packages/model-viewer/src/features/scene-graph/api.ts

@@ -102,7 +102,7 @@ export declare interface Material {
   readonly emissiveTexture: TextureInfo|null;
 
   readonly emissiveFactor: Readonly<RGB>;
-  setEmissiveFactor(rgb: RGB): void;
+  setEmissiveFactor(rgb: RGB|string): void;
   setAlphaCutoff(cutoff: number): void;
   getAlphaCutoff(): number;
   setDoubleSided(doubleSided: boolean): void;
@@ -180,7 +180,7 @@ export declare interface PBRMetallicRoughness {
   /**
    * Changes the base color factor of the material to the given value.
    */
-  setBaseColorFactor(rgba: RGBA): void;
+  setBaseColorFactor(rgba: RGBA|string): void;
 
   /**
    * Changes the metalness factor of the material to the given value.

packages/model-viewer/src/features/scene-graph/material.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {DoubleSide, FrontSide, MeshStandardMaterial} from 'three';
+import {Color, DoubleSide, FrontSide, MeshStandardMaterial} from 'three';
 
 import {AlphaMode, GLTF, Material as GLTFMaterial, RGB} from '../../three-components/gltf-instance/gltf-2.0.js';
 import {Material as DefaultedMaterial} from '../../three-components/gltf-instance/gltf-defaulted.js';
@@ -252,13 +252,20 @@ export class Material extends ThreeDOMElement implements MaterialInterface {
     return variantData != null && this[$variantSet].has(variantData.index);
   }
 
-  setEmissiveFactor(rgb: RGB) {
+  setEmissiveFactor(rgb: RGB|string) {
     this[$ensureMaterialIsLoaded]();
+    const color = new Color();
+    if (rgb instanceof Array) {
+      color.fromArray(rgb);
+    } else {
+      color.set(rgb).convertSRGBToLinear();
+    }
     for (const material of this[$correlatedObjects] as
          Set<MeshStandardMaterial>) {
-      material.emissive.fromArray(rgb);
+      material.emissive.set(color);
     }
-    (this[$sourceObject] as DefaultedMaterial).emissiveFactor = rgb;
+    (this[$sourceObject] as DefaultedMaterial).emissiveFactor =
+        color.toArray() as [number, number, number];
     this[$onUpdate]();
   }
 

packages/model-viewer/src/features/scene-graph/pbr-metallic-roughness.ts

@@ -13,7 +13,7 @@
  * limitations under the License.
  */
 
-import {MeshStandardMaterial} from 'three';
+import {Color, MeshStandardMaterial} from 'three';
 
 import {GLTF, PBRMetallicRoughness as GLTFPBRMetallicRoughness} from '../../three-components/gltf-instance/gltf-2.0.js';
 import {PBRMetallicRoughness as DefaultedPBRMetallicRoughness} from '../../three-components/gltf-instance/gltf-defaulted.js';
@@ -105,14 +105,25 @@ export class PBRMetallicRoughness extends ThreeDOMElement implements
     return this[$metallicRoughnessTexture];
   }
 
-  setBaseColorFactor(rgba: RGBA) {
+  setBaseColorFactor(rgba: RGBA|string) {
+    const color = new Color();
+    if (rgba instanceof Array) {
+      color.fromArray(rgba);
+    } else {
+      color.set(rgba).convertSRGBToLinear();
+    }
     for (const material of this[$threeMaterials]) {
-      material.color.fromArray(rgba);
-      material.opacity = (rgba)[3];
+      material.color.set(color);
+      if (rgba instanceof Array) {
+        material.opacity = (rgba)[3];
+      } else {
+        rgba = [0, 0, 0, material.opacity];
+        color.toArray(rgba);
+      }
     }
     const pbrMetallicRoughness =
         this[$sourceObject] as DefaultedPBRMetallicRoughness;
-    pbrMetallicRoughness.baseColorFactor = rgba;
+    pbrMetallicRoughness.baseColorFactor = rgba as RGBA;
     this[$onUpdate]();
   }
 

packages/modelviewer.dev/examples/scenegraph/index.html

@@ -207,8 +207,11 @@ <h2 class="demo-title">Model Transformations</h2>
           <h4 id="intro"><span class="font-medium">Directly manipulate the scene graph</span></h4>
           <div class="heading">
             <h2 class="demo-title">Change Material Base Color</h2>
-            <p>This is an experimental feature, and the API is considered highly
-            unstable. Please try it out, but be prepared for it to change!</p>
+            <p>Note that color factors can be set two ways: [r, g, b, a] or a
+            CSS-style color string. For array input, the values are between 0
+            and 1 and represent a linear color space, identical to the glTF
+            spec. For string inputs, the values are internally converted from
+            the sRGB color space, so this is likely more user-friendly.</p>
             <p>As above, you can change these values in AR, but only in WebXR
             mode. iOS Quick Look does not reflect these color changes as USDZ
             does not appear to support colors multiplied onto textures.</p>
@@ -217,27 +220,18 @@ <h2 class="demo-title">Change Material Base Color</h2>
             <template>
 <model-viewer id="color" camera-controls touch-action="pan-y" interaction-prompt="none" src="../../shared-assets/models/Astronaut.glb" ar alt="A 3D model of an astronaut">
   <div class="controls", id="color-controls">
-    <button data-color="1,0,0,1">Red</button>
-    <button data-color="0,1,0,1">Green</button>
-    <button data-color="0,0,1,1">Blue</button>
+    <button data-color="#ff0000">Red</button>
+    <button data-color="#00ff00">Green</button>
+    <button data-color="#0000ff">Blue</button>
   </div>
 </model-viewer>
 <script>
 const modelViewerColor = document.querySelector("model-viewer#color");
 
 document.querySelector('#color-controls').addEventListener('click', (event) => {
   const colorString = event.target.dataset.color;
-
-  if (!colorString) {
-    return;
-  }
-
-  const color = colorString.split(',')
-      .map(numberString => parseFloat(numberString));
-
-  console.log('Changing color to: ', color);
   const [material] = modelViewerColor.model.materials;
-  material.pbrMetallicRoughness.setBaseColorFactor(color);
+  material.pbrMetallicRoughness.setBaseColorFactor(colorString);
 });
 </script>
             </template>
@@ -533,7 +527,7 @@ <h2 class="demo-title">Materials API</h2>
   readonly emissiveFactor: RGB;
   readonly pbrMetallicRoughness: PBRMetallicRoughness;
 
-  setEmissiveFactor(rgb: RGB): void;
+  setEmissiveFactor(rgb: RGB|string): void;
   setAlphaCutoff(cutoff: number): void;
   getAlphaCutoff(): number;
   setDoubleSided(doubleSided: boolean): void;
@@ -549,7 +543,7 @@ <h2 class="demo-title">Materials API</h2>
   readonly baseColorTexture: TextureInfo|null;
   readonly metallicRoughnessTexture: TextureInfo|null;
 
-  setBaseColorFactor(rgba: RGBA): void;
+  setBaseColorFactor(rgba: RGBA|string): void;
   setMetallicFactor(value: number): void;
   setRoughnessFactor(value: number): void;
 }

packages/space-opera/src/components/materials_panel/materials_panel.ts

@@ -229,11 +229,6 @@ export class MaterialPanel extends ConnectedLitElement {
                                1.055 * (Math.pow(val, 0.41666)) - 0.055;
   }
 
-  srgbToLinear(val: number): number {
-    return (val < 0.04045) ? val * 0.0773993808 :
-                             Math.pow(val * 0.9478672986 + 0.0521327014, 2.4);
-  }
-
   /* Interpolate base color as curr approaches duration */
   getInterpolatedColor(original: RGBA, curr: number, duration: number): RGBA {
     const INTERP_COLOR = [0, 0, 0];
@@ -262,8 +257,9 @@ export class MaterialPanel extends ConnectedLitElement {
   // Logic for interpolating from red emissive factor to the original.
   interpolateMaterial() {
     this.isInterpolating = true;
-    const originalBaseColor = this.selectedBaseColor;
-    const originalEmissiveFactor = this.selectedEmissiveFactor;
+    const originalBaseColor =
+        this.getMaterial().pbrMetallicRoughness.baseColorFactor;
+    const originalEmissiveFactor = this.getMaterial().emissiveFactor;
 
     let start = -1;
     const DURATION = 500;  // in milliseconds
@@ -613,32 +609,6 @@ export class MaterialPanel extends ConnectedLitElement {
     }
   };
 
-  get selectedBaseColor(): RGBA {
-    const alphaFactor =
-        this.getMaterial().pbrMetallicRoughness.baseColorFactor[3];
-    const selectedColor = color.hexToRgb(this.baseColorPicker.selectedColorHex);
-    // color.hexToRgb returns RGB vals from 0-255, but glTF expects a val from
-    // 0-1.
-    return [
-      this.srgbToLinear(selectedColor[0] / 255),
-      this.srgbToLinear(selectedColor[1] / 255),
-      this.srgbToLinear(selectedColor[2] / 255),
-      alphaFactor
-    ];
-  }
-
-  get selectedEmissiveFactor(): RGB {
-    const selectedColor =
-        color.hexToRgb(this.emissiveFactorPicker.selectedColorHex);
-    // color.hexToRgb returns RGB vals from 0-255, but glTF expects a val from
-    // 0-1.
-    return [
-      this.srgbToLinear(selectedColor[0] / 255),
-      this.srgbToLinear(selectedColor[1] / 255),
-      this.srgbToLinear(selectedColor[2] / 255)
-    ];
-  }
-
   get selectedRoughnessFactor(): number {
     return checkFinite(Number(this.roughnessFactorSlider.value));
   }
@@ -689,7 +659,8 @@ export class MaterialPanel extends ConnectedLitElement {
   onBaseColorChange() {
     const material = this.getMaterialVariant();
 
-    material.pbrMetallicRoughness.setBaseColorFactor(this.selectedBaseColor);
+    material.pbrMetallicRoughness.setBaseColorFactor(
+        this.baseColorPicker.selectedColorHex);
 
     reduxStore.dispatch(dispatchModelDirty());
   }
@@ -815,7 +786,8 @@ export class MaterialPanel extends ConnectedLitElement {
   }
 
   onEmissiveFactorChanged() {
-    this.getMaterialVariant().setEmissiveFactor(this.selectedEmissiveFactor);
+    this.getMaterialVariant().setEmissiveFactor(
+        this.emissiveFactorPicker.selectedColorHex);
     reduxStore.dispatch(dispatchModelDirty());
   }
 
@@ -850,7 +822,7 @@ export class MaterialPanel extends ConnectedLitElement {
 
   onAlphaFactorChange() {
     const material = this.getMaterialVariant();
-    const rgba = this.selectedBaseColor;
+    const rgba = this.getMaterial().pbrMetallicRoughness.baseColorFactor;
     rgba[3] = this.alphaFactorSlider.value;
     material.pbrMetallicRoughness.setBaseColorFactor(rgba);
     reduxStore.dispatch(dispatchModelDirty());

packages/space-opera/src/test/materials_panel/materials_panel_test.ts

@@ -79,13 +79,13 @@ describe('material panel test', () => {
      async () => {
        panel.selectedMaterialIndex = 0;
        await panel.updateComplete;
-       expect(panel.selectedBaseColor).toEqual([1, 0, 1, 1]);
+       expect(panel.baseColorPicker.selectedColorHex).toEqual('#ff00ff');
        expect(panel.selectedRoughnessFactor).toEqual(0.2);
        expect(panel.selectedMetallicFactor).toEqual(1);
 
        panel.selectedMaterialIndex = 1;
        await panel.updateComplete;
-       expect(panel.selectedBaseColor).toEqual([1, 1, 0, 1]);
+       expect(panel.baseColorPicker.selectedColorHex).toEqual('#ffff00');
        expect(panel.selectedRoughnessFactor).toEqual(1);
        expect(panel.selectedMetallicFactor).toEqual(1);
      });