lighting overhaul

packages/3d-web-client-core/package.json

@@ -19,12 +19,12 @@
   },
   "dependencies": {
     "@mml-io/model-loader": "0.14.0",
-    "@mml-io/3d-web-avatar": "0.15.0",
+    "@mml-io/3d-web-avatar": "^0.15.0",
     "@monogrid/gainmap-js": "^3.0.5",
     "@tweakpane/core": "2.0.3",
     "@tweakpane/plugin-essentials": "0.2.1",
     "mml-web": "0.14.0",
-    "postprocessing": "6.35.3",
+    "postprocessing": "6.35.4",
     "three-mesh-bvh": "0.7.4",
     "tweakpane": "4.0.3"
   },

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

@@ -63,7 +63,7 @@ export class CameraManager {
     this.targetPhi = initialPhi;
     this.theta = initialTheta;
     this.targetTheta = initialTheta;
-    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 400);
+    this.camera = new PerspectiveCamera(this.fov, window.innerWidth / window.innerHeight, 0.1, 300);
     this.camera.position.set(0, 1.4, -this.initialDistance);
     this.rayCaster = new Raycaster();
 

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

@@ -77,7 +77,7 @@ export class CharacterMaterial extends MeshStandardMaterial {
 
       shader.fragmentShader = injectBefore(
         shader.fragmentShader,
-        "#include <output_fragment>",
+        "#include <dithering_fragment>",
         /* glsl */ `
           if (discardAll == 1) {
             discard;

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

@@ -72,6 +72,11 @@ export class CharacterModel {
   private applyCustomMaterials(): void {
     if (!this.mesh) return;
     this.mesh.traverse((child: Object3D) => {
+      if ((child as Bone).isBone) {
+        if (child.name === "head") {
+          this.headBone = child as Bone;
+        }
+      }
       if ((child as Mesh).isMesh || (child as SkinnedMesh).isSkinnedMesh) {
         const asMesh = child as Mesh;
         const originalMaterial = asMesh.material as MeshStandardMaterial;

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

@@ -81,7 +81,7 @@ export class CharacterSpeakingIndicator {
   }
 
   public setBillboarding(position: Vector3, camera: Camera) {
-    this.mesh.position.set(position.x, position.y - 0.15, position.z);
+    this.mesh.position.set(position.x, position.y, position.z);
     this.mesh.lookAt(camera.position);
   }
 

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

@@ -18,5 +18,14 @@ export type CharacterState = {
     quaternionY: number;
     quaternionW: number;
   };
+  camPosition?: {
+    x: number;
+    y: number;
+    z: number;
+  };
+  camQuaternion?: {
+    y: number;
+    w: number;
+  };
   state: AnimationState;
 };

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

@@ -435,6 +435,8 @@ export class LocalController {
 
   private updateNetworkState(): void {
     const characterQuaternion = this.config.character.getWorldQuaternion(this.tempQuaternion);
+    const cameraQuaternion = new Quaternion();
+    this.config.cameraManager.camera.getWorldQuaternion(cameraQuaternion);
     this.networkState = {
       id: this.config.id,
       position: {
@@ -443,6 +445,15 @@ export class LocalController {
         z: this.config.character.position.z,
       },
       rotation: { quaternionY: characterQuaternion.y, quaternionW: characterQuaternion.w },
+      camPosition: {
+        x: this.config.cameraManager.camera.position.x,
+        y: this.config.cameraManager.camera.position.y,
+        z: this.config.cameraManager.camera.position.z,
+      },
+      camQuaternion: {
+        y: cameraQuaternion.y,
+        w: cameraQuaternion.w,
+      },
       state: this.config.character.getCurrentAnimation(),
     };
   }

packages/3d-web-client-core/src/ground-plane/GroundPlane.ts

@@ -16,9 +16,9 @@ const canvas = document.createElement("canvas");
 canvas.width = 2;
 canvas.height = 2;
 const ctx = canvas.getContext("2d")!;
-ctx.fillStyle = "#C0C0C0";
+ctx.fillStyle = "#e0e0e0";
 ctx.fillRect(0, 0, 2, 2);
-ctx.fillStyle = "#808080";
+ctx.fillStyle = "#606060";
 ctx.fillRect(0, 0, 1, 1);
 ctx.fillRect(1, 1, 1, 1);
 

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

@@ -32,13 +32,16 @@ import {
   Vector2,
   WebGLRenderer,
   EquirectangularReflectionMapping,
+  MathUtils,
+  Vector3,
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
+import { Sky } from "three/examples/jsm/objects/Sky.js";
 
 import { Sun } from "../sun/Sun";
 import { TimeManager } from "../time/TimeManager";
 import { bcsValues } from "../tweakpane/blades/bcsFolder";
-import { envValues } from "../tweakpane/blades/environmentFolder";
+import { envValues, sunValues } from "../tweakpane/blades/environmentFolder";
 import { extrasValues } from "../tweakpane/blades/postExtrasFolder";
 import { rendererValues } from "../tweakpane/blades/rendererFolder";
 import { n8ssaoValues, ppssaoValues } from "../tweakpane/blades/ssaoFolder";
@@ -101,8 +104,6 @@ export class Composer {
     this.renderer = new WebGLRenderer({
       powerPreference: "high-performance",
       antialias: false,
-      stencil: false,
-      depth: false,
     });
     this.renderer.outputColorSpace = SRGBColorSpace;
     this.renderer.info.autoReset = false;
@@ -127,6 +128,7 @@ export class Composer {
       blendFunction: BlendFunction.SKIP,
       texture: this.normalPass.texture,
     });
+
     this.ppssaoEffect = new SSAOEffect(this.camera, this.normalPass.texture, {
       blendFunction: ppssaoValues.blendFunction,
       distanceScaling: ppssaoValues.distanceScaling,
@@ -195,6 +197,9 @@ export class Composer {
     this.bcs.uniforms.saturation.value = bcsValues.saturation;
 
     this.gaussGrainPass = new ShaderPass(this.gaussGrainEffect, "tDiffuse");
+    this.gaussGrainEffect.uniforms.amount.value = extrasValues.grain;
+    this.gaussGrainEffect.uniforms.alpha.value = 1.0;
+
     this.smaaPass = new EffectPass(this.camera, this.smaaEffect);
 
     this.effectComposer.addPass(this.renderPass);
@@ -206,7 +211,6 @@ export class Composer {
       this.effectComposer.addPass(this.n8aopass);
     }
     this.effectComposer.addPass(this.fxaaPass);
-    this.effectComposer.addPass(this.smaaPass);
     this.effectComposer.addPass(this.bloomPass);
     this.effectComposer.addPass(this.toneMappingPass);
     this.effectComposer.addPass(this.bcsPass);
@@ -284,16 +288,16 @@ export class Composer {
     this.bloomPass.setSize(this.width, this.height);
     this.toneMappingPass.setSize(this.width, this.height);
     this.gaussGrainPass.setSize(this.width, this.height);
+    this.gaussGrainEffect.uniforms.resolution.value = new Vector2(this.width, this.height);
     this.renderer.setSize(this.width, this.height);
   }
 
   public render(timeManager: TimeManager): void {
     this.renderer.info.reset();
     this.normalPass.texture.needsUpdate = true;
-    this.gaussGrainEffect.uniforms.resolution.value = this.resolution;
     this.gaussGrainEffect.uniforms.time.value = timeManager.time;
-    this.gaussGrainEffect.uniforms.alpha.value = 1.0;
     this.effectComposer.render();
+    this.renderer.clearDepth();
     this.renderer.render(this.postPostScene, this.camera);
   }
 

packages/3d-web-client-core/src/sun/Sun.ts

@@ -33,7 +33,7 @@ export class Sun extends Group {
     }
     this.directionalLight = new DirectionalLight(0xffffff);
     this.directionalLight.intensity = sunValues.sunIntensity;
-    this.directionalLight.shadow.normalBias = 0.01;
+    this.directionalLight.shadow.normalBias = 0.1;
     this.directionalLight.shadow.radius = 0.02;
     this.directionalLight.shadow.camera = this.shadowCamera;
     this.directionalLight.shadow.mapSize.set(this.shadowResolution, this.shadowResolution);

packages/3d-web-client-core/src/tweakpane/blades/bcsFolder.ts

@@ -4,8 +4,8 @@ import { BladeApi, FolderApi, TpChangeEvent } from "tweakpane";
 import { BrightnessContrastSaturation } from "../../rendering/post-effects/bright-contrast-sat";
 
 export const bcsValues = {
-  brightness: 0,
-  contrast: 1,
+  brightness: 0.06,
+  contrast: 1.2,
   saturation: 1,
 };
 

packages/3d-web-client-core/src/tweakpane/blades/environmentFolder.ts

@@ -5,10 +5,10 @@ import { Sun } from "../../sun/Sun";
 
 export const sunValues = {
   sunPosition: {
-    sunAzimuthalAngle: 214.5,
-    sunPolarAngle: -41.5,
+    sunAzimuthalAngle: 219,
+    sunPolarAngle: -37,
   },
-  sunIntensity: 2,
+  sunIntensity: 3.7,
   sunColor: { r: 1.0, g: 1.0, b: 1.0 },
 };
 
@@ -17,18 +17,18 @@ const sunOptions = {
     sunAzimuthalAngle: { min: 0, max: 360, step: 1 },
     sunPolarAngle: { min: -90, max: 90, step: 1 },
   },
-  sunIntensity: { min: 0, max: 3, step: 0.05 },
+  sunIntensity: { min: 0, max: 10, step: 0.1 },
 };
 
 export const envValues = {
   ambientLight: {
-    ambientLightIntensity: 0.1,
+    ambientLightIntensity: 0.27,
     ambientLightColor: { r: 1, g: 1, b: 1 },
   },
   fog: {
-    fogNear: 30,
-    fogFar: 210,
-    fogColor: { r: 0.42, g: 0.48, b: 0.59 },
+    fogNear: 21,
+    fogFar: 180,
+    fogColor: { r: 0.7, g: 0.7, b: 0.7 },
   },
 };
 

packages/3d-web-client-core/src/tweakpane/blades/postExtrasFolder.ts

@@ -5,16 +5,16 @@ import { BladeApi, FolderApi, TpChangeEvent } from "tweakpane";
 import { GaussGrainEffect } from "../../rendering/post-effects/gauss-grain";
 
 export const extrasValues = {
-  grain: 0.055,
-  bloom: 3,
+  grain: 0.045,
+  bloom: 0.75,
 };
 
 const extrasOptions = {
   grain: {
     amount: { min: 0, max: 0.2, step: 0.002 },
   },
   bloom: {
-    amount: { min: 0, max: 5, step: 0.05 },
+    amount: { min: 0, max: 50, step: 0.05 },
   },
 };
 

packages/3d-web-client-core/src/tweakpane/blades/rendererFolder.ts

@@ -6,8 +6,8 @@ import { BladeApi, FolderApi, TpChangeEvent } from "tweakpane";
 export const rendererValues = {
   shadowMap: 2,
   toneMapping: 5,
-  exposure: 1,
-  bgIntensity: 1,
+  exposure: 1.7,
+  bgIntensity: 0.8,
   bgBlurriness: 0.0,
 };
 
@@ -45,6 +45,8 @@ const setShadowMapType = (value: number): void => {
 
 const setToneMappingType = (value: number): void => {
   monitoredValues.toneMappingType = toneMappingTypes[value];
+  rendererValues.toneMapping = value;
+  console.log(rendererValues.toneMapping);
 };
 
 export class RendererFolder {
@@ -82,7 +84,7 @@ export class RendererFolder {
           break;
         }
         case "toneMapping":
-          renderer.toneMapping = e.value as ToneMapping;
+          const value = e.value as ToneMapping;
           toneMappingFolder.hidden = e.value !== 5;
           toneMappingPass.enabled = e.value === 5 ? true : false;
           setToneMappingType(e.value as ToneMapping);

packages/3d-web-client-core/src/tweakpane/blades/ssaoFolder.ts

@@ -11,10 +11,10 @@ export const ppssaoValues = {
   samples: 30,
   rings: 11,
   luminanceInfluence: 0.7,
-  radius: 0.03,
-  intensity: 2.5,
-  bias: 0.05,
-  fade: 0.03,
+  radius: 0.045,
+  intensity: 3.14,
+  bias: 0.01,
+  fade: 0.06,
   resolutionScale: 0.5,
   color: { r: 0, g: 0, b: 0 },
   worldDistanceThreshold: 30,

packages/3d-web-client-core/src/tweakpane/blades/toneMappingFolder.ts

@@ -3,7 +3,7 @@ import { ToneMappingEffect, ToneMappingMode } from "postprocessing";
 import { FolderApi } from "tweakpane";
 
 export const toneMappingValues = {
-  mode: 2 as ToneMappingMode,
+  mode: 7 as ToneMappingMode,
   resolution: 512,
   whitePoint: 32.0,
   middleGrey: 21.0,
@@ -13,21 +13,25 @@ export const toneMappingValues = {
 };
 
 const toneMappingOptions = {
-  mode: { min: 0, max: 4, step: 1 },
+  mode: { min: 0, max: 8, step: 1 },
   resolution: { min: 64, max: 512, step: 64 },
   whitePoint: { min: 0, max: 32, step: 0.01 },
   middleGrey: { min: 0, max: 32, step: 0.01 },
   minLuminance: { min: 0, max: 32, step: 0.001 },
-  averageLuminance: { min: 0.001, max: 0.2, step: 0.001 },
+  averageLuminance: { min: 0.001, max: 2, step: 0.001 },
   adaptationRate: { min: 0.1, max: 2.0, step: 0.1 },
 };
 
 const customToneMappingTypes: Record<number, string> = {
-  0: "REINHARD",
-  1: "REINHARD2",
-  2: "REINHARD2_ADAPTIVE",
-  3: "OPTIMIZED_CINEON",
-  4: "ACES_FILMIC",
+  0: "LINEAR",
+  1: "REINHARD",
+  2: "REINHARD2",
+  3: "REINHARD2_ADAPTIVE",
+  4: "UNCHARTED2",
+  5: "OPTIMIZED_CINEON",
+  6: "ACES_FILMIC",
+  7: "AGX",
+  8: "NEUTRAL",
 };
 
 const customToneMappingBlade = {
@@ -57,13 +61,13 @@ export class ToneMappingFolder {
       "minLuminance",
       toneMappingOptions.minLuminance,
     );
-    this.minLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
+    this.minLuminance.hidden = false;
     this.avgLuminance = this.folder.addBinding(
       toneMappingValues,
       "averageLuminance",
       toneMappingOptions.averageLuminance,
     );
-    this.avgLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
+    this.avgLuminance.hidden = false;
     this.folder.addBinding(toneMappingValues, "adaptationRate", toneMappingOptions.adaptationRate);
   }
 
@@ -72,8 +76,6 @@ export class ToneMappingFolder {
       const target = (e.target as any).key;
       if (!target) return;
       if (target === "mode") {
-        this.minLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
-        this.avgLuminance.hidden = toneMappingValues.mode === 2 ? true : false;
         setCustomToneMappingType(e.value as number);
       }
       (toneMappingEffect as any)[target] = e.value;