m-label emissive attributes (#186)

e2e-tests/src/m-label-emissive-test.html

@@ -0,0 +1,76 @@
+<m-label
+  content="No emissive"
+  x="-7"
+  y="6"
+  width="6"
+  height="1.2"
+  color="black"
+  font-color="#00ff41"
+  font-size="85"
+  alignment="center"
+></m-label>
+
+<m-label
+  content="emissive=0"
+  x="0"
+  y="6"
+  width="6"
+  height="1.2"
+  color="black"
+  font-color="#00ff41"
+  font-size="85"
+  alignment="center"
+  emissive="0"
+></m-label>
+
+<m-label
+  content="emissive=1"
+  x="7"
+  y="6"
+  width="6"
+  height="1.2"
+  color="black"
+  font-color="#00ff41"
+  font-size="85"
+  alignment="center"
+  emissive="1"
+></m-label>
+
+<m-label
+  content="emissive=0.1"
+  x="-7"
+  y="4"
+  width="6"
+  height="1.2"
+  color="black"
+  font-color="#00ff41"
+  font-size="85"
+  alignment="center"
+  emissive="0.1"
+></m-label>
+
+<m-label
+  content="emissive=2"
+  x="0"
+  y="4"
+  width="6"
+  height="1.2"
+  color="black"
+  font-color="#00ff41"
+  font-size="85"
+  alignment="center"
+  emissive="2"
+></m-label>
+
+<m-label
+  content="emissive=5"
+  x="7"
+  y="4"
+  width="6"
+  height="1.2"
+  color="black"
+  font-color="#00ff41"
+  font-size="85"
+  alignment="center"
+  emissive="5"
+></m-label>

e2e-tests/test/m-label-emissive.test.ts

@@ -0,0 +1,17 @@
+import { takeAndCompareScreenshot } from "./testing-utils";
+
+describe("m-label-emissive", () => {
+  test("label emissive", async () => {
+    const page = await __BROWSER_GLOBAL__.newPage();
+
+    await page.setViewport({ width: 1024, height: 1024 });
+
+    await page.goto("http://localhost:7079/m-label-emissive-test.html/reset");
+
+    await page.waitForSelector("m-label");
+
+    await takeAndCompareScreenshot(page);
+
+    await page.close();
+  }, 60000);
+});

e2e-tests/test/m-video-emissive.test.ts

@@ -1,6 +1,6 @@
 import { setDocumentTime, takeAndCompareScreenshot } from "./testing-utils";
 
-describe("m-video", () => {
+describe("m-video-emissive", () => {
   test("emissive property of videos", async () => {
     const page = await __BROWSER_GLOBAL__.newPage();
 

packages/mml-web/src/elements/Label.ts

@@ -28,6 +28,7 @@ const defaultLabelPadding = 8;
 const defaultLabelWidth = 1;
 const defaultLabelHeight = 1;
 const defaultLabelCastShadows = true;
+const defaultEmissive = 0;
 
 export class Label extends TransformableElement {
   static tagName = "m-label";
@@ -95,6 +96,7 @@ export class Label extends TransformableElement {
     color: defaultLabelColor,
     fontColor: defaultFontColor,
     castShadows: defaultLabelCastShadows,
+    emissive: defaultEmissive as number,
   };
   private mesh: THREE.Mesh<THREE.PlaneGeometry, THREE.Material | Array<THREE.Material>>;
   private material: THREE.MeshStandardMaterial | null = null;
@@ -152,6 +154,10 @@ export class Label extends TransformableElement {
       instance.props.castShadows = parseBoolAttribute(newValue, defaultLabelCastShadows);
       instance.mesh.castShadow = instance.props.castShadows;
     },
+    emissive: (instance, newValue) => {
+      instance.props.emissive = parseFloatAttribute(newValue, defaultEmissive);
+      instance.updateMaterialEmissiveIntensity();
+    },
   });
 
   protected enable() {
@@ -234,6 +240,23 @@ export class Label extends TransformableElement {
     super.disconnectedCallback();
   }
 
+  private updateMaterialEmissiveIntensity() {
+    if (this.material) {
+      const map = this.material.map as THREE.Texture;
+      if (this.props.emissive > 0) {
+        this.material.emissive = new THREE.Color(0xffffff);
+        this.material.emissiveMap = map;
+        this.material.emissiveIntensity = this.props.emissive;
+        this.material.needsUpdate = true;
+      } else {
+        this.material.emissive = new THREE.Color(0x000000);
+        this.material.emissiveMap = null;
+        this.material.emissiveIntensity = 1;
+        this.material.needsUpdate = true;
+      }
+    }
+  }
+
   private redrawText() {
     if (!this.material) {
       return;
@@ -243,7 +266,7 @@ export class Label extends TransformableElement {
     }
     const { texture, width, height } = THREECanvasTextTexture(this.props.content, {
       bold: true,
-      fontSize: this.props.fontSize,
+      fontSize: this.props.fontSize * 2,
       paddingPx: this.props.padding,
       textColorRGB255A1: {
         r: this.props.fontColor.r * 255,
@@ -258,16 +281,17 @@ export class Label extends TransformableElement {
         a: 1.0,
       },
       dimensions: {
-        width: this.props.width * 100,
-        height: this.props.height * 100,
+        width: this.props.width * 200,
+        height: this.props.height * 200,
       },
       alignment: this.props.alignment,
     });
 
     this.material.map = texture;
     this.material.needsUpdate = true;
+    this.updateMaterialEmissiveIntensity();
 
-    this.mesh.scale.x = width / 100;
-    this.mesh.scale.y = height / 100;
+    this.mesh.scale.x = width / 200;
+    this.mesh.scale.y = height / 200;
   }
 }

packages/mml-web/src/elements/Video.ts

@@ -254,9 +254,7 @@ export class Video extends TransformableElement {
         material,
         videoTexture,
       };
-      if (this.props.emissive > 0) {
-        this.updateMaterialEmissiveIntensity();
-      }
+      this.updateMaterialEmissiveIntensity();
       this.container.add(audio);
     }
 

packages/schema/src/schema-src/mml.xsd

@@ -1077,6 +1077,13 @@
               </xs:documentation>
             </xs:annotation>
           </xs:attribute>
+          <xs:attribute name="emissive" type="xs:float">
+            <xs:annotation>
+              <xs:documentation>
+                The emissiveness strength of the label (how much perceived light it will emit). Default value is 0.
+              </xs:documentation>
+            </xs:annotation>
+          </xs:attribute>
           <xs:attribute name="font-size" type="xs:float">
             <xs:annotation>
               <xs:documentation>