visual improvements (#108)

* updates esbuild-css-modules-plugin devDependency to fix build on windows

* updates HDRi file

* packages install

* renames bot main material to be identified as color replaceable

* updates example floor material

* updates mmlCharacterString doc/example to existing example model

* updates clone traversal so socketed m-model tags cast and receive shadows

* passes instances to CharacterModel that are necessary for the custom character material

* removes the camera targetOffset as it is now redundant due to improved 1st person view

* simplifies custom character material and retain all original mapped textures

* updates CharacterMaterial and fixes socketed models with mapped textures

* updates rendering and environment parameters to improve MML indoor lighting

* updates model for socket example

* removes redundant HDR files

* updates multi-web-client to use the new HDR file

* updates HDR path on web-avatar-client

example/local-multi-web-client/src/LocalAvatarClient.ts

@@ -15,7 +15,7 @@ import { EditableNetworkedDOM, NetworkedDOM } from "@mml-io/networked-dom-docume
 import { MMLWebRunnerClient } from "mml-web-runner";
 import { AudioListener, Euler, Scene, Vector3 } from "three";
 
-import hdrUrl from "../../assets/hdr/industrial_sunset_2k.hdr";
+import hdrUrl from "../../assets/hdr/puresky_2k.hdr";
 import airAnimationFileUrl from "../../assets/models/anim_air.glb";
 import idleAnimationFileUrl from "../../assets/models/anim_idle.glb";
 import jogAnimationFileUrl from "../../assets/models/anim_jog.glb";

example/web-avatar-client/src/AvatarEditor.tsx

@@ -17,7 +17,7 @@ import React, { useCallback, useEffect, useState } from "react";
 import { Group, Object3D } from "three";
 
 import idleAnimationURL from "../../assets/avatar/anims/AS_Andor_Stand_Idle.glb";
-import hdrURL from "../../assets/hdr/industrial_sunset_2k.hdr";
+import hdrURL from "../../assets/hdr/puresky_2k.hdr";
 
 type BodyPartTypes = "fullBody" | "head" | "upperBody" | "lowerBody" | "feet";
 

example/web-client/src/Room.ts

@@ -25,10 +25,10 @@ export class Room extends Group {
     super();
 
     this.floorMaterial = new MeshStandardMaterial({
-      color: 0xbcbcbc,
+      color: 0xffffff,
       side: FrontSide,
-      metalness: 0.04,
-      roughness: 0.49,
+      metalness: 0.05,
+      roughness: 0.95,
     });
     this.floorMesh = new Mesh(this.floorGeometry, this.floorMaterial);
     this.floorMesh.receiveShadow = true;

example/web-client/src/index.ts

@@ -29,7 +29,7 @@ import {
 } from "mml-web";
 import { AudioListener, Euler, Scene, Vector3 } from "three";
 
-import hdrUrl from "../../assets/hdr/industrial_sunset_2k.hdr";
+import hdrUrl from "../../assets/hdr/puresky_2k.hdr";
 import airAnimationFileUrl from "../../assets/models/anim_air.glb";
 import idleAnimationFileUrl from "../../assets/models/anim_idle.glb";
 import jogAnimationFileUrl from "../../assets/models/anim_jog.glb";
@@ -55,10 +55,10 @@ const characterDescription: CharacterDescription = {
   // Option 3 - Use an MML Character from a string
   // mmlCharacterString: `
   // <m-character src="/assets/models/bot.glb">
-  //   <m-model src="/assets/models/ears.glb"
+  //   <m-model src="/assets/models/hat.glb"
   //     socket="head"
-  //     x="0.077" y="0" z="0.04"
-  //     sx="1.1" sy="1.1" sz="1.1"
+  //     x="0.03" y="0" z="0.0"
+  //     sx="1.03" sy="1.03" sz="1.03"
   //     rz="-90"
   //   ></m-model>
   // </m-character>

package.json

@@ -24,16 +24,14 @@
   ],
   "devDependencies": {
     "@types/jest": "29.5.11",
+    "@types/jju": "^1.4.5",
+    "@types/tmp": "^0.2.6",
     "@typescript-eslint/eslint-plugin": "^6.20.0",
     "@typescript-eslint/parser": "^6.20.0",
     "concurrently": "^8.2.2",
     "esbuild": "0.20.0",
     "esbuild-jest": "0.5.0",
     "esbuild-plugin-copy": "2.1.1",
-    "jju": "^1.4.0",
-    "@types/jju": "^1.4.5",
-    "tmp": "^0.2.1",
-    "@types/tmp": "^0.2.6",
     "eslint": "^8.56.0",
     "eslint-config-airbnb-typescript": "^17.1.0",
     "eslint-config-prettier": "^9.1.0",
@@ -43,9 +41,11 @@
     "eslint-plugin-react-hooks": "^4.6.0",
     "jest": "29.7.0",
     "jest-environment-jsdom": "29.7.0",
+    "jju": "^1.4.0",
     "lerna": "8.0.2",
     "prettier": "^3.2.4",
     "rimraf": "^5.0.5",
+    "tmp": "^0.2.1",
     "ts-node": "^10.9.2",
     "tsx": "4.7.0",
     "typescript": "^5.3.3"

packages/3d-web-avatar-editor-ui/package.json

@@ -26,6 +26,6 @@
     "@types/node": "^20.11.13",
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
-    "esbuild-css-modules-plugin": "3.0.1"
+    "esbuild-css-modules-plugin": "3.1.0"
   }
 }

packages/3d-web-avatar/package.json

@@ -29,6 +29,6 @@
     "@types/react": "^18.2.48",
     "@types/react-dom": "^18.2.18",
     "@types/three": "0.153.0",
-    "esbuild-css-modules-plugin": "3.0.1"
+    "esbuild-css-modules-plugin": "3.1.0"
   }
 }

packages/3d-web-avatar/src/helpers/SkeletonHelpers.ts

@@ -1,4 +1,4 @@
-import { Bone, Group, Matrix4, Object3D, Skeleton, SkinnedMesh } from "three";
+import { Bone, Group, Matrix4, Mesh, Object3D, Skeleton, SkinnedMesh } from "three";
 import { GLTF } from "three/examples/jsm/loaders/GLTFLoader.js";
 import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils.js";
 
@@ -151,6 +151,10 @@ export class SkeletonHelpers {
 
     let hierarchyCheck = false;
     clone.scene!.traverse((node) => {
+      if ((node as Mesh).isMesh || (node as SkinnedMesh).isSkinnedMesh) {
+        node.castShadow = true;
+        node.receiveShadow = true;
+      }
       if (node.type === "Bone") {
         if (hierarchyCheck === false) {
           hierarchyCheck = true;

packages/3d-web-client-core/src/character/Character.ts

@@ -36,6 +36,7 @@ export class Character extends Group {
     private readonly modelLoadedCallback: () => void,
     private readonly cameraManager: CameraManager,
     private readonly composer: Composer,
+    private readonly isLocal: boolean,
   ) {
     super();
     this.tooltip = new CharacterTooltip();
@@ -48,13 +49,15 @@ export class Character extends Group {
       this.characterDescription,
       this.animationConfig,
       this.characterModelLoader,
+      this.cameraManager,
+      this.characterId,
+      this.isLocal,
     );
     await this.model.init();
     this.add(this.model.mesh!);
     if (this.speakingIndicator === null) {
       this.speakingIndicator = new CharacterSpeakingIndicator(this.composer.postPostScene);
     }
-    this.color = this.model.material.colorsCube216[this.characterId];
     this.modelLoadedCallback();
   }
 
@@ -76,11 +79,6 @@ export class Character extends Group {
         );
       }
     }
-    if (typeof this.model.material.uniforms.time !== "undefined") {
-      this.model.material.uniforms.time.value = time;
-      this.model.material.uniforms.diffuseRandomColor.value = this.color;
-      this.model.material.update();
-    }
     this.model.update(deltaTime);
   }
 

packages/3d-web-client-core/src/character/CharacterManager.ts

@@ -29,9 +29,6 @@ export class CharacterManager {
   private localController: LocalController;
   public localCharacter: Character | null = null;
 
-  private cameraOffsetTarget: number = 0;
-  private cameraOffset: number = 0;
-
   private speakingCharacters: Map<number, boolean> = new Map();
 
   public readonly group: Group;
@@ -67,6 +64,7 @@ export class CharacterManager {
       },
       this.cameraManager,
       this.composer,
+      true,
     );
     const quaternion = new Quaternion().setFromEuler(character.rotation);
     this.sendUpdate({
@@ -112,6 +110,7 @@ export class CharacterManager {
       },
       this.cameraManager,
       this.composer,
+      false,
     );
 
     this.remoteCharacters.set(id, character);
@@ -164,12 +163,12 @@ export class CharacterManager {
         this.sendUpdate(this.localController.networkState);
       }
 
-      this.cameraOffsetTarget = this.cameraManager.targetDistance <= 0.4 ? 0.13 : 0;
-      this.cameraOffset += ease(this.cameraOffsetTarget, this.cameraOffset, 0.1);
-      const targetOffset = new Vector3(0, 0, this.cameraOffset);
-      targetOffset.add(this.headTargetOffset);
-      targetOffset.applyQuaternion(this.localCharacter.quaternion);
-      this.cameraManager.setTarget(targetOffset.add(this.localCharacter.position));
+      const targetOffset = new Vector3();
+      targetOffset
+        .add(this.headTargetOffset)
+        .applyQuaternion(this.localCharacter.quaternion)
+        .add(this.localCharacter.position);
+      this.cameraManager.setTarget(targetOffset);
 
       for (const [id, update] of this.clientStates) {
         if (this.remoteCharacters.has(id) && this.speakingCharacters.has(id)) {