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 index 66b9799f..90561192 100644 --- 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 index d9f2ee97..913beedb 100644 --- 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 index 4dc0eb2c..2c943922 100644 --- 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 index 0f97ee1a..a4daa25b 100644 --- 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 index ed09c2fa..90401804 100644 --- 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,