Fixed mobile scene aspect ratios.
This commit is contained in:
parent
4f71fcefbd
commit
6630e52ba4
23
index.html
23
index.html
@ -2,9 +2,28 @@
|
||||
<html>
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta content="width=device-width, initial-scale=1" name="viewport"/>
|
||||
<title>Deep Diagram</title>
|
||||
<style>
|
||||
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 type="module" src="./src/app.ts"></script>
|
||||
<div class="scene">
|
||||
<canvas id="gameCanvas"></canvas>
|
||||
</div>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
||||
57
package-lock.json
generated
57
package-lock.json
generated
@ -8,12 +8,14 @@
|
||||
"name": "immersive",
|
||||
"version": "0.0.1",
|
||||
"dependencies": {
|
||||
"@babylonjs/core": "^6.21.2",
|
||||
"@babylonjs/gui": "^6.21.2",
|
||||
"@babylonjs/core": "^6.21.3",
|
||||
"@babylonjs/gui": "^6.21.3",
|
||||
"@babylonjs/havok": "1.1.4",
|
||||
"@babylonjs/inspector": "^6.21.2",
|
||||
"@babylonjs/loaders": "^6.21.2",
|
||||
"@babylonjs/serializers": "^6.21.2",
|
||||
"@babylonjs/inspector": "^6.21.3",
|
||||
"@babylonjs/loaders": "^6.21.3",
|
||||
"@babylonjs/materials": "^6.21.3",
|
||||
"@babylonjs/procedural-textures": "^6.21.3",
|
||||
"@babylonjs/serializers": "^6.21.3",
|
||||
"@cloudflare/workers-types": "^4.20230821.0",
|
||||
"@netlify/functions": "^1.6.0",
|
||||
"@typed-mxgraph/typed-mxgraph": "^1.0.8",
|
||||
@ -54,14 +56,14 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babylonjs/core": {
|
||||
"version": "6.21.2",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-6.21.2.tgz",
|
||||
"integrity": "sha512-vqMrjZWO+ooe0ATzB/7ymDjLk4pNYokgbImS770W6D6votc0I0YP1zVXGNq9lYrQFmwFToV66cfqK5B3Qeqm1A=="
|
||||
"version": "6.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/core/-/core-6.21.3.tgz",
|
||||
"integrity": "sha512-j+UnhCSz3HldEWVHnxRHKGLqhWafju/WGqKaLXncbgo/Fkz48OoFbrec651jv1cBiNx82zdVa59c8VIK6FNSOw=="
|
||||
},
|
||||
"node_modules/@babylonjs/gui": {
|
||||
"version": "6.21.2",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-6.21.2.tgz",
|
||||
"integrity": "sha512-i5A6h/gYC/Ew3ygjsPlYk7LB/a2oGIAt4fSVY8Mxthb+nwB+f5G7l1ycyPu4bPWMsivgavGFD6+n4olQU89tlg==",
|
||||
"version": "6.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/gui/-/gui-6.21.3.tgz",
|
||||
"integrity": "sha512-bsh6GT/tvWIDua1vSg2n3GeMGWnkuW7j9Dpi6+NVRjaXYEKdtbsSuWwND8JVClSoYa23qosIeeNPCqRPB8pq3g==",
|
||||
"peerDependencies": {
|
||||
"@babylonjs/core": "^6.0.0"
|
||||
}
|
||||
@ -87,9 +89,9 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babylonjs/inspector": {
|
||||
"version": "6.21.2",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-6.21.2.tgz",
|
||||
"integrity": "sha512-XxKryLtA1tW5HDi/fOWsKP37+lhrnpX0/TDUq8k6rAqzXlsJN/5Q+cPboL9w6fDUOB7Y9F0zpZM2Wguj8Cg07g==",
|
||||
"version": "6.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/inspector/-/inspector-6.21.3.tgz",
|
||||
"integrity": "sha512-XJfqYVilSWEDLRy7IaSxkGNAs5U+SHsWBi9+eS49bFsP06fGjcbJjF2ZK1qY7DbMEThbwzwD6VypJtjKaoF9kw==",
|
||||
"dependencies": {
|
||||
"@fortawesome/fontawesome-svg-core": "^6.1.0",
|
||||
"@fortawesome/free-regular-svg-icons": "^6.0.0",
|
||||
@ -107,27 +109,34 @@
|
||||
}
|
||||
},
|
||||
"node_modules/@babylonjs/loaders": {
|
||||
"version": "6.21.2",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-6.21.2.tgz",
|
||||
"integrity": "sha512-K/2CPutV83GJaayVtourxG5ZSybltzbhdiTx4TGK4/+4WQ/cVJ8NxLMzi7yJmG5mPD+rXqUmG4auISn2XXHQyw==",
|
||||
"version": "6.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/loaders/-/loaders-6.21.3.tgz",
|
||||
"integrity": "sha512-2GpMOEQFuih8O/l6IIyGd0i0gCYo6x8LPjD10FBFBVX2dSkazhWDaAQSS8HCZNY2Uennmy83ePzuTf5RvaKDaw==",
|
||||
"peerDependencies": {
|
||||
"@babylonjs/core": "^6.0.0",
|
||||
"babylonjs-gltf2interface": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babylonjs/materials": {
|
||||
"version": "6.8.0",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-6.8.0.tgz",
|
||||
"integrity": "sha512-wx5DbKDRhkUYi20Y89qji9c+E8xLL87bpjJ6T93k1jBEDT0puUQEIGvIb+RgMcq1dAnwML/qjNCGGRDxPA/Cfg==",
|
||||
"peer": true,
|
||||
"version": "6.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/materials/-/materials-6.21.3.tgz",
|
||||
"integrity": "sha512-oH/ZmiYKTJnvWzaZVNDPSjvekKK9C/eQZaiMcYiPTb39LHJw+bnIJS8NyvWjDLLn4cJ9XfEict69WqMb1XItVA==",
|
||||
"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": {
|
||||
"@babylonjs/core": "^6.0.0"
|
||||
}
|
||||
},
|
||||
"node_modules/@babylonjs/serializers": {
|
||||
"version": "6.21.2",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-6.21.2.tgz",
|
||||
"integrity": "sha512-N7gU2JQpmm34fGlOs9v45Ha/mvwrIaaSaRq9HclrFpahnaZKnTw321TYZ95Z5AH0zAIJcWDs8yZYoHa95C3I3g==",
|
||||
"version": "6.21.3",
|
||||
"resolved": "https://registry.npmjs.org/@babylonjs/serializers/-/serializers-6.21.3.tgz",
|
||||
"integrity": "sha512-E8jerSLDrDkwkNc8D9a9vmvPlNJiaXUl5m6cIUQ317oUk0/pT06NiM/N//HbyjM8ccnkaPUBkNBq4dxtPW/XSw==",
|
||||
"peerDependencies": {
|
||||
"@babylonjs/core": "^6.0.0",
|
||||
"babylonjs-gltf2interface": "^6.0.0"
|
||||
|
||||
12
package.json
12
package.json
@ -15,12 +15,14 @@
|
||||
"havok": "cp ./node_modules/@babylonjs/havok/lib/esm/HavokPhysics.wasm ./node_modules/.vite/deps"
|
||||
},
|
||||
"dependencies": {
|
||||
"@babylonjs/core": "^6.21.2",
|
||||
"@babylonjs/gui": "^6.21.2",
|
||||
"@babylonjs/core": "^6.21.3",
|
||||
"@babylonjs/gui": "^6.21.3",
|
||||
"@babylonjs/havok": "1.1.4",
|
||||
"@babylonjs/inspector": "^6.21.2",
|
||||
"@babylonjs/loaders": "^6.21.2",
|
||||
"@babylonjs/serializers": "^6.21.2",
|
||||
"@babylonjs/inspector": "^6.21.3",
|
||||
"@babylonjs/loaders": "^6.21.3",
|
||||
"@babylonjs/materials": "^6.21.3",
|
||||
"@babylonjs/procedural-textures": "^6.21.3",
|
||||
"@babylonjs/serializers": "^6.21.3",
|
||||
"@cloudflare/workers-types": "^4.20230821.0",
|
||||
"@netlify/functions": "^1.6.0",
|
||||
"@typed-mxgraph/typed-mxgraph": "^1.0.8",
|
||||
|
||||
24
src/app.ts
24
src/app.ts
@ -21,6 +21,7 @@ import {DiagramEventType} from "./diagram/diagramEntity";
|
||||
import {PeerjsNetworkConnection} from "./integration/peerjsNetworkConnection";
|
||||
import {DiagramExporter} from "./util/diagramExporter";
|
||||
import {Introduction} from "./tutorial/introduction";
|
||||
import {Spinner} from "./util/spinner";
|
||||
|
||||
|
||||
export class App {
|
||||
@ -34,11 +35,9 @@ export class App {
|
||||
log.getLogger('App').setLevel('debug');
|
||||
log.getLogger('DiagramManager').setLevel('debug');
|
||||
log.getLogger('PeerjsNetworkConnection').setLevel('debug');
|
||||
const canvas = document.createElement("canvas");
|
||||
canvas.style.width = "100%";
|
||||
canvas.style.height = "100%";
|
||||
canvas.id = "gameCanvas";
|
||||
document.body.appendChild(canvas);
|
||||
|
||||
const canvas = document.querySelector('#gameCanvas');
|
||||
|
||||
this.logger.debug('App', 'gameCanvas created');
|
||||
this.initialize(canvas).then(() => {
|
||||
this.logger.debug('App', 'Scene Initialized');
|
||||
@ -52,7 +51,14 @@ export class App {
|
||||
async initialize(canvas) {
|
||||
|
||||
const engine = new Engine(canvas, true);
|
||||
engine.setHardwareScalingLevel(1 / window.devicePixelRatio);
|
||||
window.onresize = () => {
|
||||
engine.resize();
|
||||
}
|
||||
|
||||
const scene = new Scene(engine);
|
||||
const spinner = new Spinner(scene);
|
||||
spinner.show();
|
||||
const config = new AppConfig();
|
||||
const peerjsNetworkConnection = new PeerjsNetworkConnection();
|
||||
|
||||
@ -66,6 +72,7 @@ export class App {
|
||||
const toolbox = new Toolbox(scene, controllers);
|
||||
|
||||
const diagramManager = new DiagramManager(scene, controllers, toolbox, config);
|
||||
|
||||
peerjsNetworkConnection.diagramEventObservable.add((evt) => {
|
||||
this.logger.debug('App', 'peerjs network event', evt);
|
||||
diagramManager.onDiagramEventObservable.notifyObservers(evt, 1);
|
||||
@ -77,7 +84,6 @@ export class App {
|
||||
}, 2);
|
||||
config.onConfigChangedObservable.add((config) => {
|
||||
this.logger.debug('App', 'config changed', config);
|
||||
|
||||
worker.postMessage({config: config});
|
||||
}, 2);
|
||||
worker.onmessage = (evt) => {
|
||||
@ -138,9 +144,13 @@ export class App {
|
||||
}
|
||||
|
||||
});
|
||||
|
||||
spinner.hide();
|
||||
|
||||
xr.baseExperience.sessionManager.onXRSessionInit.add((session) => {
|
||||
session.addEventListener('visibilitychange', (ev) => {
|
||||
this.logger.debug(ev);
|
||||
|
||||
});
|
||||
});
|
||||
|
||||
@ -154,9 +164,7 @@ export class App {
|
||||
log.debug('App', event.detail);
|
||||
}
|
||||
});
|
||||
|
||||
}
|
||||
|
||||
});
|
||||
import('./controllers/rigplatform').then((rigmodule) => {
|
||||
const rig = new rigmodule.Rigplatform(scene, xr, diagramManager, controllers);
|
||||
|
||||
@ -2,7 +2,7 @@ import {
|
||||
GroundMesh,
|
||||
MeshBuilder,
|
||||
Observable,
|
||||
PBRMetallicRoughnessMaterial,
|
||||
PBRMaterial,
|
||||
PhotoDome,
|
||||
PhysicsAggregate,
|
||||
PhysicsShapeType,
|
||||
@ -31,9 +31,13 @@ export class CustomEnvironment {
|
||||
const ground = this.createGround();
|
||||
this._groundMeshObservable.notifyObservers(ground);
|
||||
});
|
||||
|
||||
|
||||
const photo = new PhotoDome('sky',
|
||||
'/assets/textures/outdoor_field4.jpeg', {},
|
||||
scene);
|
||||
|
||||
|
||||
try {
|
||||
const sounds = new DiaSounds(scene);
|
||||
window.setTimeout((sound) => {
|
||||
@ -71,13 +75,18 @@ export class CustomEnvironment {
|
||||
|
||||
private createGround() {
|
||||
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);
|
||||
gText.uScale = 40;
|
||||
gText.vScale = 40;
|
||||
groundMaterial.baseTexture = gText;
|
||||
gText.uScale = 30;
|
||||
gText.vScale = 30;
|
||||
groundMaterial.albedoTexture = gText;
|
||||
groundMaterial.metallic = 0;
|
||||
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", {
|
||||
width: 100,
|
||||
@ -87,6 +96,7 @@ export class CustomEnvironment {
|
||||
|
||||
ground.material = groundMaterial;
|
||||
new PhysicsAggregate(ground, PhysicsShapeType.BOX, {mass: 0}, scene);
|
||||
|
||||
return ground;
|
||||
}
|
||||
}
|
||||
98
src/util/spinner.ts
Normal file
98
src/util/spinner.ts
Normal 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;
|
||||
|
||||
|
||||
}
|
||||
}
|
||||
Loading…
Reference in New Issue
Block a user