mmainguy/immersive2
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Added background noise. Refactor customEnvironment.ts

Browse Source
This commit is contained in:
Michael Mainguy 2024-05-08 07:55:42 -05:00
parent 01874b9e9e
commit bbe54dc3e3
5 changed files with 57 additions and 84 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

BIN
public/assets/sounds/noise.mp3 Normal file
View File

Binary file not shown.

2
public/sw.js
View File

@ -1,5 +1,5 @@
importScripts('https://storage.googleapis.com/workbox-cdn/releases/7.1.0/workbox-sw.js');
const VERSION = '5';
const VERSION = '6';
const CACHE = "deepdiagram";
const IMAGEDELIVERY_CACHE = "deepdiagram-images";

29
src/diagram/diagramManager.ts
View File

@ -32,19 +32,11 @@ export class DiagramManager {
this._diagramMenuManager = new DiagramMenuManager(this.onDiagramEventObservable, this._controllers, this._config);
this._diagramEntityActionManager = buildEntityActionManager(this._controllers);
this.onDiagramEventObservable.add(this.onDiagramEvent, DiagramEventObserverMask.FROM_DB, true, this);
this.logger.debug("DiagramManager constructed");
this._scene.onMeshRemovedObservable.add((mesh) => {
cleanupOrphanConnections(mesh, this.onDiagramEventObservable);
});
document.addEventListener('uploadImage', (event: CustomEvent) => {
let position = {x: 0, y: 1.6, z: 0};
if (event.detail.position) {
position = {
x: event.detail.position.x,
y: event.detail.position.y,
z: event.detail.position.z
}
}
const diagramEntity: DiagramEntity = {
template: '#image-template',
image: event.detail.data,
@ -60,7 +52,8 @@ export class DiagramManager {
entity: diagramEntity
}, DiagramEventObserverMask.ALL);
}
})
});
this.logger.debug("DiagramManager constructed");
}
public get diagramMenuManager(): DiagramMenuManager {
@ -71,6 +64,7 @@ export class DiagramManager {
return this._controllers;
}
public createCopy(mesh: AbstractMesh, copy: boolean = false): AbstractMesh {
const newMesh = newInstanceFromMeshOrInstance(mesh);
newMesh.id = 'id' + uuidv4();
@ -109,14 +103,13 @@ function newInstanceFromMeshOrInstance(mesh: AbstractMesh): AbstractMesh {
return new InstancedMesh('id' + uuidv4(), (mesh as InstancedMesh).sourceMesh);
}
}
function cleanupOrphanConnections(mesh: AbstractMesh, diagramEventObservable: Observable<DiagramEvent>) {
if (isDiagramEntity(mesh)) {
if (mesh.metadata.template != '#connection-template') {
mesh.getScene().meshes.forEach((m) => {
if (m?.metadata?.to == mesh.id || m?.metadata?.from == mesh.id) {
diagramEventObservable.notifyObservers({type: DiagramEventType.REMOVE, entity: toDiagramEntity(m)});
}
});
}
if (isDiagramEntity(mesh) && mesh.metadata.template != '#connection-template') {
mesh.getScene().meshes.forEach((m) => {
if (m?.metadata?.to == mesh.id || m?.metadata?.from == mesh.id) {
diagramEventObservable.notifyObservers({type: DiagramEventType.REMOVE, entity: toDiagramEntity(m)});
}
});
}
}

65
src/util/customEnvironment.ts
View File

@ -10,6 +10,7 @@ import {
PhysicsShapeType,
PointsCloudSystem,
Scene,
Sound,
Texture,
TransformNode,
Vector3
@ -32,58 +33,36 @@ export class CustomEnvironment {
if (loading) {
loading.remove();
}
this.scene.ambientColor = new Color3(.2, .2, .2);
const light = new HemisphericLight("light1", new Vector3(1, 2, 1), this.scene);
light.groundColor = new Color3(.1, .1, .1)
light.diffuse = new Color3(1, 1, 1);
light.intensity = .8;
light.setDirectionToTarget(new Vector3(.4, .5, .5).normalize());
light.intensity = .5;
const physics = new CustomPhysics(this.scene, config);
physics
.initializeAsync()
.then(() => {
const ground = this.createGround();
new PhysicsAggregate(ground, PhysicsShapeType.BOX, {mass: 0}, this.scene);
createPoints(20, 20);
this.createBackgroundAudio();
this._groundMeshObservable.notifyObservers(ground);
this.createWalls();
});
}
private initSounds() {
/* try {
const sounds = new DiaSounds(this.scene);
window.setTimeout((sound) => {
sound.play()
}, 2000, sounds.background);
const effects: Array<Sound> = sounds.backgroundEffects;
window.setInterval((sounds: Array<Sound>) => {
if (Math.random() < .5) {
return;
}
const MAX_DISTANCE = 40;
const sound = Math.floor(Math.random() * sounds.length);
const x = (Math.random() * MAX_DISTANCE) - (MAX_DISTANCE / 2);
const y = Math.random() * (MAX_DISTANCE / 2);
const z = (Math.random() * MAX_DISTANCE) - (MAX_DISTANCE / 2);
const position = new Vector3(x, y, z);
if (sounds[sound].isPlaying) {
} else {
sounds[sound].setPosition(position);
sounds[sound].setVolume(Math.random() * .3);
sounds[sound].play();
}
}, 2000, effects);
} catch (error) {
}
*/
}
public get groundMeshObservable() {
return this._groundMeshObservable;
}
private createBackgroundAudio() {
const noise = new Sound("backgroundNoise", "/assets/sounds/noise.mp3", this.scene, null, {
loop: true,
volume: .2,
autoplay: true
});
}
private createGround() {
const scene = this.scene;
@ -92,24 +71,23 @@ export class CustomEnvironment {
height: 20,
subdivisions: 1
}, scene);
createPoints(20, 20);
ground.material = createGridMaterial(Color3.FromHexString("#aaffaa"), Color3.FromHexString("#111511"));
//buildAvatar(scene);
return ground;
}
private createWalls() {
const color1 = Color3.FromHexString("#ff9999");
const color2 = Color3.FromHexString("#221111");
const color3 = Color3.FromHexString("#9999ff");
const color4 = Color3.FromHexString("#111115");
this.createWall(new Vector3(0, 10, 10), new Vector3(0, 0, 0), color3, color4);
this.createWall(new Vector3(0, 10, -10), new Vector3(0, Math.PI, 0), color3, color4);
this.createWall(new Vector3(10, 10, 0), new Vector3(0, Math.PI / 2, 0), color1, color2);
this.createWall(new Vector3(-10, 10, 0), new Vector3(0, -Math.PI / 2, 0), color1, color2);
new PhysicsAggregate(ground, PhysicsShapeType.BOX, {mass: 0}, scene);
//buildAvatar(scene);
return ground;
}
private createWall(position: Vector3, rotation: Vector3, color1: Color3, color2: Color3) {
const scene = this.scene;
const wall = MeshBuilder.CreatePlane("wall", {width: 20, height: 20}, scene);
@ -122,6 +100,7 @@ export class CustomEnvironment {
}
}
async function createPoints(divisions: number = 10, scale: number = 80) {
const scene = DefaultScene.Scene;
const half = .5;

45
src/vrApp.ts
View File

@ -29,28 +29,6 @@ export class VrApp {
});
}
public async initialize(scene: Scene) {
setMainCamera(scene);
const spinner = new Spinner();
spinner.show();
const diagramManager = new DiagramManager();
await initDb(diagramManager);
initEnvironment(diagramManager, spinner);
const gamepadManager = new GamepadManager(scene);
addSceneInspector();
const el = document.querySelector('#download');
if (el) {
el.addEventListener('click', () => {
exportGltf();
})
}
if (!localStorage.getItem('tutorialCompleted')) {
this.logger.info('Starting tutorial');
const intro = new Introduction();
}
this.logger.info('Render loop started');
}
private async initializeEngine() {
let engine: WebGPUEngine | Engine = null;
if (webGpu) {
@ -73,6 +51,29 @@ export class VrApp {
scene.render();
});
}
public async initialize(scene: Scene) {
setMainCamera(scene);
const spinner = new Spinner();
spinner.show();
const diagramManager = new DiagramManager();
await initDb(diagramManager);
initEnvironment(diagramManager, spinner);
const gamepadManager = new GamepadManager(scene);
addSceneInspector();
const el = document.querySelector('#download');
if (el) {
el.addEventListener('click', () => {
exportGltf();
})
}
if (!localStorage.getItem('tutorialCompleted')) {
this.logger.info('Starting tutorial');
const intro = new Introduction();
}
this.logger.info('Render loop started');
}
}
const vrApp = new VrApp();
buildQuestLink();