Skip to content

Commit

Permalink
Rename env config fields
Browse files Browse the repository at this point in the history
  • Loading branch information
@MarcusLongmuir
MarcusLongmuir committed Jun 9, 2024
1 parent 8634a66 commit d4d3b1b
Show file tree
Hide file tree
Showing 4 changed files with 117 additions and 76 deletions.
3 changes: 0 additions & 3 deletions example/multi-user-3d-web-experience/server/mml-documents/example-mml.html
View file
Original file line number Diff line number Diff line change
@@ -1,8 +1,5 @@
<m-group id="stairs" z="10" y="0.1"></m-group>

<!--<m-model x="-3" src="http://localhost:8080/assets/models/bot.glb"></m-model>-->
<!--<m-model x="3" src="http://localhost:7079/assets/draco-duck.glb"></m-model>-->

<script>
const stairs = document.getElementById("stairs");

Expand Down
84 changes: 46 additions & 38 deletions packages/3d-web-client-core/src/rendering/composer.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -150,7 +150,7 @@ export class Composer {

this.environmentConfiguration = environmentConfiguration;

this.updateHDRValues();
this.updateSkyboxAndEnvValues();
this.updateAmbientLightValues();
this.setFog();

Expand Down Expand Up @@ -288,8 +288,14 @@ export class Composer {
this.spawnSun,
this.sun,
this.setHDRIFromFile.bind(this),
this.setHDRAzimuthalAngle.bind(this),
this.setHDRPolarAngle.bind(this),
(azimuthalAngle: number) => {
envValues.skyboxAzimuthalAngle = azimuthalAngle;
this.updateSkyboxRotation();
},
(polarAngle: number) => {
envValues.skyboxPolarAngle = polarAngle;
this.updateSkyboxRotation();
},
this.setAmbientLight.bind(this),
this.setFog.bind(this),
);
Expand Down Expand Up @@ -348,18 +354,15 @@ export class Composer {
this.renderer.render(this.postPostScene, this.camera);
}

public setHDRAzimuthalAngle(azimuthalAngle: number) {
public updateSkyboxRotation() {
this.scene.backgroundRotation = new Euler(
MathUtils.degToRad(envValues.hdrPolarAngle),
MathUtils.degToRad(azimuthalAngle),
MathUtils.degToRad(envValues.skyboxPolarAngle),
MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
0,
);
}

public setHDRPolarAngle(polarAngle: number) {
this.scene.backgroundRotation = new Euler(
MathUtils.degToRad(polarAngle),
MathUtils.degToRad(envValues.hdrAzimuthalAngle),
this.scene.environmentRotation = new Euler(
MathUtils.degToRad(envValues.skyboxPolarAngle),
MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
0,
);
}
Expand All @@ -377,18 +380,18 @@ export class Composer {
envMap.colorSpace = LinearSRGBColorSpace;
envMap.needsUpdate = true;
this.scene.environment = envMap;
this.scene.environmentIntensity = envValues.hdrEnvIntensity;
this.scene.environmentIntensity = envValues.envMapIntensity;
this.scene.environmentRotation = new Euler(
MathUtils.degToRad(envValues.hdrPolarAngle),
MathUtils.degToRad(envValues.hdrAzimuthalAngle),
MathUtils.degToRad(envValues.skyboxPolarAngle),
MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
0,
);
this.scene.background = envMap;
this.scene.backgroundIntensity = envValues.hdrIntensity;
this.scene.backgroundBlurriness = envValues.hdrBlurriness;
this.scene.backgroundIntensity = envValues.skyboxIntensity;
this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
this.scene.backgroundRotation = new Euler(
MathUtils.degToRad(envValues.hdrPolarAngle),
MathUtils.degToRad(envValues.hdrAzimuthalAngle),
MathUtils.degToRad(envValues.skyboxPolarAngle),
MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
0,
);
this.isEnvHDRI = true;
Expand All @@ -401,7 +404,9 @@ export class Composer {
}

public useHDRI(url: string, fromFile: boolean = false): void {
if ((this.isEnvHDRI && fromFile === false) || !this.renderer) return;
if ((this.isEnvHDRI && fromFile === false) || !this.renderer) {
return;
}
const pmremGenerator = new PMREMGenerator(this.renderer);
new RGBELoader(new LoadingManager()).load(
url,
Expand All @@ -411,15 +416,15 @@ export class Composer {
envMap.colorSpace = LinearSRGBColorSpace;
envMap.needsUpdate = true;
this.scene.environment = envMap;
this.scene.environmentIntensity = envValues.hdrEnvIntensity;
this.scene.environmentIntensity = envValues.envMapIntensity;
this.scene.environmentRotation = new Euler(
MathUtils.degToRad(envValues.hdrPolarAngle),
MathUtils.degToRad(envValues.hdrAzimuthalAngle),
MathUtils.degToRad(envValues.skyboxPolarAngle),
MathUtils.degToRad(envValues.skyboxAzimuthalAngle),
0,
);
this.scene.background = envMap;
this.scene.backgroundIntensity = envValues.hdrIntensity;
this.scene.backgroundBlurriness = envValues.hdrBlurriness;
this.scene.backgroundIntensity = envValues.skyboxIntensity;
this.scene.backgroundBlurriness = envValues.skyboxBlurriness;
this.isEnvHDRI = true;
texture.dispose();
pmremGenerator!.dispose();
Expand Down Expand Up @@ -502,27 +507,30 @@ export class Composer {
}
}

private updateHDRValues() {
if (typeof this.environmentConfiguration?.skybox?.intensity === "number") {
envValues.hdrIntensity = this.environmentConfiguration?.skybox.intensity;
private updateSkyboxAndEnvValues() {
if (typeof this.environmentConfiguration?.envMap?.intensity === "number") {
envValues.envMapIntensity = this.environmentConfiguration?.envMap.intensity;
}
this.scene.backgroundIntensity = envValues.hdrIntensity;
this.scene.environmentIntensity = envValues.envMapIntensity;

if (typeof this.environmentConfiguration?.envMap?.intensity === "number") {
envValues.hdrEnvIntensity = this.environmentConfiguration?.envMap.intensity;
if (typeof this.environmentConfiguration?.skybox?.intensity === "number") {
envValues.skyboxIntensity = this.environmentConfiguration?.skybox.intensity;
}
this.scene.backgroundIntensity = envValues.hdrEnvIntensity;
this.scene.backgroundIntensity = envValues.skyboxIntensity;

if (typeof this.environmentConfiguration?.skybox?.blurriness === "number") {
envValues.hdrBlurriness = this.environmentConfiguration?.skybox.blurriness;
envValues.skyboxBlurriness = this.environmentConfiguration?.skybox.blurriness;
}
this.scene.backgroundBlurriness = envValues.hdrBlurriness;
this.scene.backgroundBlurriness = envValues.skyboxBlurriness;

if (typeof this.environmentConfiguration?.skybox?.azimuthalAngle === "number") {
envValues.hdrAzimuthalAngle = this.environmentConfiguration?.skybox.azimuthalAngle;
this.setHDRAzimuthalAngle(this.environmentConfiguration?.skybox.azimuthalAngle);
envValues.skyboxAzimuthalAngle = this.environmentConfiguration?.skybox.azimuthalAngle;
this.updateSkyboxRotation();
}

if (typeof this.environmentConfiguration?.skybox?.polarAngle === "number") {
envValues.hdrPolarAngle = this.environmentConfiguration?.skybox.polarAngle;
this.setHDRPolarAngle(this.environmentConfiguration?.skybox.polarAngle);
envValues.skyboxPolarAngle = this.environmentConfiguration?.skybox.polarAngle;
this.updateSkyboxRotation();
}
}

Expand Down
15 changes: 8 additions & 7 deletions packages/3d-web-client-core/src/tweakpane/TweakPane.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -104,9 +104,10 @@ export class TweakPane {

this.export = this.gui.addFolder({ title: "import / export", expanded: false });

window.addEventListener("keydown", this.processKey.bind(this));
this.setupRenderPane = this.setupRenderPane.bind(this);
this.setupGUIListeners.bind(this)();
window.addEventListener("keydown", (e) => {
this.processKey(e);
});
this.setupGUIListeners();
}

private setupGUIListeners(): void {
Expand Down Expand Up @@ -137,8 +138,8 @@ export class TweakPane {
hasLighting: boolean,
sun: Sun | null,
setHDR: () => void,
setHDRAzimuthalAngle: (azimuthalAngle: number) => void,
setHDRPolarAngle: (azimuthalAngle: number) => void,
setSkyboxAzimuthalAngle: (azimuthalAngle: number) => void,
setSkyboxPolarAngle: (azimuthalAngle: number) => void,
setAmbientLight: () => void,
setFog: () => void,
): void {
Expand All @@ -156,8 +157,8 @@ export class TweakPane {
this.environment.setupChangeEvent(
this.scene,
setHDR,
setHDRAzimuthalAngle,
setHDRPolarAngle,
setSkyboxAzimuthalAngle,
setSkyboxPolarAngle,
setAmbientLight,
setFog,
sun,
Expand Down
91 changes: 63 additions & 28 deletions packages/3d-web-client-core/src/tweakpane/blades/environmentFolder.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -22,11 +22,11 @@ const sunOptions = {
};

export const envValues = {
hdrAzimuthalAngle: 0,
hdrPolarAngle: 0,
hdrEnvIntensity: 0.07,
hdrIntensity: 0.8,
hdrBlurriness: 0.0,
skyboxAzimuthalAngle: 0,
skyboxPolarAngle: 0,
envMapIntensity: 0.07,
skyboxIntensity: 0.8,
skyboxBlurriness: 0.0,
ambientLight: {
ambientLightIntensity: 0.27,
ambientLightColor: { r: 1, g: 1, b: 1 },
Expand All @@ -39,10 +39,10 @@ export const envValues = {
};

const envOptions = {
hdrAzimuthalAngle: { min: 0, max: 360, step: 1 },
hdrPolarAngle: { min: 0, max: 360, step: 1 },
hdrIntensity: { min: 0, max: 1.3, step: 0.01 },
hdrBlurriness: { min: 0, max: 0.1, step: 0.001 },
skyboxAzimuthalAngle: { min: 0, max: 360, step: 1 },
skyboxPolarAngle: { min: 0, max: 360, step: 1 },
skyboxIntensity: { min: 0, max: 1.3, step: 0.01 },
skyboxBlurriness: { min: 0, max: 0.1, step: 0.001 },
ambientLight: {
ambientLightIntensity: { min: 0, max: 1, step: 0.01 },
},
Expand All @@ -55,12 +55,18 @@ const envOptions = {
export class EnvironmentFolder {
public folder: FolderApi;
private sun: FolderApi;
private envMap: FolderApi;
private hdrButton: ButtonApi;
private skybox: FolderApi;
private ambient: FolderApi;
private fog: FolderApi;

constructor(parentFolder: FolderApi, expand: boolean = false) {
this.folder = parentFolder.addFolder({ title: "environment", expanded: expand });
this.sun = this.folder.addFolder({ title: "sun", expanded: true });
this.envMap = this.folder.addFolder({ title: "envMap", expanded: true });
this.fog = this.folder.addFolder({ title: "fog", expanded: true });
this.skybox = this.folder.addFolder({ title: "skybox", expanded: true });
this.ambient = this.folder.addFolder({ title: "ambient", expanded: true });

this.sun.addBinding(
Expand All @@ -78,11 +84,14 @@ export class EnvironmentFolder {
color: { type: "float" },
});

this.hdrButton = this.ambient.addButton({ title: "Set HDRI" });
this.ambient.addBinding(envValues, "hdrIntensity", envOptions.hdrIntensity);
this.ambient.addBinding(envValues, "hdrBlurriness", envOptions.hdrBlurriness);
this.ambient.addBinding(envValues, "hdrAzimuthalAngle", envOptions.hdrAzimuthalAngle);
this.ambient.addBinding(envValues, "hdrPolarAngle", envOptions.hdrPolarAngle);
this.hdrButton = this.skybox.addButton({ title: "Set HDRI" });
this.skybox.addBinding(envValues, "skyboxIntensity", envOptions.skyboxIntensity);
this.skybox.addBinding(envValues, "skyboxBlurriness", envOptions.skyboxBlurriness);
this.skybox.addBinding(envValues, "skyboxAzimuthalAngle", envOptions.skyboxAzimuthalAngle);
this.skybox.addBinding(envValues, "skyboxPolarAngle", envOptions.skyboxPolarAngle);

this.envMap.addBinding(envValues, "envMapIntensity", envOptions.skyboxIntensity);

this.ambient.addBinding(
envValues.ambientLight,
"ambientLightIntensity",
Expand All @@ -91,18 +100,19 @@ export class EnvironmentFolder {
this.ambient.addBinding(envValues.ambientLight, "ambientLightColor", {
color: { type: "float" },
});
this.ambient.addBinding(envValues.fog, "fogNear", envOptions.fog.fogNear);
this.ambient.addBinding(envValues.fog, "fogFar", envOptions.fog.fogFar);
this.ambient.addBinding(envValues.fog, "fogColor", {

this.fog.addBinding(envValues.fog, "fogNear", envOptions.fog.fogNear);
this.fog.addBinding(envValues.fog, "fogFar", envOptions.fog.fogFar);
this.fog.addBinding(envValues.fog, "fogColor", {
color: { type: "float" },
});
}

public setupChangeEvent(
scene: Scene,
setHDR: () => void,
setHDRAzimuthalAngle: (azimuthalAngle: number) => void,
setHDRPolarAngle: (azimuthalAngle: number) => void,
setSkyboxAzimuthalAngle: (azimuthalAngle: number) => void,
setSkyboxPolarAngle: (polarAngle: number) => void,
setAmbientLight: () => void,
setFog: () => void,
sun: Sun | null,
Expand Down Expand Up @@ -140,29 +150,49 @@ export class EnvironmentFolder {
break;
}
});

this.hdrButton.on("click", () => {
setHDR();
});
this.ambient.on("change", (e: TpChangeEvent<unknown, BladeApi<BladeController<View>>>) => {

this.envMap.on("change", (e: TpChangeEvent<unknown, BladeApi<BladeController<View>>>) => {
const target = (e.target as any).key;
if (!target) return;
switch (target) {
case "envMapIntensity":
scene.environmentIntensity = e.value as number;
break;
}
});

this.skybox.on("change", (e: TpChangeEvent<unknown, BladeApi<BladeController<View>>>) => {
const target = (e.target as any).key;
if (!target) return;
switch (target) {
case "hdrAzimuthalAngle": {
case "skyboxAzimuthalAngle": {
const value = e.value as number;
setHDRAzimuthalAngle(value);
setSkyboxAzimuthalAngle(value);
break;
}
case "hdrPolarAngle": {
case "skyboxPolarAngle": {
const value = e.value as number;
setHDRPolarAngle(value);
envValues.skyboxPolarAngle = value;
setSkyboxPolarAngle(value);
break;
}
case "hdrIntensity":
case "skyboxIntensity":
scene.backgroundIntensity = e.value as number;
break;
case "hdrBlurriness":
case "skyboxBlurriness":
scene.backgroundBlurriness = e.value as number;
break;
}
});

this.ambient.on("change", (e: TpChangeEvent<unknown, BladeApi<BladeController<View>>>) => {
const target = (e.target as any).key;
if (!target) return;
switch (target) {
case "ambientLightIntensity": {
envValues.ambientLight.ambientLightIntensity = e.value as number;
setAmbientLight();
Expand All @@ -178,6 +208,13 @@ export class EnvironmentFolder {
setAmbientLight();
break;
}
}
});

this.fog.on("change", (e: TpChangeEvent<unknown, BladeApi<BladeController<View>>>) => {
const target = (e.target as any).key;
if (!target) return;
switch (target) {
case "fogNear": {
envValues.fog.fogNear = e.value as number;
setFog();
Expand All @@ -198,8 +235,6 @@ export class EnvironmentFolder {
setFog();
break;
}
default:
break;
}
});
}
Expand Down

0 comments on commit d4d3b1b

Please sign in to comment.