@mml-io/3d-web-client-core 0.0.0-experimental-78df22f-20230814 → 0.0.0-experimental-41e9cfc-20230816

package/build/character/CanvasText.d.ts

@@ -0,0 +1,32 @@
+import * as THREE from "three";
+type RGBA = {
+    r: number;
+    g: number;
+    b: number;
+    a: number;
+};
+type CanvasTextOptions = {
+    fontSize: number;
+    textColorRGB255A1: RGBA;
+    backgroundColorRGB255A1?: RGBA;
+    font?: string;
+    bold?: boolean;
+    paddingPx?: number;
+    alignment?: string;
+    dimensions?: {
+        width: number;
+        height: number;
+    };
+};
+export declare function CanvasText(message: string, options: CanvasTextOptions): HTMLCanvasElement;
+export declare function THREECanvasTextTexture(text: string, options: CanvasTextOptions): {
+    texture: THREE.Texture;
+    width: number;
+    height: number;
+};
+export declare function THREECanvasTextMaterial(text: string, options: CanvasTextOptions): {
+    material: THREE.MeshBasicMaterial;
+    width: number;
+    height: number;
+};
+export {};

package/build/character/Character.d.ts

@@ -4,6 +4,7 @@ import { CollisionsManager } from "../collisions/CollisionsManager";
 import { KeyInputManager } from "../input/KeyInputManager";
 import { TimeManager } from "../time/TimeManager";
 import { CharacterModel } from "./CharacterModel";
+import { CharacterTooltip } from "./CharacterTooltip";
 import { LocalController } from "./LocalController";
 export type CharacterDescription = {
     meshFileUrl: string;
@@ -27,6 +28,7 @@ export declare class Character {
     model: CharacterModel | null;
     color: Color;
     position: Vector3;
+    tooltip: CharacterTooltip | null;
     constructor(characterDescription: CharacterDescription, id: number, isLocal: boolean, modelLoadedCallback: () => void, collisionsManager: CollisionsManager, keyInputManager: KeyInputManager, cameraManager: CameraManager, timeManager: TimeManager);
     private load;
     update(time: number): void;

package/build/character/CharacterTooltip.d.ts

@@ -0,0 +1,17 @@
+import { Camera, Object3D } from "three";
+export declare class CharacterTooltip {
+    private texture;
+    private geometry;
+    private material;
+    private mesh;
+    private visibleOpacity;
+    private targetOpacity;
+    private fadingSpeed;
+    private secondsToFadeOut;
+    private props;
+    constructor(parentModel: Object3D);
+    private redrawText;
+    setText(text: string, temporary?: boolean): void;
+    hide(): void;
+    update(camera: Camera): void;
+}

package/build/index.js

@@ -168,7 +168,7 @@ var CameraManager = class {
 };
 
 // src/character/Character.ts
-import { Color as Color2, Vector3 as Vector34 } from "three";
+import { Color as Color3, Vector3 as Vector34 } from "three";
 
 // src/character/CharacterModel.ts
 import {
@@ -724,6 +724,247 @@ var CharacterModel = class {
   }
 };
 
+// src/character/CharacterTooltip.ts
+import {
+  Color as Color2,
+  FrontSide,
+  LinearFilter as LinearFilter2,
+  Mesh as Mesh2,
+  MeshBasicMaterial as MeshBasicMaterial2,
+  PlaneGeometry
+} from "three";
+
+// src/character/CanvasText.ts
+import * as THREE from "three";
+function getTextAlignOffset(textAlign, width) {
+  switch (textAlign) {
+    case "center":
+      return width / 2;
+    case "right":
+      return width;
+    default:
+      return 0;
+  }
+}
+function printAtWordWrap(context, fullText, x, y, lineHeight, fitWidth, padding, alignment) {
+  const lines = fullText.split("\n");
+  let currentLine = 0;
+  for (const text of lines) {
+    fitWidth = fitWidth || 0;
+    if (fitWidth <= 0) {
+      context.fillText(text, x, y + lineHeight * currentLine);
+      currentLine++;
+      continue;
+    }
+    let words = text.split(" ");
+    let lastWordIndex = 1;
+    while (words.length > 0 && lastWordIndex <= words.length) {
+      const str = words.slice(0, lastWordIndex).join(" ");
+      const textWidth = context.measureText(str).width;
+      if (textWidth + padding * 2 > fitWidth) {
+        if (lastWordIndex === 1) {
+          lastWordIndex = 2;
+        }
+        context.fillText(
+          words.slice(0, lastWordIndex - 1).join(" "),
+          x + padding,
+          y + lineHeight * currentLine + padding
+        );
+        currentLine++;
+        words = words.splice(lastWordIndex - 1);
+        lastWordIndex = 1;
+      } else {
+        lastWordIndex++;
+      }
+    }
+    if (lastWordIndex > 0 && words.length > 0) {
+      const xOffset = alignment === "center" ? 0 : padding;
+      context.fillText(words.join(" "), x + xOffset, y + lineHeight * currentLine + padding);
+      currentLine++;
+    }
+  }
+}
+function CanvasText(message, options) {
+  const fontsize = options.fontSize;
+  const textColor = options.textColorRGB255A1;
+  const backgroundColor = options.backgroundColorRGB255A1 || { r: 255, g: 255, b: 255, a: 1 };
+  const padding = options.paddingPx || 0;
+  const font = options.font || "Arial";
+  const fontString = (options.bold ? "bold " : "") + fontsize + "px " + font;
+  const canvas = document.createElement("canvas");
+  const ct = canvas.getContext("2d");
+  const textAlign = options.alignment ?? "left";
+  if (options.dimensions) {
+    canvas.width = options.dimensions.width;
+    canvas.height = options.dimensions.height;
+    ct.clearRect(0, 0, canvas.width, canvas.height);
+    ct.font = fontString;
+    ct.textAlign = textAlign;
+    ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+    ct.lineWidth = 0;
+    ct.fillRect(0, 0, canvas.width, canvas.height);
+    ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+    ct.font = fontString;
+    printAtWordWrap(
+      ct,
+      message,
+      getTextAlignOffset(textAlign, canvas.width),
+      fontsize,
+      fontsize,
+      canvas.width,
+      padding,
+      textAlign
+    );
+  } else {
+    ct.font = fontString;
+    const metrics = ct.measureText(message);
+    const textWidth = metrics.width;
+    const textHeight = metrics.fontBoundingBoxAscent + metrics.fontBoundingBoxDescent;
+    canvas.width = textWidth + padding * 2;
+    canvas.height = textHeight + padding;
+    ct.clearRect(0, 0, canvas.width, canvas.height);
+    ct.font = fontString;
+    ct.textAlign = textAlign;
+    ct.fillStyle = `rgba(${backgroundColor.r}, ${backgroundColor.g}, ${backgroundColor.b}, ${backgroundColor.a})`;
+    ct.lineWidth = 0;
+    ct.fillRect(0, 0, canvas.width, canvas.height);
+    ct.fillStyle = `rgba(${textColor.r}, ${textColor.g}, ${textColor.b}, ${textColor.a})`;
+    ct.font = fontString;
+    ct.fillText(message, padding + getTextAlignOffset(textAlign, textWidth), textHeight);
+  }
+  return canvas;
+}
+function THREECanvasTextTexture(text, options) {
+  const canvas = CanvasText(text, options);
+  const texture = new THREE.Texture(canvas);
+  texture.minFilter = THREE.LinearFilter;
+  texture.magFilter = THREE.LinearFilter;
+  texture.format = THREE.RGBAFormat;
+  texture.needsUpdate = true;
+  return { texture, width: canvas.width, height: canvas.height };
+}
+
+// src/character/CharacterTooltip.ts
+var fontScale = 5;
+var defaultLabelColor = new Color2(0);
+var defaultFontColor = new Color2(16777215);
+var defaultLabelAlignment = "center" /* center */;
+var defaultLabelFontSize = 9;
+var defaultLabelPadding = 0;
+var defaultLabelWidth = 0.25;
+var defaultLabelHeight = 0.125;
+var defaultLabelCastShadows = true;
+var CharacterTooltip = class {
+  constructor(parentModel) {
+    __publicField(this, "texture");
+    __publicField(this, "geometry");
+    __publicField(this, "material");
+    __publicField(this, "mesh");
+    __publicField(this, "visibleOpacity", 0.85);
+    __publicField(this, "targetOpacity", 0);
+    __publicField(this, "fadingSpeed", 0.02);
+    __publicField(this, "secondsToFadeOut", 15);
+    __publicField(this, "props", {
+      content: "",
+      alignment: defaultLabelAlignment,
+      width: defaultLabelWidth,
+      height: defaultLabelHeight,
+      fontSize: defaultLabelFontSize,
+      padding: defaultLabelPadding,
+      color: defaultLabelColor,
+      fontColor: defaultFontColor,
+      castShadows: defaultLabelCastShadows
+    });
+    this.setText = this.setText.bind(this);
+    this.material = new MeshBasicMaterial2({
+      map: this.texture,
+      transparent: true,
+      opacity: 0
+    });
+    this.material.side = FrontSide;
+    this.geometry = new PlaneGeometry(1, 1, 1, 1);
+    this.mesh = new Mesh2(this.geometry, this.material);
+    this.mesh.position.set(0, 1.6, 0);
+    this.mesh.visible = false;
+    parentModel.add(this.mesh);
+  }
+  redrawText(content) {
+    if (!this.material) {
+      return;
+    }
+    if (this.material.map) {
+      this.material.map.dispose();
+    }
+    const { texture, width, height } = THREECanvasTextTexture(content, {
+      bold: true,
+      fontSize: this.props.fontSize * fontScale,
+      paddingPx: this.props.padding,
+      textColorRGB255A1: {
+        r: this.props.fontColor.r * 255,
+        g: this.props.fontColor.g * 255,
+        b: this.props.fontColor.b * 255,
+        a: 1
+      },
+      backgroundColorRGB255A1: {
+        r: this.props.color.r * 255,
+        g: this.props.color.g * 255,
+        b: this.props.color.b * 255,
+        a: 1
+      },
+      dimensions: {
+        width: this.props.width * (100 * fontScale),
+        height: this.props.height * (100 * fontScale)
+      },
+      alignment: this.props.alignment
+    });
+    this.material.map = texture;
+    this.material.map.magFilter = LinearFilter2;
+    this.material.map.minFilter = LinearFilter2;
+    this.material.needsUpdate = true;
+    this.mesh.scale.x = width / (100 * fontScale);
+    this.mesh.scale.y = height / (100 * fontScale);
+    this.mesh.position.y = 1.6;
+  }
+  setText(text, temporary = false) {
+    this.redrawText(text);
+    this.mesh.visible = true;
+    this.targetOpacity = this.visibleOpacity;
+    if (temporary) {
+      setTimeout(() => {
+        this.hide();
+      }, this.secondsToFadeOut * 1e3);
+    }
+  }
+  hide() {
+    this.targetOpacity = 0;
+  }
+  update(camera) {
+    this.mesh.lookAt(camera.position);
+    const opacity = this.mesh.material.opacity;
+    if (opacity < this.targetOpacity) {
+      this.mesh.material.opacity = Math.min(
+        this.mesh.material.opacity + this.fadingSpeed,
+        this.targetOpacity
+      );
+    } else if (opacity > this.targetOpacity) {
+      this.mesh.material.opacity = Math.max(
+        this.mesh.material.opacity - this.fadingSpeed,
+        this.targetOpacity
+      );
+      if (opacity >= 1 && this.mesh.material.transparent === true) {
+        this.mesh.material.transparent = false;
+        this.mesh.material.needsUpdate = true;
+      } else if (opacity > 0 && opacity < 1 && this.mesh.material.transparent === false) {
+        this.mesh.material.transparent = true;
+        this.mesh.material.needsUpdate = true;
+      }
+      if (this.mesh.material.opacity <= 0) {
+        this.mesh.visible = false;
+      }
+    }
+  }
+};
+
 // src/character/LocalController.ts
 import { Box3, Line3, Matrix4, Quaternion, Raycaster as Raycaster2, Vector3 as Vector33 } from "three";
 var LocalController = class {
@@ -997,13 +1238,17 @@ var Character = class {
     __publicField(this, "controller", null);
     __publicField(this, "name", null);
     __publicField(this, "model", null);
-    __publicField(this, "color", new Color2());
+    __publicField(this, "color", new Color3());
     __publicField(this, "position", new Vector34());
+    __publicField(this, "tooltip", null);
     this.load();
   }
   async load() {
     this.model = new CharacterModel(this.characterDescription);
     await this.model.init();
+    if (this.tooltip === null) {
+      this.tooltip = new CharacterTooltip(this.model.mesh);
+    }
     this.color = this.model.material.colorsCube216[this.id];
     if (this.isLocal) {
       this.controller = new LocalController(
@@ -1020,6 +1265,9 @@ var Character = class {
   update(time) {
     if (!this.model)
       return;
+    if (this.tooltip) {
+      this.tooltip.update(this.cameraManager.camera);
+    }
     this.model.mesh.getWorldPosition(this.position);
     if (typeof this.model.material.uniforms.time !== "undefined") {
       this.model.material.uniforms.time.value = time;
@@ -1035,7 +1283,7 @@ import { Group, Vector3 as Vector36 } from "three";
 // src/character/RemoteController.ts
 import {
   AnimationMixer as AnimationMixer2,
-  Object3D as Object3D3,
+  Object3D as Object3D4,
   Quaternion as Quaternion2,
   Vector3 as Vector35
 } from "three";
@@ -1045,7 +1293,7 @@ var RemoteController = class {
     this.id = id;
     __publicField(this, "modelLoader", ModelLoader_default);
     __publicField(this, "characterModel", null);
-    __publicField(this, "animationMixer", new AnimationMixer2(new Object3D3()));
+    __publicField(this, "animationMixer", new AnimationMixer2(new Object3D4()));
     __publicField(this, "animations", /* @__PURE__ */ new Map());
     __publicField(this, "currentAnimation", 0 /* idle */);
     __publicField(this, "networkState", {
@@ -1187,6 +1435,7 @@ var CharacterManager = class {
           this.group.add(character.model.mesh);
           if (isLocal) {
             this.character = character;
+            this.character.tooltip?.setText(`${id}`);
           } else {
             this.remoteCharacters.set(id, character);
             const remoteController = new RemoteController(character, id);
@@ -1212,6 +1461,7 @@ var CharacterManager = class {
               spawnPosition.z
             );
             this.remoteCharacterControllers.set(id, remoteController);
+            character.tooltip?.setText(`${id}`);
           }
           resolve(character);
         },
@@ -1441,7 +1691,7 @@ import {
   NormalPass
 } from "postprocessing";
 import {
-  Color as Color4,
+  Color as Color5,
   HalfFloatType,
   LinearSRGBColorSpace,
   LoadingManager as LoadingManager2,
@@ -1456,9 +1706,9 @@ import { BlendFunction } from "postprocessing";
 var composerValues = {
   renderer: {
     shadowMap: 2,
-    toneMapping: 4,
+    toneMapping: 5,
     exposure: 1,
-    bgIntensity: 0.6,
+    bgIntensity: 0.5,
     bgBlurriness: 0
   },
   ssao: {
@@ -1490,9 +1740,9 @@ var composerValues = {
   },
   brightness: -0.03,
   contrast: 1.3,
-  saturation: 0.95,
-  grain: 0.055,
-  bloom: 0.4
+  saturation: 0.91,
+  grain: 0.061,
+  bloom: 0.45
 };
 var composerOptions = {
   renderer: {
@@ -1538,7 +1788,7 @@ var composerOptions = {
     amount: { min: 0, max: 0.2, step: 2e-3 }
   },
   bloom: {
-    amount: { min: 0, max: 4, step: 0.1 }
+    amount: { min: 0, max: 2, step: 0.05 }
   }
 };
 var shadowMapTypes = {
@@ -1602,7 +1852,7 @@ var statsData = {
 import {
   BlendFunction as BlendFunction2
 } from "postprocessing";
-import { Color as Color3 } from "three";
+import { Color as Color4 } from "three";
 import { Pane } from "tweakpane";
 var TweakPane = class {
   constructor(renderer, scene, composer) {
@@ -1793,12 +2043,8 @@ var TweakPane = class {
           break;
         case "toneMapping":
           this.renderer.toneMapping = e.value;
-          if (e.value !== 5 && e.value !== 0) {
-            this.toneMapping.hidden = true;
-          } else {
-            this.toneMapping.hidden = false;
-          }
-          toneMappingPass.enabled = e.value === 5 || e.value === 0 ? true : false;
+          this.toneMapping.hidden = e.value !== 5;
+          toneMappingPass.enabled = e.value === 5 ? true : false;
           setToneMappingType(e.value);
           break;
         case "exposure":
@@ -1872,7 +2118,7 @@ var TweakPane = class {
         return;
       }
       if (e.presetKey === "color") {
-        ssaoEffect.color = new Color3().setRGB(e.value.r, e.value.g, e.value.b);
+        ssaoEffect.color = new Color4().setRGB(e.value.r, e.value.g, e.value.b);
         return;
       }
       ssaoEffect[preset] = e.value;
@@ -2236,7 +2482,7 @@ var Composer = class {
       bias: composerValues.ssao.bias,
       fade: composerValues.ssao.fade,
       resolutionScale: composerValues.ssao.resolutionScale,
-      color: new Color4().setRGB(composerValues.ssao.color.r, composerValues.ssao.color.g, composerValues.ssao.color.b),
+      color: new Color5().setRGB(composerValues.ssao.color.r, composerValues.ssao.color.g, composerValues.ssao.color.b),
       worldDistanceThreshold: composerValues.ssao.worldDistanceThreshold,
       worldDistanceFalloff: composerValues.ssao.worldDistanceFalloff,
       worldProximityThreshold: composerValues.ssao.worldProximityThreshold,
@@ -2396,11 +2642,11 @@ import {
   getRelativePositionAndRotationRelativeToObject
 } from "mml-web";
 import {
-  Color as Color5,
+  Color as Color6,
   DoubleSide,
   Euler,
-  FrontSide,
-  Mesh as Mesh2,
+  FrontSide as FrontSide2,
+  Mesh as Mesh3,
   MeshStandardMaterial as MeshStandardMaterial2,
   Vector3 as Vector37
 } from "three";
@@ -2455,13 +2701,13 @@ var CollisionsManager = class {
     if (!this.debug) {
       return { source: group, visualizer: null, meshBVH };
     }
-    const mergedMesh = new Mesh2(
+    const mergedMesh = new Mesh3(
       newBufferGeometry,
-      new MeshStandardMaterial2({ color: 16711680, side: FrontSide, wireframe: true })
+      new MeshStandardMaterial2({ color: 16711680, side: FrontSide2, wireframe: true })
     );
     mergedMesh.geometry.boundsTree = meshBVH;
     const visualizer = new MeshBVHVisualizer(mergedMesh, 3);
-    visualizer.edgeMaterial.color = new Color5(255);
+    visualizer.edgeMaterial.color = new Color6(255);
     visualizer.update();
     return { source: group, visualizer, meshBVH };
   }