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

Fixed mobile scene aspect ratios.

Browse Source
This commit is contained in:
Michael Mainguy 2023-09-27 08:31:01 -05:00
parent 4f71fcefbd
commit 6630e52ba4
6 changed files with 203 additions and 53 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

23
index.html
View File

@ -2,9 +2,28 @@
<html> <html>
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta content="width=device-width, initial-scale=1" name="viewport"/>
<title>Deep Diagram</title> <title>Deep Diagram</title>
<style> <style>
body { body {
width: 100vw;
heigth: 100vh;
margin: 0px;
padding: 0px;
aspect-ratio: auto;
}
.scene {
width: 100vw;
height: 100vh;
overflow: hidden;
}
#gameCanvas {
width: 100%;
height: 100%;
margin: 0px;
padding: 0px;
} }
@ -92,5 +111,9 @@
</script> </script>
<script type="module" src="./src/app.ts"></script> <script type="module" src="./src/app.ts"></script>
<div class="scene">
<canvas id="gameCanvas"></canvas>
</div>
</body> </body>
</html> </html>

57
package-lock.json generated
View File

@ -8,12 +8,14 @@
"name": "immersive", "name": "immersive",
"version": "0.0.1", "version": "0.0.1",
"dependencies": { "dependencies": {
"@babylonjs/core": "^6.21.2", "@babylonjs/core": "^6.21.3",
"@babylonjs/gui": "^6.21.2", "@babylonjs/gui": "^6.21.3",
"@babylonjs/havok": "1.1.4", "@babylonjs/havok": "1.1.4",
"@babylonjs/inspector": "^6.21.2", "@babylonjs/inspector": "^6.21.3",
"@babylonjs/loaders": "^6.21.2", "@babylonjs/loaders": "^6.21.3",
"@babylonjs/serializers": "^6.21.2", "@babylonjs/materials": "^6.21.3",
"@babylonjs/procedural-textures": "^6.21.3",
"@babylonjs/serializers": "^6.21.3",
"@cloudflare/workers-types": "^4.20230821.0", "@cloudflare/workers-types": "^4.20230821.0",
"@netlify/functions": "^1.6.0", "@netlify/functions": "^1.6.0",
"@typed-mxgraph/typed-mxgraph": "^1.0.8", "@typed-mxgraph/typed-mxgraph": "^1.0.8",
@ -54,14 +56,14 @@
} }
}, },
"node_modules/@babylonjs/core": { "node_modules/@babylonjs/core": {
"version": "6.21.2", "version": "6.21.3",
"resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-6.21.2.tgz", "resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-6.21.3.tgz",
"integrity": "sha512-vqMrjZWO+ooe0ATzB/7ymDjLk4pNYokgbImS770W6D6votc0I0YP1zVXGNq9lYrQFmwFToV66cfqK5B3Qeqm1A==" "integrity": "sha512-j+UnhCSz3HldEWVHnxRHKGLqhWafju/WGqKaLXncbgo/Fkz48OoFbrec651jv1cBiNx82zdVa59c8VIK6FNSOw=="
}, },
"node_modules/@babylonjs/gui": { "node_modules/@babylonjs/gui": {
"version": "6.21.2", "version": "6.21.3",
"resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-6.21.2.tgz", "resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-6.21.3.tgz",
"integrity": "sha512-i5A6h/gYC/Ew3ygjsPlYk7LB/a2oGIAt4fSVY8Mxthb+nwB+f5G7l1ycyPu4bPWMsivgavGFD6+n4olQU89tlg==", "integrity": "sha512-bsh6GT/tvWIDua1vSg2n3GeMGWnkuW7j9Dpi6+NVRjaXYEKdtbsSuWwND8JVClSoYa23qosIeeNPCqRPB8pq3g==",
"peerDependencies": { "peerDependencies": {
"@babylonjs/core": "^6.0.0" "@babylonjs/core": "^6.0.0"
} }
@ -87,9 +89,9 @@
} }
}, },
"node_modules/@babylonjs/inspector": { "node_modules/@babylonjs/inspector": {
"version": "6.21.2", "version": "6.21.3",
"resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-6.21.2.tgz", "resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-6.21.3.tgz",
"integrity": "sha512-XxKryLtA1tW5HDi/fOWsKP37+lhrnpX0/TDUq8k6rAqzXlsJN/5Q+cPboL9w6fDUOB7Y9F0zpZM2Wguj8Cg07g==", "integrity": "sha512-XJfqYVilSWEDLRy7IaSxkGNAs5U+SHsWBi9+eS49bFsP06fGjcbJjF2ZK1qY7DbMEThbwzwD6VypJtjKaoF9kw==",
"dependencies": { "dependencies": {
"@fortawesome/fontawesome-svg-core": "^6.1.0", "@fortawesome/fontawesome-svg-core": "^6.1.0",
"@fortawesome/free-regular-svg-icons": "^6.0.0", "@fortawesome/free-regular-svg-icons": "^6.0.0",
@ -107,27 +109,34 @@
} }
}, },
"node_modules/@babylonjs/loaders": { "node_modules/@babylonjs/loaders": {
"version": "6.21.2", "version": "6.21.3",
"resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-6.21.2.tgz", "resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-6.21.3.tgz",
"integrity": "sha512-K/2CPutV83GJaayVtourxG5ZSybltzbhdiTx4TGK4/+4WQ/cVJ8NxLMzi7yJmG5mPD+rXqUmG4auISn2XXHQyw==", "integrity": "sha512-2GpMOEQFuih8O/l6IIyGd0i0gCYo6x8LPjD10FBFBVX2dSkazhWDaAQSS8HCZNY2Uennmy83ePzuTf5RvaKDaw==",
"peerDependencies": { "peerDependencies": {
"@babylonjs/core": "^6.0.0", "@babylonjs/core": "^6.0.0",
"babylonjs-gltf2interface": "^6.0.0" "babylonjs-gltf2interface": "^6.0.0"
} }
}, },
"node_modules/@babylonjs/materials": { "node_modules/@babylonjs/materials": {
"version": "6.8.0", "version": "6.21.3",
"resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-6.8.0.tgz", "resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-6.21.3.tgz",
"integrity": "sha512-wx5DbKDRhkUYi20Y89qji9c+E8xLL87bpjJ6T93k1jBEDT0puUQEIGvIb+RgMcq1dAnwML/qjNCGGRDxPA/Cfg==", "integrity": "sha512-oH/ZmiYKTJnvWzaZVNDPSjvekKK9C/eQZaiMcYiPTb39LHJw+bnIJS8NyvWjDLLn4cJ9XfEict69WqMb1XItVA==",
"peer": true, "peerDependencies": {
"@babylonjs/core": "^6.0.0"
}
},
"node_modules/@babylonjs/procedural-textures": {
"version": "6.21.3",
"resolved": "https://registry.npmjs.org/@babylonjs/procedural-textures/-/procedural-textures-6.21.3.tgz",
"integrity": "sha512-S1KIMrrVubk06mxuVeLGH8YngUj1W0zhdYjp2tHP2a7gueARG8a2OhqLW4e0MwFxi7XnP9DuFyzmkK95XZMaKw==",
"peerDependencies": { "peerDependencies": {
"@babylonjs/core": "^6.0.0" "@babylonjs/core": "^6.0.0"
} }
}, },
"node_modules/@babylonjs/serializers": { "node_modules/@babylonjs/serializers": {
"version": "6.21.2", "version": "6.21.3",
"resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-6.21.2.tgz", "resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-6.21.3.tgz",
"integrity": "sha512-N7gU2JQpmm34fGlOs9v45Ha/mvwrIaaSaRq9HclrFpahnaZKnTw321TYZ95Z5AH0zAIJcWDs8yZYoHa95C3I3g==", "integrity": "sha512-E8jerSLDrDkwkNc8D9a9vmvPlNJiaXUl5m6cIUQ317oUk0/pT06NiM/N//HbyjM8ccnkaPUBkNBq4dxtPW/XSw==",
"peerDependencies": { "peerDependencies": {
"@babylonjs/core": "^6.0.0", "@babylonjs/core": "^6.0.0",
"babylonjs-gltf2interface": "^6.0.0" "babylonjs-gltf2interface": "^6.0.0"

12
package.json
View File

@ -15,12 +15,14 @@
"havok": "cp ./node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm ./node_modules/.vite/deps" "havok": "cp ./node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm ./node_modules/.vite/deps"
}, },
"dependencies": { "dependencies": {
"@babylonjs/core": "^6.21.2", "@babylonjs/core": "^6.21.3",
"@babylonjs/gui": "^6.21.2", "@babylonjs/gui": "^6.21.3",
"@babylonjs/havok": "1.1.4", "@babylonjs/havok": "1.1.4",
"@babylonjs/inspector": "^6.21.2", "@babylonjs/inspector": "^6.21.3",
"@babylonjs/loaders": "^6.21.2", "@babylonjs/loaders": "^6.21.3",
"@babylonjs/serializers": "^6.21.2", "@babylonjs/materials": "^6.21.3",
"@babylonjs/procedural-textures": "^6.21.3",
"@babylonjs/serializers": "^6.21.3",
"@cloudflare/workers-types": "^4.20230821.0", "@cloudflare/workers-types": "^4.20230821.0",
"@netlify/functions": "^1.6.0", "@netlify/functions": "^1.6.0",
"@typed-mxgraph/typed-mxgraph": "^1.0.8", "@typed-mxgraph/typed-mxgraph": "^1.0.8",

24
src/app.ts
View File

@ -21,6 +21,7 @@ import {DiagramEventType} from "./diagram/diagramEntity";
import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection"; import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection";
import {DiagramExporter} from "./util/diagramExporter"; import {DiagramExporter} from "./util/diagramExporter";
import {Introduction} from "./tutorial/introduction"; import {Introduction} from "./tutorial/introduction";
import {Spinner} from "./util/spinner";
export class App { export class App {
@ -34,11 +35,9 @@ export class App {
log.getLogger('App').setLevel('debug'); log.getLogger('App').setLevel('debug');
log.getLogger('DiagramManager').setLevel('debug'); log.getLogger('DiagramManager').setLevel('debug');
log.getLogger('PeerjsNetworkConnection').setLevel('debug'); log.getLogger('PeerjsNetworkConnection').setLevel('debug');
const canvas = document.createElement("canvas");
canvas.style.width = "100%"; const canvas = document.querySelector('#gameCanvas');
canvas.style.height = "100%";
canvas.id = "gameCanvas";
document.body.appendChild(canvas);
this.logger.debug('App', 'gameCanvas created'); this.logger.debug('App', 'gameCanvas created');
this.initialize(canvas).then(() => { this.initialize(canvas).then(() => {
this.logger.debug('App', 'Scene Initialized'); this.logger.debug('App', 'Scene Initialized');
@ -52,7 +51,14 @@ export class App {
async initialize(canvas) { async initialize(canvas) {
const engine = new Engine(canvas, true); const engine = new Engine(canvas, true);
engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
window.onresize = () => {
engine.resize();
}
const scene = new Scene(engine); const scene = new Scene(engine);
const spinner = new Spinner(scene);
spinner.show();
const config = new AppConfig(); const config = new AppConfig();
const peerjsNetworkConnection = new PeerjsNetworkConnection(); const peerjsNetworkConnection = new PeerjsNetworkConnection();
@ -66,6 +72,7 @@ export class App {
const toolbox = new Toolbox(scene, controllers); const toolbox = new Toolbox(scene, controllers);
const diagramManager = new DiagramManager(scene, controllers, toolbox, config); const diagramManager = new DiagramManager(scene, controllers, toolbox, config);
peerjsNetworkConnection.diagramEventObservable.add((evt) => { peerjsNetworkConnection.diagramEventObservable.add((evt) => {
this.logger.debug('App', 'peerjs network event', evt); this.logger.debug('App', 'peerjs network event', evt);
diagramManager.onDiagramEventObservable.notifyObservers(evt, 1); diagramManager.onDiagramEventObservable.notifyObservers(evt, 1);
@ -77,7 +84,6 @@ export class App {
}, 2); }, 2);
config.onConfigChangedObservable.add((config) => { config.onConfigChangedObservable.add((config) => {
this.logger.debug('App', 'config changed', config); this.logger.debug('App', 'config changed', config);
worker.postMessage({config: config}); worker.postMessage({config: config});
}, 2); }, 2);
worker.onmessage = (evt) => { worker.onmessage = (evt) => {
@ -138,9 +144,13 @@ export class App {
} }
}); });
spinner.hide();
xr.baseExperience.sessionManager.onXRSessionInit.add((session) => { xr.baseExperience.sessionManager.onXRSessionInit.add((session) => {
session.addEventListener('visibilitychange', (ev) => { session.addEventListener('visibilitychange', (ev) => {
this.logger.debug(ev); this.logger.debug(ev);
}); });
}); });
@ -154,9 +164,7 @@ export class App {
log.debug('App', event.detail); log.debug('App', event.detail);
} }
}); });
} }
}); });
import('./controllers/rigplatform').then((rigmodule) => { import('./controllers/rigplatform').then((rigmodule) => {
const rig = new rigmodule.Rigplatform(scene, xr, diagramManager, controllers); const rig = new rigmodule.Rigplatform(scene, xr, diagramManager, controllers);

20
src/util/customEnvironment.ts
View File

@ -2,7 +2,7 @@ import {
GroundMesh, GroundMesh,
MeshBuilder, MeshBuilder,
Observable, Observable,
PBRMetallicRoughnessMaterial, PBRMaterial,
PhotoDome, PhotoDome,
PhysicsAggregate, PhysicsAggregate,
PhysicsShapeType, PhysicsShapeType,
@ -31,9 +31,13 @@ export class CustomEnvironment {
const ground = this.createGround(); const ground = this.createGround();
this._groundMeshObservable.notifyObservers(ground); this._groundMeshObservable.notifyObservers(ground);
}); });
const photo = new PhotoDome('sky', const photo = new PhotoDome('sky',
'/assets/textures/outdoor_field4.jpeg', {}, '/assets/textures/outdoor_field4.jpeg', {},
scene); scene);
try { try {
const sounds = new DiaSounds(scene); const sounds = new DiaSounds(scene);
window.setTimeout((sound) => { window.setTimeout((sound) => {
@ -71,13 +75,18 @@ export class CustomEnvironment {
private createGround() { private createGround() {
const scene = this.scene; const scene = this.scene;
const groundMaterial = new PBRMetallicRoughnessMaterial("groundMaterial", scene); const groundMaterial = new PBRMaterial("groundMaterial", scene);
const gText = new Texture("/assets/textures/grass1.jpeg", scene); const gText = new Texture("/assets/textures/grass1.jpeg", scene);
gText.uScale = 40; gText.uScale = 30;
gText.vScale = 40; gText.vScale = 30;
groundMaterial.baseTexture = gText; groundMaterial.albedoTexture = gText;
groundMaterial.metallic = 0; groundMaterial.metallic = 0;
groundMaterial.roughness = 1; groundMaterial.roughness = 1;
const grassBump = new Texture("/assets/textures/grassnormal.png", scene);
grassBump.uScale = 20;
grassBump.vScale = 20;
groundMaterial.bumpTexture =
grassBump;
const ground: GroundMesh = MeshBuilder.CreateGround("ground", { const ground: GroundMesh = MeshBuilder.CreateGround("ground", {
width: 100, width: 100,
@ -87,6 +96,7 @@ export class CustomEnvironment {
ground.material = groundMaterial; ground.material = groundMaterial;
new PhysicsAggregate(ground, PhysicsShapeType.BOX, {mass: 0}, scene); new PhysicsAggregate(ground, PhysicsShapeType.BOX, {mass: 0}, scene);
return ground; return ground;
} }
} }

98
src/util/spinner.ts Normal file
View File

@ -0,0 +1,98 @@
import {
AbstractMesh,
Animation,
DynamicTexture,
GPUParticleSystem,
MeshBuilder,
ParticleSystem,
Scene,
SphereParticleEmitter,
StandardMaterial,
Texture
} from "@babylonjs/core";
export class Spinner {
private readonly scene: Scene;
private spinner: AbstractMesh;
private particleSystem: ParticleSystem;
constructor(scene: Scene) {
this.scene = scene;
this.build();
}
public show() {
this.spinner.setEnabled(true);
this.particleSystem.start();
}
public hide() {
this.spinner.setEnabled(false);
this.particleSystem.stop(true);
}
private build() {
const spinner: AbstractMesh = MeshBuilder.CreateSphere("spinner", {diameter: 1}, this.scene);
const material = new StandardMaterial("spinner", this.scene);
const text = new DynamicTexture("spinner", {width: 1024, height: 1024}, this.scene, false);
text.drawText("Please Wait", 250, 500, "bold 150px Segoe UI", "white", "transparent", true, true);
spinner.rotation.z = Math.PI;
material.diffuseTexture = text;
material.diffuseColor.set(.5, .5, 0);
const rotate = new Animation("rotate", "rotation.y", 10,
Animation.ANIMATIONTYPE_FLOAT, Animation.ANIMATIONLOOPMODE_CYCLE);
const keys = [];
keys.push({
frame: 0,
value: 0
});
keys.push({
frame: 30,
value: Math.PI * 2
});
rotate.setKeys(keys);
spinner.animations.push(rotate);
this.scene.beginAnimation(spinner, 0, 30, true);
//material.indexOfRefraction = Math.PI/4;
//material.indexOfRefraction = 1;
/*material.reflectionFresnelParameters = new FresnelParameters();
material.reflectionFresnelParameters.leftColor = Color3.Black();
material.reflectionFresnelParameters.rightColor = Color3.White();
material.reflectionFresnelParameters.power = 1;
*/
material.alpha = .9;
spinner.material = material;
let particleSystem;
if (GPUParticleSystem.IsSupported) {
particleSystem = new GPUParticleSystem("particles", {capacity: 100000}, this.scene);
particleSystem.activeParticleCount = 2048;
} else {
particleSystem = new ParticleSystem("particles", 2048, this.scene);
}
particleSystem.emitRate = 10;
const emitter = new SphereParticleEmitter(.9);
emitter.radiusRange = .2;
particleSystem.particleEmitterType = emitter;
particleSystem.particleTexture = new Texture("/assets/textures/flare.png", this.scene);
particleSystem.minEmitPower = .1;
particleSystem.maxEmitPower = .25;
particleSystem.minLifeTime = .1;
particleSystem.maxLifeTime = .8;
particleSystem.minSize = 0.01;
particleSystem.maxSize = 0.05;
particleSystem.emitter = spinner;
particleSystem.parent = spinner;
spinner.position.y = 1;
this.spinner = spinner;
this.spinner.setEnabled(false);
this.particleSystem = particleSystem;
}
}