Exposes more scene adjustments (#31)

* fixes console warning caused by undefined texture mapping instead of null

* improves default scene parameters and exposes more adjustment options

* moves TweakPane styling from the client to its own context

example/web-client/public/style.css

@@ -2,38 +2,14 @@
   font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
   line-height: 1.5;
   font-weight: 400;
-
   color-scheme: light dark;
   color: black;
   background-color: #121212;
-
   font-synthesis: none;
   text-rendering: optimizeLegibility;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   -webkit-text-size-adjust: 100%;
-
-  --tp-base-background-color: hsla(0, 0%, 10%, 0.8);
-  --tp-base-shadow-color: hsla(0, 0%, 0%, 0.2);
-  --tp-button-background-color: hsla(0, 0%, 80%, 1);
-  --tp-button-background-color-active: hsla(0, 0%, 100%, 1);
-  --tp-button-background-color-focus: hsla(0, 0%, 95%, 1);
-  --tp-button-background-color-hover: hsla(0, 0%, 85%, 1);
-  --tp-button-foreground-color: hsla(0, 0%, 0%, 0.8);
-  --tp-container-background-color: hsla(0, 0%, 0%, 0.3);
-  --tp-container-background-color-active: hsla(0, 0%, 0%, 0.6);
-  --tp-container-background-color-focus: hsla(0, 0%, 0%, 0.5);
-  --tp-container-background-color-hover: hsla(0, 0%, 0%, 0.4);
-  --tp-container-foreground-color: hsla(0, 0%, 100%, 0.5);
-  --tp-groove-foreground-color: hsla(0, 0%, 0%, 0.2);
-  --tp-input-background-color: hsla(0, 0%, 0%, 0.3);
-  --tp-input-background-color-active: hsla(0, 0%, 0%, 0.6);
-  --tp-input-background-color-focus: hsla(0, 0%, 0%, 0.5);
-  --tp-input-background-color-hover: hsla(0, 0%, 0%, 0.4);
-  --tp-input-foreground-color: hsla(0, 0%, 100%, 0.5);
-  --tp-label-foreground-color: hsla(0, 0%, 100%, 0.5);
-  --tp-monitor-background-color: hsla(0, 0%, 0%, 0.3);
-  --tp-monitor-foreground-color: hsla(0, 0%, 100%, 0.3);
 }
 
 a {
@@ -78,20 +54,3 @@ h1 {
     background-color: #f9f9f9;
   }
 }
-
-.tp-brkv {
-  -webkit-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
-}
-
-.tp-dfwv {
-  width: 333px !important;
-  display: none;
-}
-
-.tp-lblv_l {
-  font-size: 10px;
-  padding-left: 0px !important;
-  padding-right: 0px !important;
-}

example/web-client/src/index.ts

@@ -8,13 +8,14 @@ import {
   MMLCompositionScene,
   KeyInputManager,
   TimeManager,
+  Sun as ComposerSun,
 } from "@mml-io/3d-web-client-core";
 import {
   UserNetworkingClient,
   UserNetworkingClientUpdate,
   WebsocketStatus,
 } from "@mml-io/3d-web-user-networking";
-import { AudioListener, Fog, Group, PerspectiveCamera, Scene } from "three";
+import { AudioListener, Group, PerspectiveCamera, Scene } from "three";
 
 import { Room } from "./Room";
 import { Sun } from "./Sun";
@@ -36,11 +37,12 @@ export class App {
   private readonly modelsPath: string = "/web-client/assets/models";
   private readonly characterDescription: CharacterDescription | null = null;
 
-  private readonly sun: Sun;
+  private readonly useComposerSun: boolean = true;
+
+  private readonly sun: Sun | ComposerSun | null;
 
   constructor() {
     this.scene = new Scene();
-    this.scene.fog = new Fog(0xc7cad0, 30, 210);
     this.collisionsManager = new CollisionsManager(this.scene);
 
     this.audioListener = new AudioListener();
@@ -59,7 +61,7 @@ export class App {
     this.cameraManager = new CameraManager(this.collisionsManager);
     this.camera = this.cameraManager.camera;
     this.camera.add(this.audioListener);
-    this.composer = new Composer(this.scene, this.camera);
+    this.composer = new Composer(this.scene, this.camera, true);
     this.composer.useHDRI("/web-client/assets/hdr/industrial_sunset_2k.hdr");
 
     this.characterDescription = {
@@ -120,8 +122,13 @@ export class App {
     );
 
     this.group.add(mmlComposition.group);
-    this.sun = new Sun();
-    this.group.add(this.sun);
+
+    if (this.useComposerSun === true) {
+      this.sun = this.composer.sun;
+    } else {
+      this.sun = new Sun();
+      this.group.add(this.sun);
+    }
 
     const room = new Room();
     this.collisionsManager.addMeshesGroup(room);
@@ -132,7 +139,9 @@ export class App {
     this.timeManager.update();
     this.characterManager.update();
     this.cameraManager.update();
-    this.sun.updateCharacterPosition(this.characterManager.character?.position);
+    if (this.sun) {
+      this.sun.updateCharacterPosition(this.characterManager.character?.position);
+    }
     this.composer.render(this.timeManager);
     requestAnimationFrame(() => {
       this.update();

packages/3d-web-client-core/src/camera/CameraManager.ts

@@ -7,15 +7,15 @@ import { getTweakpaneActive } from "../tweakpane/tweakPaneActivity";
 export class CameraManager {
   public readonly camera: PerspectiveCamera;
 
-  public initialDistance: number = 2.5;
+  public initialDistance: number = 3.3;
 
   private minDistance: number = 0.1;
-  private maxDistance: number = 6;
+  private maxDistance: number = 8;
 
-  private initialFOV: number = 80;
+  private initialFOV: number = 60;
   private fov: number = this.initialFOV;
-  private minFOV: number = 63;
-  private maxFOV: number = 85;
+  private minFOV: number = 50;
+  private maxFOV: number = 70;
   private targetFOV: number = this.initialFOV;
 
   private minPolarAngle: number = Math.PI * 0.25;

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

@@ -1,6 +1,5 @@
 import {
   Camera,
-  CanvasTexture,
   Color,
   FrontSide,
   LinearFilter,
@@ -29,8 +28,6 @@ const defaultLabelHeight = 0.125;
 const defaultLabelCastShadows = true;
 
 export class CharacterTooltip {
-  private texture: CanvasTexture;
-
   private geometry: PlaneGeometry;
   private material: MeshBasicMaterial;
   private mesh: Mesh<PlaneGeometry, MeshBasicMaterial>;
@@ -55,7 +52,7 @@ export class CharacterTooltip {
   constructor(parentModel: Object3D) {
     this.setText = this.setText.bind(this);
     this.material = new MeshBasicMaterial({
-      map: this.texture,
+      map: null,
       transparent: true,
       opacity: 0,
     });

packages/3d-web-client-core/src/index.ts

@@ -7,3 +7,4 @@ export { MMLCompositionScene } from "./mml/MMLCompositionScene";
 export { Composer } from "./rendering/composer";
 export { TimeManager } from "./time/TimeManager";
 export { CollisionsManager } from "./collisions/CollisionsManager";
+export { Sun } from "./sun/Sun";

packages/3d-web-client-core/src/rendering/composer.ts

@@ -16,7 +16,9 @@ import {
   NormalPass,
 } from "postprocessing";
 import {
+  AmbientLight,
   Color,
+  Fog,
   HalfFloatType,
   LinearSRGBColorSpace,
   LoadingManager,
@@ -30,8 +32,10 @@ import {
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
+import { Sun } from "../sun/Sun";
 import { TimeManager } from "../time/TimeManager";
 import { composerValues as vals } from "../tweakpane/composerSettings";
+import { envValues } from "../tweakpane/envSettings";
 import { TweakPane } from "../tweakpane/TweakPane";
 
 import { BrightnessContrastSaturation } from "./post-effects/bright-contrast-sat";
@@ -71,11 +75,17 @@ export class Composer {
   private readonly gaussGrainEffect = GaussGrainEffect;
   private readonly gaussGrainPass: ShaderPass;
 
+  private ambientLight: AmbientLight | null = null;
+
+  public sun: Sun | null = null;
+  public spawnSun: boolean;
+
   private tweakPane: TweakPane;
 
-  constructor(scene: Scene, camera: PerspectiveCamera) {
+  constructor(scene: Scene, camera: PerspectiveCamera, spawnSun: boolean = false) {
     this.scene = scene;
     this.camera = camera;
+    this.spawnSun = spawnSun;
     this.renderer = new WebGLRenderer({
       powerPreference: "high-performance",
       antialias: false,
@@ -89,6 +99,9 @@ export class Composer {
     this.renderer.toneMapping = vals.renderer.toneMapping as ToneMapping;
     this.renderer.toneMappingExposure = vals.renderer.exposure;
 
+    this.setAmbientLight();
+    this.setFog();
+
     document.body.appendChild(this.renderer.domElement);
 
     this.composer = new EffectComposer(this.renderer, {
@@ -167,13 +180,23 @@ export class Composer {
     this.composer.addPass(this.bcsPass);
     this.composer.addPass(this.gaussGrainPass);
 
+    if (this.spawnSun === true) {
+      this.sun = new Sun();
+      this.scene.add(this.sun);
+    }
+
     this.tweakPane.setupRenderPane(
       this.ssaoEffect,
       this.toneMappingEffect,
       this.toneMappingPass,
       this.bcs,
       this.bloomEffect,
       this.gaussGrainEffect,
+      this.spawnSun,
+      this.sun,
+      this.setHDRIFromFile.bind(this),
+      this.setAmbientLight.bind(this),
+      this.setFog.bind(this),
     );
     window.addEventListener("resize", () => this.updateProjection());
     this.updateProjection();
@@ -212,8 +235,8 @@ export class Composer {
     }
   }
 
-  public useHDRI(url: string): void {
-    if (this.isEnvHDRI || !this.renderer) return;
+  public useHDRI(url: string, fromFile: boolean = false): void {
+    if ((this.isEnvHDRI && fromFile === false) || !this.renderer) return;
     const pmremGenerator = new PMREMGenerator(this.renderer);
     new RGBELoader(new LoadingManager()).load(
       url,
@@ -236,4 +259,52 @@ export class Composer {
       },
     );
   }
+
+  public setHDRIFromFile(): void {
+    if (!this.renderer) return;
+    const fileInput = document.createElement("input");
+    fileInput.type = "file";
+    fileInput.accept = ".hdr";
+    fileInput.addEventListener("change", () => {
+      const file = fileInput.files?.[0];
+      if (!file) {
+        console.log("no file");
+        return;
+      }
+      const fileURL = URL.createObjectURL(file);
+      if (fileURL) {
+        this.useHDRI(fileURL, true);
+        URL.revokeObjectURL(fileURL);
+        document.body.removeChild(fileInput);
+      }
+    });
+    document.body.appendChild(fileInput);
+    fileInput.click();
+  }
+
+  public setFog(): void {
+    const fogColor = new Color().setRGB(
+      envValues.fog.fogColor.r,
+      envValues.fog.fogColor.g,
+      envValues.fog.fogColor.b,
+    );
+    this.scene.fog = new Fog(fogColor, envValues.fog.fogNear, envValues.fog.fogFar);
+  }
+
+  public setAmbientLight(): void {
+    if (this.ambientLight) {
+      this.scene.remove(this.ambientLight);
+      this.ambientLight.dispose();
+    }
+    const ambientLightColor = new Color().setRGB(
+      envValues.ambientLight.ambientLightColor.r,
+      envValues.ambientLight.ambientLightColor.g,
+      envValues.ambientLight.ambientLightColor.b,
+    );
+    this.ambientLight = new AmbientLight(
+      ambientLightColor,
+      envValues.ambientLight.ambientLightIntensity,
+    );
+    this.scene.add(this.ambientLight);
+  }
 }