@mml-io/3d-web-client-core 0.23.2 → 0.23.3

package/build/character/instancing/CharacterColourSamplingUtils.d.ts

@@ -1,4 +1,4 @@
-import { Color, SkinnedMesh, Object3D } from "three";
+import { Color, Object3D } from "three";
 import { ColorPartName } from "../CharacterModel";
 import { InstancedMesh2 } from "./vendor/";
 export type ColorSamplingOptions = {
@@ -9,6 +9,6 @@ export type ColorSamplingOptions = {
     };
     debug?: boolean;
 };
-export declare function captureCharacterColors(characterMesh: SkinnedMesh, options: ColorSamplingOptions): Map<ColorPartName, Color>;
+export declare function captureCharacterColors(characterMesh: Object3D, options: ColorSamplingOptions): Map<ColorPartName, Color>;
 export declare function captureCharacterColorsFromObject3D(object3D: Object3D, options: ColorSamplingOptions): Map<ColorPartName, Color>;
 export declare function updateDebugTextureCanvas(instancedMesh: InstancedMesh2): void;

package/build/index.js

@@ -1407,7 +1407,7 @@ import {
   Group,
   LoopRepeat,
   Mesh,
-  SkinnedMesh as SkinnedMesh3,
+  SkinnedMesh as SkinnedMesh2,
   Vector3 as Vector33
 } from "three";
 
@@ -1506,6 +1506,7 @@ ${before}
 
 // src/tweakpane/blades/characterFolder.ts
 var characterValues = {
+  overrideMaterialParams: false,
   metalness: 0.2,
   roughness: 0.8,
   emissive: { r: 1, g: 1, b: 1 },
@@ -1520,25 +1521,45 @@ var characterOptions = {
 };
 var CharacterFolder = class {
   folder;
+  materialParamsFolder;
   constructor(parentFolder, expand = false) {
     this.folder = parentFolder.addFolder({ title: "characterMaterial", expanded: expand });
-    this.folder.addBinding(characterValues, "metalness", characterOptions.metalness);
-    this.folder.addBinding(characterValues, "roughness", characterOptions.roughness);
-    this.folder.addBinding(characterValues, "emissive", {
+    this.folder.addBinding(characterValues, "overrideMaterialParams", {
+      label: "override material params"
+    });
+    this.materialParamsFolder = this.folder.addFolder({
+      title: "Material Parameters",
+      expanded: true
+    });
+    this.materialParamsFolder.addBinding(characterValues, "metalness", characterOptions.metalness);
+    this.materialParamsFolder.addBinding(characterValues, "roughness", characterOptions.roughness);
+    this.materialParamsFolder.addBinding(characterValues, "emissive", {
       color: { type: "float" }
     });
-    this.folder.addBinding(
+    this.materialParamsFolder.addBinding(
       characterValues,
       "emissiveIntensity",
       characterOptions.emissiveIntensity
     );
-    this.folder.addBinding(characterValues, "envMapIntensity", characterOptions.envMapIntensity);
+    this.materialParamsFolder.addBinding(
+      characterValues,
+      "envMapIntensity",
+      characterOptions.envMapIntensity
+    );
+    this.updateMaterialParamsVisibility();
+  }
+  updateMaterialParamsVisibility() {
+    this.materialParamsFolder.hidden = !characterValues.overrideMaterialParams;
   }
   setupChangeEvent() {
     this.folder.on("change", (e) => {
       const target = e.target.key;
       if (!target) return;
       switch (target) {
+        case "overrideMaterialParams": {
+          this.updateMaterialParamsVisibility();
+          break;
+        }
         case "emissive": {
           const value = e.value;
           characterValues.emissive = {
@@ -1666,15 +1687,17 @@ var CharacterMaterial = class extends MeshStandardMaterial {
         this.opacity = this.currentAlpha;
       }
     }
-    this.metalness = characterValues.metalness;
-    this.roughness = characterValues.roughness;
-    this.emissive = new Color().setRGB(
-      characterValues.emissive.r,
-      characterValues.emissive.g,
-      characterValues.emissive.b
-    );
-    this.emissiveIntensity = characterValues.emissiveIntensity;
-    this.envMapIntensity = characterValues.envMapIntensity;
+    if (characterValues.overrideMaterialParams) {
+      this.metalness = characterValues.metalness;
+      this.roughness = characterValues.roughness;
+      this.emissive = new Color().setRGB(
+        characterValues.emissive.r,
+        characterValues.emissive.g,
+        characterValues.emissive.b
+      );
+      this.emissiveIntensity = characterValues.emissiveIntensity;
+      this.envMapIntensity = characterValues.envMapIntensity;
+    }
   }
 };
 
@@ -1698,155 +1721,13 @@ import {
   Color as Color2,
   OrthographicCamera,
   Scene,
-  SkinnedMesh as SkinnedMesh2,
+  SkinnedMesh,
   Vector2,
   Vector3 as Vector32,
   WebGLRenderer,
   WebGLRenderTarget
 } from "three";
 import * as SkeletonUtils from "three/examples/jsm/utils/SkeletonUtils.js";
-
-// src/character/instancing/CharacterInstancingUtils.ts
-import { BufferAttribute, SkinnedMesh } from "three";
-import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
-function mergeSkinnedMeshes(skinnedMeshes, debug) {
-  const geometries = [];
-  const materials = [];
-  const skeleton = skinnedMeshes[0].skeleton;
-  for (const skinnedMesh of skinnedMeshes) {
-    const geometry = skinnedMesh.geometry.clone();
-    const materialIndex = materials.length;
-    if (Array.isArray(skinnedMesh.material)) {
-      materials.push(...skinnedMesh.material);
-      for (let i = 0; i < skinnedMesh.material.length; i++) {
-        geometry.addGroup(
-          0,
-          geometry.index ? geometry.index.count : geometry.attributes.position.count,
-          materialIndex + i
-        );
-      }
-    } else {
-      materials.push(skinnedMesh.material);
-      geometry.addGroup(
-        0,
-        geometry.index ? geometry.index.count : geometry.attributes.position.count,
-        materialIndex
-      );
-    }
-    geometries.push(geometry);
-  }
-  const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries, true);
-  if (!mergedGeometry) {
-    throw new Error("Failed to merge geometries");
-  }
-  const mergedMesh = new SkinnedMesh(mergedGeometry, materials);
-  mergedMesh.skeleton = skeleton;
-  mergedMesh.bindMatrix.copy(skinnedMeshes[0].bindMatrix);
-  mergedMesh.bindMatrixInverse.copy(skinnedMeshes[0].bindMatrixInverse);
-  mergedMesh.bind(skeleton, mergedMesh.bindMatrix);
-  if (debug) {
-    console.log(`Merged into single mesh with ${materials.length} materials`);
-  }
-  addVertexColorsToGeometry(mergedGeometry, materials, debug);
-  return mergedMesh;
-}
-function validateAndCleanSkeleton(skinnedMesh) {
-  const skeleton = skinnedMesh.skeleton;
-  const nullBoneIndices = [];
-  for (let i = 0; i < skeleton.bones.length; i++) {
-    if (!skeleton.bones[i]) {
-      nullBoneIndices.push(i);
-    }
-  }
-  if (nullBoneIndices.length > 0) {
-    skeleton.bones = skeleton.bones.filter((bone) => bone !== null && bone !== void 0);
-    skeleton.update();
-  }
-}
-function addVertexColorsToGeometry(geometry, materials, debug) {
-  const positionAttribute = geometry.getAttribute("position");
-  if (!positionAttribute) {
-    console.error("No position attribute found in geometry");
-    return;
-  }
-  const vertexCount = positionAttribute.count;
-  if (debug) {
-    console.log(`Geometry has ${vertexCount} vertices`);
-  }
-  const colors = new Float32Array(vertexCount * 3);
-  for (let i = 0; i < vertexCount; i++) {
-    colors[i * 3] = 1;
-    colors[i * 3 + 1] = 1;
-    colors[i * 3 + 2] = 1;
-  }
-  const materialColorCodes = {
-    // bin material IDs to be replaced by the final colors on the GPU
-    hair: [0, 0, 0],
-    shirt_short: [0, 0, 1],
-    shirt_long: [0, 1, 0],
-    pants_short: [0, 1, 1],
-    pants_long: [1, 0, 0],
-    shoes: [1, 0, 1],
-    skin: [1, 1, 0],
-    lips: [1, 1, 1],
-    eyes_black: [0.5, 0, 0],
-    eyes_white: [0, 0.5, 0]
-  };
-  if (debug) {
-    console.log("Geometry groups:", geometry.groups);
-    console.log(
-      "Materials:",
-      materials.map((m) => m.name)
-    );
-  }
-  if (geometry.groups && geometry.groups.length > 0) {
-    geometry.groups.forEach((group, groupIndex) => {
-      const material = materials[group.materialIndex || groupIndex];
-      const materialName = (material == null ? void 0 : material.name) || `material_${groupIndex}`;
-      if (debug) {
-        console.log(
-          `Processing group ${groupIndex}: material "${materialName}", start: ${group.start}, count: ${group.count}`
-        );
-      }
-      const materialColor = materialColorCodes[materialName] || [
-        1,
-        1,
-        1
-      ];
-      if (debug) {
-        console.log(
-          `Using ID color [${materialColor.join(", ")}] for material "${materialName}" (${materialColor[0] === 1 && materialColor[1] === 1 && materialColor[2] === 0 ? "YELLOW=SKIN" : materialColor[0] === 0 && materialColor[1] === 0 && materialColor[2] === 1 ? "BLUE=SHIRT" : "OTHER"})`
-        );
-      }
-      const indexAttribute = geometry.getIndex();
-      if (indexAttribute) {
-        for (let i = group.start; i < group.start + group.count; i++) {
-          const vertexIndex = indexAttribute.getX(i);
-          colors[vertexIndex * 3] = materialColor[0];
-          colors[vertexIndex * 3 + 1] = materialColor[1];
-          colors[vertexIndex * 3 + 2] = materialColor[2];
-        }
-      } else {
-        const startVertex = group.start / 3;
-        const vertexCount2 = group.count / 3;
-        for (let i = 0; i < vertexCount2; i++) {
-          const vertexIndex = startVertex + i;
-          colors[vertexIndex * 3] = materialColor[0];
-          colors[vertexIndex * 3 + 1] = materialColor[1];
-          colors[vertexIndex * 3 + 2] = materialColor[2];
-        }
-      }
-    });
-  } else {
-    console.warn("No geometry groups found, using single material coloring");
-  }
-  geometry.setAttribute("color", new BufferAttribute(colors, 3));
-  if (debug) {
-    console.log(`Added per-material vertex colors to ${vertexCount} vertices`);
-  }
-}
-
-// src/character/instancing/CharacterColourSamplingUtils.ts
 function listAllBoneNames(obj) {
   const boneNames = [];
   if (!obj) {
@@ -1997,26 +1878,14 @@ function captureCharacterColorsFromObject3D(object3D, options) {
   clone3.scale.set(1, 1, 1);
   const skinnedMeshes = [];
   clone3.traverse((child) => {
-    if (child instanceof SkinnedMesh2 || child.isSkinnedMesh) {
-      skinnedMeshes.push(child);
+    if (child instanceof SkinnedMesh || child.isSkinnedMesh) {
+      const skinnedMesh = child;
+      skinnedMesh.skeleton.pose();
+      skinnedMesh.skeleton.update();
+      skinnedMesh.updateMatrixWorld(true);
     }
   });
-  if (skinnedMeshes.length === 0) {
-    console.warn("No SkinnedMesh objects found in Object3D hierarchy");
-    return /* @__PURE__ */ new Map();
-  }
-  let skinnedMesh;
-  if (skinnedMeshes.length === 1) {
-    skinnedMesh = skinnedMeshes[0];
-  } else {
-    skinnedMesh = mergeSkinnedMeshes(skinnedMeshes);
-  }
-  const skeleton = skinnedMesh.skeleton;
-  skeleton.pose();
-  skeleton.update();
-  skinnedMesh.updateMatrixWorld(true);
-  validateAndCleanSkeleton(skinnedMesh);
-  return captureCharacterColors(skinnedMesh, options);
+  return captureCharacterColors(object3D, options);
 }
 function findBoneCenter(bone) {
   const boneStart = new Vector32();
@@ -2031,9 +1900,20 @@ function findBoneCenter(bone) {
 }
 function getBoneRegionsForColorSampling(characterMesh, camera, renderSize, circularSamplingRadius, topDownSamplingSize, debug) {
   const regions = [];
+  let firstSkinnedMesh = null;
+  characterMesh.traverse((child) => {
+    if (!firstSkinnedMesh && (child instanceof SkinnedMesh || child.isSkinnedMesh)) {
+      firstSkinnedMesh = child;
+    }
+  });
+  if (!firstSkinnedMesh) {
+    console.warn("No SkinnedMesh objects found in Object3D hierarchy");
+    return regions;
+  }
+  const skinnedMesh = firstSkinnedMesh;
   if (debug) {
     console.log("Available bones:");
-    console.table(listAllBoneNames(characterMesh));
+    console.table(listAllBoneNames(skinnedMesh));
   }
   const boneTargets = [
     { name: "Face/Chin", boneName: "neck_02" },
@@ -2052,7 +1932,7 @@ function getBoneRegionsForColorSampling(characterMesh, camera, renderSize, circu
   ];
   const screenPos = new Vector32();
   for (const target of boneTargets) {
-    const bone = characterMesh.skeleton.bones.find(
+    const bone = skinnedMesh.skeleton.bones.find(
       (child) => child.name === target.boneName
     );
     if (bone) {
@@ -2646,7 +2526,7 @@ var CharacterModel = class {
       this.animationMixer = null;
     }
     (_a = this.mesh) == null ? void 0 : _a.traverse((child) => {
-      if (child instanceof SkinnedMesh3 || child.isSkinnedMesh) {
+      if (child instanceof SkinnedMesh2 || child.isSkinnedMesh) {
         const asSkinnedMesh = child;
         if (asSkinnedMesh.geometry) {
           asSkinnedMesh.geometry.dispose();
@@ -3368,6 +3248,146 @@ function getTrackTypeFromName(trackName) {
   return NumberKeyframeTrack;
 }
 
+// src/character/instancing/CharacterInstancingUtils.ts
+import { BufferAttribute, SkinnedMesh as SkinnedMesh3 } from "three";
+import * as BufferGeometryUtils from "three/examples/jsm/utils/BufferGeometryUtils.js";
+function mergeSkinnedMeshes(skinnedMeshes, debug) {
+  const geometries = [];
+  const materials = [];
+  const skeleton = skinnedMeshes[0].skeleton;
+  for (const skinnedMesh of skinnedMeshes) {
+    const geometry = skinnedMesh.geometry.clone();
+    const materialIndex = materials.length;
+    if (Array.isArray(skinnedMesh.material)) {
+      materials.push(...skinnedMesh.material);
+      for (let i = 0; i < skinnedMesh.material.length; i++) {
+        geometry.addGroup(
+          0,
+          geometry.index ? geometry.index.count : geometry.attributes.position.count,
+          materialIndex + i
+        );
+      }
+    } else {
+      materials.push(skinnedMesh.material);
+      geometry.addGroup(
+        0,
+        geometry.index ? geometry.index.count : geometry.attributes.position.count,
+        materialIndex
+      );
+    }
+    geometries.push(geometry);
+  }
+  const mergedGeometry = BufferGeometryUtils.mergeGeometries(geometries, true);
+  if (!mergedGeometry) {
+    throw new Error("Failed to merge geometries");
+  }
+  const mergedMesh = new SkinnedMesh3(mergedGeometry, materials);
+  mergedMesh.skeleton = skeleton;
+  mergedMesh.bindMatrix.copy(skinnedMeshes[0].bindMatrix);
+  mergedMesh.bindMatrixInverse.copy(skinnedMeshes[0].bindMatrixInverse);
+  mergedMesh.bind(skeleton, mergedMesh.bindMatrix);
+  if (debug) {
+    console.log(`Merged into single mesh with ${materials.length} materials`);
+  }
+  addVertexColorsToGeometry(mergedGeometry, materials, debug);
+  return mergedMesh;
+}
+function validateAndCleanSkeleton(skinnedMesh) {
+  const skeleton = skinnedMesh.skeleton;
+  const nullBoneIndices = [];
+  for (let i = 0; i < skeleton.bones.length; i++) {
+    if (!skeleton.bones[i]) {
+      nullBoneIndices.push(i);
+    }
+  }
+  if (nullBoneIndices.length > 0) {
+    skeleton.bones = skeleton.bones.filter((bone) => bone !== null && bone !== void 0);
+    skeleton.update();
+  }
+}
+function addVertexColorsToGeometry(geometry, materials, debug) {
+  const positionAttribute = geometry.getAttribute("position");
+  if (!positionAttribute) {
+    console.error("No position attribute found in geometry");
+    return;
+  }
+  const vertexCount = positionAttribute.count;
+  if (debug) {
+    console.log(`Geometry has ${vertexCount} vertices`);
+  }
+  const colors = new Float32Array(vertexCount * 3);
+  for (let i = 0; i < vertexCount; i++) {
+    colors[i * 3] = 1;
+    colors[i * 3 + 1] = 1;
+    colors[i * 3 + 2] = 1;
+  }
+  const materialColorCodes = {
+    // bin material IDs to be replaced by the final colors on the GPU
+    hair: [0, 0, 0],
+    shirt_short: [0, 0, 1],
+    shirt_long: [0, 1, 0],
+    pants_short: [0, 1, 1],
+    pants_long: [1, 0, 0],
+    shoes: [1, 0, 1],
+    skin: [1, 1, 0],
+    lips: [1, 1, 1],
+    eyes_black: [0.5, 0, 0],
+    eyes_white: [0, 0.5, 0]
+  };
+  if (debug) {
+    console.log("Geometry groups:", geometry.groups);
+    console.log(
+      "Materials:",
+      materials.map((m) => m.name)
+    );
+  }
+  if (geometry.groups && geometry.groups.length > 0) {
+    geometry.groups.forEach((group, groupIndex) => {
+      const material = materials[group.materialIndex || groupIndex];
+      const materialName = (material == null ? void 0 : material.name) || `material_${groupIndex}`;
+      if (debug) {
+        console.log(
+          `Processing group ${groupIndex}: material "${materialName}", start: ${group.start}, count: ${group.count}`
+        );
+      }
+      const materialColor = materialColorCodes[materialName] || [
+        1,
+        1,
+        1
+      ];
+      if (debug) {
+        console.log(
+          `Using ID color [${materialColor.join(", ")}] for material "${materialName}" (${materialColor[0] === 1 && materialColor[1] === 1 && materialColor[2] === 0 ? "YELLOW=SKIN" : materialColor[0] === 0 && materialColor[1] === 0 && materialColor[2] === 1 ? "BLUE=SHIRT" : "OTHER"})`
+        );
+      }
+      const indexAttribute = geometry.getIndex();
+      if (indexAttribute) {
+        for (let i = group.start; i < group.start + group.count; i++) {
+          const vertexIndex = indexAttribute.getX(i);
+          colors[vertexIndex * 3] = materialColor[0];
+          colors[vertexIndex * 3 + 1] = materialColor[1];
+          colors[vertexIndex * 3 + 2] = materialColor[2];
+        }
+      } else {
+        const startVertex = group.start / 3;
+        const vertexCount2 = group.count / 3;
+        for (let i = 0; i < vertexCount2; i++) {
+          const vertexIndex = startVertex + i;
+          colors[vertexIndex * 3] = materialColor[0];
+          colors[vertexIndex * 3 + 1] = materialColor[1];
+          colors[vertexIndex * 3 + 2] = materialColor[2];
+        }
+      }
+    });
+  } else {
+    console.warn("No geometry groups found, using single material coloring");
+  }
+  geometry.setAttribute("color", new BufferAttribute(colors, 3));
+  if (debug) {
+    console.log(`Added per-material vertex colors to ${vertexCount} vertices`);
+  }
+}
+
 // src/character/instancing/vendor/core/InstancedEntity.ts
 import {
   Euler,
@@ -9214,7 +9234,7 @@ var sunValues = {
 var sunOptions = {
   sunPosition: {
     sunAzimuthalAngle: { min: 0, max: 360, step: 1 },
-    sunPolarAngle: { min: -90, max: 90, step: 1 }
+    sunPolarAngle: { min: -95, max: 95, step: 1 }
   },
   sunIntensity: { min: 0, max: 10, step: 0.1 },
   skyTurbidity: { min: 1, max: 30, step: 0.1 },
@@ -9225,7 +9245,7 @@ var sunOptions = {
 var envValues = {
   skyboxAzimuthalAngle: 0,
   skyboxPolarAngle: 0,
-  envMapIntensity: 0.21,
+  envMapIntensity: 0.6,
   skyboxIntensity: 0.9,
   skyboxBlurriness: 0,
   ambientLight: {
@@ -11494,10 +11514,11 @@ var PostProcessingFolder = class {
 };
 
 // src/tweakpane/blades/rendererFolder.ts
+import { NoToneMapping } from "three";
 var rendererValues = {
   shadowMap: 2,
-  toneMapping: 5,
-  exposure: 2.1
+  toneMapping: 4,
+  exposure: 0.75
 };
 var rendererOptions = {
   shadowMap: { min: 0, max: 2, step: 1 },
@@ -11556,6 +11577,7 @@ var RendererFolder = class {
           const value = e.value;
           toneMappingFolder.hidden = e.value !== 5;
           toneMappingPass.enabled = e.value === 5 ? true : false;
+          renderer.toneMapping = e.value === 5 ? NoToneMapping : e.value;
           setToneMappingType(e.value);
           break;
         case "exposure":
@@ -11838,6 +11860,7 @@ var TweakPane = class {
   }
   setupCharacterController(localController) {
     this.characterControls.setupChangeEvent(localController);
+    this.character.setupChangeEvent();
   }
   setupPostProcessingPane(postProcessingManager) {
     this.postProcessingFolder.setupChangeEvent(postProcessingManager);
@@ -11934,7 +11957,7 @@ import {
   SRGBColorSpace,
   Vector3 as Vector316,
   WebGLCubeRenderTarget,
-  WebGLRenderer as WebGLRenderer9
+  WebGLRenderer as WebGLRenderer10
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 import { Sky } from "three/examples/jsm/objects/Sky.js";
@@ -12066,7 +12089,7 @@ var Composer = class {
     this.postPostScene = new Scene6();
     this.spawnSun = spawnSun;
     this.postProcessingEnabled = postProcessingEnabled;
-    this.renderer = new WebGLRenderer9({
+    this.renderer = new WebGLRenderer10({
       powerPreference: "high-performance",
       antialias: true
     });