Add configurable environment variables

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);
 

example/multi-user-3d-web-experience/client/src/index.ts

@@ -24,7 +24,9 @@ const app = new Networked3dWebExperienceClient(holder, {
     sprintAnimationFileUrl,
     doubleJumpAnimationFileUrl,
   },
-  hdrJpgUrl,
+  skyboxHdrJpgUrl: hdrJpgUrl,
   mmlDocuments: [{ url: `${protocol}//${host}/mml-documents/example-mml.html` }],
+  environmentConfiguration: {},
 });
+
 app.update();

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

@@ -161,7 +161,9 @@ export class LocalController {
       );
     }
 
-    if (this.config.character.position.y < 0) {
+    // Allow the user to fall far below zero before resetting
+    // TODO - Might want to make this a configurable value
+    if (this.config.character.position.y < -100) {
       this.resetPosition();
     }
     this.updateNetworkState();

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";

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

@@ -1,46 +1,46 @@
 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";
 
 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";
@@ -51,11 +51,41 @@ 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 = {
+  groundPlane?: boolean;
+  skybox?: {
+    intensity?: number;
+    blurriness?: number;
+    azimuthalAngle?: number;
+    polarAngle?: number;
+  };
+  envMap?: {
+    intensity?: number;
+  };
+  sun?: {
+    intensity?: number;
+    polarAngle?: number;
+    azimuthalAngle?: number;
+  };
+  postProcessing?: {
+    bloomIntensity?: number;
+  };
+  ambientLight?: {
+    intensity?: number;
+  };
+};
+
 export class Composer {
   private width: number = 1;
   private height: number = 1;
   private resizeListener: () => void;
-
   public resolution: Vector2 = new Vector2(this.width, this.height);
 
   private isEnvHDRI: boolean = false;
@@ -91,11 +121,17 @@ export class Composer {
   private readonly gaussGrainPass: ShaderPass;
 
   private ambientLight: AmbientLight | null = null;
+  private environmentConfiguration?: EnvironmentConfiguration;
 
   public sun: Sun | null = null;
   public spawnSun: boolean;
 
-  constructor(scene: Scene, camera: PerspectiveCamera, spawnSun: boolean = false) {
+  constructor({
+    scene,
+    camera,
+    spawnSun = false,
+    environmentConfiguration,
+  }: ComposerContructorArgs) {
     this.scene = scene;
     this.postPostScene = new Scene();
     this.camera = camera;
@@ -112,10 +148,10 @@ export class Composer {
     this.renderer.toneMapping = rendererValues.toneMapping as ToneMapping;
     this.renderer.toneMappingExposure = rendererValues.exposure;
 
-    this.scene.backgroundIntensity = envValues.hdrIntensity;
-    this.scene.backgroundBlurriness = envValues.hdrBlurriness;
+    this.environmentConfiguration = environmentConfiguration;
 
-    this.setAmbientLight();
+    this.updateHDRValues();
+    this.updateAmbientLightValues();
     this.setFog();
 
     this.effectComposer = new EffectComposer(this.renderer, {
@@ -153,6 +189,11 @@ export class Composer {
     this.ppssaoPass.enabled = ppssaoValues.enabled;
 
     this.fxaaEffect = new FXAAEffect();
+
+    if (environmentConfiguration?.postProcessing?.bloomIntensity) {
+      extrasValues.bloom = environmentConfiguration.postProcessing.bloomIntensity;
+    }
+
     this.bloomEffect = new BloomEffect({
       intensity: extrasValues.bloom,
     });
@@ -223,6 +264,8 @@ export class Composer {
       this.scene.add(this.sun);
     }
 
+    this.updateSunValues();
+
     this.resizeListener = () => {
       this.fitContainer();
     };
@@ -333,6 +376,13 @@ export class Composer {
       if (envMap) {
         envMap.colorSpace = LinearSRGBColorSpace;
         envMap.needsUpdate = true;
+        this.scene.environment = envMap;
+        this.scene.environmentIntensity = envValues.hdrEnvIntensity;
+        this.scene.environmentRotation = new Euler(
+          MathUtils.degToRad(envValues.hdrPolarAngle),
+          MathUtils.degToRad(envValues.hdrAzimuthalAngle),
+          0,
+        );
         this.scene.background = envMap;
         this.scene.backgroundIntensity = envValues.hdrIntensity;
         this.scene.backgroundBlurriness = envValues.hdrBlurriness;
@@ -360,6 +410,13 @@ export class Composer {
         if (envMap) {
           envMap.colorSpace = LinearSRGBColorSpace;
           envMap.needsUpdate = true;
+          this.scene.environment = envMap;
+          this.scene.environmentIntensity = envValues.hdrEnvIntensity;
+          this.scene.environmentRotation = new Euler(
+            MathUtils.degToRad(envValues.hdrPolarAngle),
+            MathUtils.degToRad(envValues.hdrAzimuthalAngle),
+            0,
+          );
           this.scene.background = envMap;
           this.scene.backgroundIntensity = envValues.hdrIntensity;
           this.scene.backgroundBlurriness = envValues.hdrBlurriness;
@@ -429,4 +486,51 @@ export class Composer {
     );
     this.scene.add(this.ambientLight);
   }
+
+  private updateSunValues() {
+    if (typeof this.environmentConfiguration?.sun?.intensity === "number") {
+      sunValues.sunIntensity = this.environmentConfiguration.sun.intensity;
+      this.sun?.setIntensity(this.environmentConfiguration.sun.intensity);
+    }
+    if (typeof this.environmentConfiguration?.sun?.azimuthalAngle === "number") {
+      sunValues.sunPosition.sunAzimuthalAngle = this.environmentConfiguration.sun.azimuthalAngle;
+      this.sun?.setAzimuthalAngle(this.environmentConfiguration.sun.azimuthalAngle);
+    }
+    if (typeof this.environmentConfiguration?.sun?.polarAngle === "number") {
+      sunValues.sunPosition.sunPolarAngle = this.environmentConfiguration.sun.polarAngle;
+      this.sun?.setPolarAngle(this.environmentConfiguration.sun.polarAngle);
+    }
+  }
+
+  private updateHDRValues() {
+    if (typeof this.environmentConfiguration?.skybox?.intensity === "number") {
+      envValues.hdrIntensity = this.environmentConfiguration?.skybox.intensity;
+    }
+    this.scene.backgroundIntensity = envValues.hdrIntensity;
+
+    if (typeof this.environmentConfiguration?.envMap?.intensity === "number") {
+      envValues.hdrEnvIntensity = this.environmentConfiguration?.envMap.intensity;
+    }
+    this.scene.backgroundIntensity = envValues.hdrEnvIntensity;
+    if (typeof this.environmentConfiguration?.skybox?.blurriness === "number") {
+      envValues.hdrBlurriness = this.environmentConfiguration?.skybox.blurriness;
+    }
+    this.scene.backgroundBlurriness = envValues.hdrBlurriness;
+    if (typeof this.environmentConfiguration?.skybox?.azimuthalAngle === "number") {
+      envValues.hdrAzimuthalAngle = this.environmentConfiguration?.skybox.azimuthalAngle;
+      this.setHDRAzimuthalAngle(this.environmentConfiguration?.skybox.azimuthalAngle);
+    }
+    if (typeof this.environmentConfiguration?.skybox?.polarAngle === "number") {
+      envValues.hdrPolarAngle = this.environmentConfiguration?.skybox.polarAngle;
+      this.setHDRPolarAngle(this.environmentConfiguration?.skybox.polarAngle);
+    }
+  }
+
+  private updateAmbientLightValues() {
+    if (typeof this.environmentConfiguration?.ambientLight?.intensity === "number") {
+      envValues.ambientLight.ambientLightIntensity =
+        this.environmentConfiguration.ambientLight.intensity;
+      this.setAmbientLight();
+    }
+  }
 }

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

@@ -24,6 +24,7 @@ const sunOptions = {
 export const envValues = {
   hdrAzimuthalAngle: 0,
   hdrPolarAngle: 0,
+  hdrEnvIntensity: 0.07,
   hdrIntensity: 0.8,
   hdrBlurriness: 0.0,
   ambientLight: {

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";
@@ -59,15 +60,17 @@ export type Networked3dWebExperienceClientConfig = {
   userNetworkAddress: string;
   mmlDocuments?: Array<MMLDocumentConfiguration>;
   animationConfig: AnimationConfig;
-  hdrJpgUrl: string;
+  environmentConfiguration?: EnvironmentConfiguration;
+  skyboxHdrJpgUrl: string;
+  enableTweakPane?: boolean;
 };
 
 export class Networked3dWebExperienceClient {
   private element: HTMLDivElement;
 
   private scene = new Scene();
   private composer: Composer;
-  private tweakPane: TweakPane;
+  private tweakPane?: TweakPane;
   private audioListener = new AudioListener();
 
   private cameraManager: CameraManager;
@@ -129,18 +132,26 @@ export class Networked3dWebExperienceClient {
       mouse_support: false,
     });
 
-    this.composer = new Composer(this.scene, this.cameraManager.camera, true);
-    this.composer.useHDRJPG(this.config.hdrJpgUrl);
+    this.composer = new Composer({
+      scene: this.scene,
+      camera: this.cameraManager.camera,
+      spawnSun: true,
+      environmentConfiguration: this.config.environmentConfiguration,
+    });
+
+    this.composer.useHDRJPG(this.config.skyboxHdrJpgUrl);
     this.element.appendChild(this.composer.renderer.domElement);
 
-    this.tweakPane = new TweakPane(
-      this.element,
-      this.composer.renderer,
-      this.scene,
-      this.composer.effectComposer,
-    );
-    this.cameraManager.setupTweakPane(this.tweakPane);
-    this.composer.setupTweakPane(this.tweakPane);
+    if (this.config.enableTweakPane !== false) {
+      this.tweakPane = new TweakPane(
+        this.element,
+        this.composer.renderer,
+        this.scene,
+        this.composer.effectComposer,
+      );
+      this.cameraManager.setupTweakPane(this.tweakPane);
+      this.composer.setupTweakPane(this.tweakPane);
+    }
 
     const resizeObserver = new ResizeObserver(() => {
       this.composer.fitContainer();
@@ -214,9 +225,11 @@ export class Networked3dWebExperienceClient {
     });
     this.scene.add(this.characterManager.group);
 
-    const groundPlane = new GroundPlane();
-    this.collisionsManager.addMeshesGroup(groundPlane);
-    this.scene.add(groundPlane);
+    if (this.config.environmentConfiguration?.groundPlane !== false) {
+      const groundPlane = new GroundPlane();
+      this.collisionsManager.addMeshesGroup(groundPlane);
+      this.scene.add(groundPlane);
+    }
 
     this.setupMMLScene();
 
@@ -346,7 +359,7 @@ export class Networked3dWebExperienceClient {
     this.cameraManager.update();
     this.composer.sun?.updateCharacterPosition(this.characterManager.localCharacter?.position);
     this.composer.render(this.timeManager);
-    if (this.tweakPane.guiVisible) {
+    if (this.tweakPane?.guiVisible) {
       this.tweakPane.updateStats(this.timeManager);
       this.tweakPane.updateCameraData(this.cameraManager);
       if (this.characterManager.localCharacter && this.characterManager.localController) {