Slight refactor in how env properties are passed down to the various …

…classes
mml-io · Jun 3, 2024 · 567ac8a · 567ac8a
1 parent 4962516
commit 567ac8a
Show file tree

Hide file tree

Showing 5 changed files with 65 additions and 45 deletions.
diff --git a/example/local-only-multi-user-3d-web-experience/client/src/LocalAvatarClient.ts b/example/local-only-multi-user-3d-web-experience/client/src/LocalAvatarClient.ts
@@ -91,7 +91,11 @@ export class LocalAvatarClient {
     );
     this.cameraManager.camera.add(this.audioListener);
 
-    this.composer = new Composer(this.scene, this.cameraManager.camera, true);
+    this.composer = new Composer({
+      scene: this.scene,
+      camera: this.cameraManager.camera,
+      spawnSun: true,
+    });
     this.composer.useHDRJPG(hdrJpgUrl);
     this.element.appendChild(this.composer.renderer.domElement);
 

diff --git a/example/multi-user-3d-web-experience/client/src/index.ts b/example/multi-user-3d-web-experience/client/src/index.ts
@@ -26,5 +26,7 @@ const app = new Networked3dWebExperienceClient(holder, {
   },
   hdrJpgUrl,
   mmlDocuments: [{ url: `${protocol}//${host}/mml-documents/example-mml.html` }],
+  environmentConfiguration: {},
 });
+
 app.update();
diff --git a/packages/3d-web-client-core/src/index.ts b/packages/3d-web-client-core/src/index.ts
@@ -15,3 +15,4 @@ export { CollisionsManager } from "./collisions/CollisionsManager";
 export { Sun } from "./sun/Sun";
 export { GroundPlane } from "./ground-plane/GroundPlane";
 export { LoadingScreen } from "./loading-screen/LoadingScreen";
+export { EnvironmentConfiguration } from "./rendering/composer";
diff --git a/packages/3d-web-client-core/src/rendering/composer.ts b/packages/3d-web-client-core/src/rendering/composer.ts
@@ -1,40 +1,39 @@
-import { EnvironmentConfiguration } from "@mml-io/3d-web-experience-client";
 import { HDRJPGLoader } from "@monogrid/gainmap-js";
 import {
+  BlendFunction,
+  BloomEffect,
+  EdgeDetectionMode,
   EffectComposer,
-  RenderPass,
   EffectPass,
   FXAAEffect,
+  NormalPass,
+  PredicationMode,
+  RenderPass,
   ShaderPass,
-  BloomEffect,
+  SMAAEffect,
+  SMAAPreset,
   SSAOEffect,
-  BlendFunction,
   TextureEffect,
   ToneMappingEffect,
-  SMAAEffect,
-  SMAAPreset,
-  EdgeDetectionMode,
-  PredicationMode,
-  NormalPass,
 } from "postprocessing";
 import {
   AmbientLight,
   Color,
+  EquirectangularReflectionMapping,
+  Euler,
   Fog,
   HalfFloatType,
   LinearSRGBColorSpace,
   LoadingManager,
-  PMREMGenerator,
+  MathUtils,
   PerspectiveCamera,
-  SRGBColorSpace,
+  PMREMGenerator,
   Scene,
   ShadowMapType,
+  SRGBColorSpace,
   ToneMapping,
   Vector2,
   WebGLRenderer,
-  EquirectangularReflectionMapping,
-  MathUtils,
-  Euler,
 } from "three";
 import { RGBELoader } from "three/examples/jsm/loaders/RGBELoader.js";
 
@@ -52,6 +51,30 @@ import { BrightnessContrastSaturation } from "./post-effects/bright-contrast-sat
 import { GaussGrainEffect } from "./post-effects/gauss-grain";
 import { N8SSAOPass } from "./post-effects/n8-ssao/N8SSAOPass";
 
+type ComposerContructorArgs = {
+  scene: Scene;
+  camera: PerspectiveCamera;
+  spawnSun: boolean;
+  environmentConfiguration?: EnvironmentConfiguration;
+};
+
+export type EnvironmentConfiguration = {
+  hdr?: {
+    intensity?: number;
+    blurriness?: number;
+    azimuthalAngle?: number;
+    polarAngle?: number;
+  };
+  sun?: {
+    intensity?: number;
+    polarAngle?: number;
+    azimuthalAngle?: number;
+  };
+  postProcessing?: {
+    bloomIntensity?: number;
+  };
+};
+
 export class Composer {
   private width: number = 1;
   private height: number = 1;
@@ -91,17 +114,17 @@ export class Composer {
   private readonly gaussGrainPass: ShaderPass;
 
   private ambientLight: AmbientLight | null = null;
-  private environmentConfiguration: EnvironmentConfiguration;
+  private environmentConfiguration?: EnvironmentConfiguration;
 
   public sun: Sun | null = null;
   public spawnSun: boolean;
 
-  constructor(
-    scene: Scene,
-    camera: PerspectiveCamera,
-    spawnSun: boolean,
-    environmentConfiguration: EnvironmentConfiguration,
-  ) {
+  constructor({
+    scene,
+    camera,
+    spawnSun = false,
+    environmentConfiguration,
+  }: ComposerContructorArgs) {
     this.scene = scene;
     this.postPostScene = new Scene();
     this.camera = camera;
@@ -160,7 +183,7 @@ export class Composer {
 
     this.fxaaEffect = new FXAAEffect();
 
-    if (environmentConfiguration.postProcessing?.bloomIntensity) {
+    if (environmentConfiguration?.postProcessing?.bloomIntensity) {
       extrasValues.bloom = environmentConfiguration.postProcessing.bloomIntensity;
     }
 

diff --git a/packages/3d-web-experience-client/src/Networked3dWebExperienceClient.ts b/packages/3d-web-experience-client/src/Networked3dWebExperienceClient.ts
@@ -8,13 +8,14 @@ import {
   CollisionsManager,
   Composer,
   decodeCharacterAndCamera,
+  EnvironmentConfiguration,
   getSpawnPositionInsideCircle,
+  GroundPlane,
   KeyInputManager,
+  LoadingScreen,
   MMLCompositionScene,
   TimeManager,
   TweakPane,
-  GroundPlane,
-  LoadingScreen,
   VirtualJoystick,
 } from "@mml-io/3d-web-client-core";
 import { ChatNetworkingClient, FromClientChatMessage, TextChatUI } from "@mml-io/3d-web-text-chat";
@@ -52,24 +53,6 @@ type MMLDocumentConfiguration = {
   };
 };
 
-export type EnvironmentConfiguration = {
-  enableTweakPane?: boolean;
-  hdr?: {
-    intensity?: number;
-    blurriness?: number;
-    azimuthalAngle?: number;
-    polarAngle?: number;
-  },
-  sun?: {
-    intensity?: number;
-    polarAngle?: number;
-    azimuthalAngle?: number;
-  },
-  postProcessing?: {
-    bloomIntensity?: number;
-  },
-}
-
 export type Networked3dWebExperienceClientConfig = {
   sessionToken: string;
   chatNetworkAddress?: string;
@@ -79,6 +62,7 @@ export type Networked3dWebExperienceClientConfig = {
   animationConfig: AnimationConfig;
   environmentConfiguration?: EnvironmentConfiguration;
   hdrJpgUrl: string;
+  enableTweakPane?: boolean;
 };
 
 export class Networked3dWebExperienceClient {
@@ -148,11 +132,17 @@ export class Networked3dWebExperienceClient {
       mouse_support: false,
     });
 
-    this.composer = new Composer(this.scene, this.cameraManager.camera, true, this.config.environmentConfiguration);
+    this.composer = new Composer({
+      scene: this.scene,
+      camera: this.cameraManager.camera,
+      spawnSun: true,
+      environmentConfiguration: this.config.environmentConfiguration,
+    });
+
     this.composer.useHDRJPG(this.config.hdrJpgUrl);
     this.element.appendChild(this.composer.renderer.domElement);
 
-    if (this.config.environmentConfiguration?.enableTweakPane !== false) {
+    if (this.config.enableTweakPane !== false) {
       this.tweakPane = new TweakPane(
         this.element,
         this.composer.renderer,