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

Added initial demo config.

Browse Source
This commit is contained in:
Michael Mainguy 2023-08-19 15:45:19 -05:00
parent 3140c180c6
commit 7796a23ad9
7 changed files with 97 additions and 32 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

6
package-lock.json generated
View File

@ -21,6 +21,7 @@
"dexie": "^3.2.4",
"dexie-observable": "^4.0.1-beta.13",
"earcut": "^2.2.4",
"hls.js": "^1.1.4",
"loglevel": "^1.8.1",
"mxgraph": "^4.2.2",
"niceware": "^4.0.0",
@ -2265,6 +2266,11 @@
"resolved": "https://registry.npmjs.org/headers-polyfill/-/headers-polyfill-3.1.2.tgz",
"integrity": "sha512-tWCK4biJ6hcLqTviLXVR9DTRfYGQMXEIUj3gwJ2rZ5wO/at3XtkI4g8mCvFdUF9l1KMBNCfmNAdnahm1cgavQA=="
},
"node_modules/hls.js": {
"version": "1.4.10",
"resolved": "https://registry.npmjs.org/hls.js/-/hls.js-1.4.10.tgz",
"integrity": "sha512-wAVSj4Fm2MqOHy5+BlYnlKxXvJlv5IuZHjlzHu18QmjRzSDFQiUDWdHs5+NsFMQrgKEBwuWDcyvaMC9dUzJ5Uw=="
},
"node_modules/hmac-drbg": {
"version": "1.0.1",
"resolved": "https://registry.npmjs.org/hmac-drbg/-/hmac-drbg-1.0.1.tgz",

1
package.json
View File

@ -25,6 +25,7 @@
"dexie": "^3.2.4",
"dexie-observable": "^4.0.1-beta.13",
"earcut": "^2.2.4",
"hls.js": "^1.1.4",
"loglevel": "^1.8.1",
"mxgraph": "^4.2.2",
"niceware": "^4.0.0",

13
src/app.ts
View File

@ -51,6 +51,7 @@ export class App {
}
async initialize(canvas) {
const config = AppConfig.config;
const logger = log.getLogger('App');
const engine = new Engine(canvas, true);
@ -101,9 +102,14 @@ export class App {
const persistenceManager = new module.IndexdbPersistenceManager("diagram");
diagramManager.setPersistenceManager(persistenceManager);
AppConfig.config.setPersistenceManager(persistenceManager);
persistenceManager.initialize();
persistenceManager.initialize().then(() => {
if (!AppConfig.config?.demoCompleted) {
const intro = new Introduction(scene);
intro.start();
}
});
//const newRelicData = new NewRelicData(persistenceManager, scene);
});
@ -141,10 +147,10 @@ export class App {
*/
window.addEventListener("keydown", (ev) => {
if (ev.key == "z") {
voiceManager.startRecording();
//voiceManager.startRecording();
}
if (ev.key == "x") {
voiceManager.stopRecording();
//voiceManager.stopRecording();
}
if (ev.shiftKey && ev.ctrlKey && ev.altKey && ev.keyCode === 73) {
import("@babylonjs/core/Debug/debugLayer").then(() => {
@ -162,6 +168,7 @@ export class App {
logger.info('keydown event listener added, use Ctrl+Shift+Alt+I to toggle debug layer');
engine.runRenderLoop(() => {
scene.render();
});

14
src/integration/indexdbPersistenceManager.ts
View File

@ -102,6 +102,7 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
if (config) {
this.logger.debug('initialize config', config);
this.configObserver.notifyObservers(config);
if (config.currentDiagramId) {
this.logger.debug('initialize currentDiagramId', config.currentDiagramId);
const currentDiagram = await this.db['diagramlisting'].get(config.currentDiagramId);
@ -114,6 +115,19 @@ export class IndexdbPersistenceManager implements IPersistenceManager {
} else {
this.logger.warn('no currentDiagramId, using default');
}
} else {
this.configObserver.notifyObservers(
{
id: 1,
demoCompleted: false,
gridSnap: 1,
rotateSnap: 0,
createSnap: 0,
turnSnap: 0,
currentDiagramId: null
}
);
}
this.getFilteredEntities().each((e) => {
e.position = this.xyztovec(e.position);

47
src/tutorial/introduction.ts
View File

@ -1,5 +1,6 @@
import {
AbstractMesh,
Color3,
DynamicTexture,
MeshBuilder,
PhysicsAggregate,
@ -13,6 +14,7 @@ import {
import {Button3D, GUI3DManager, TextBlock} from "@babylonjs/gui";
import {DiaSounds} from "../util/diaSounds";
import {AppConfig} from "../util/appConfig";
import Hls from "hls.js";
export class Introduction {
@ -51,19 +53,42 @@ export class Introduction {
});
}
buildVideo(url: string, size: number, position: Vector3): AbstractMesh {
const texture = new VideoTexture("video", url, this.scene, true);
const mesh = this.makeObject("video", position, size);
mesh.material = new StandardMaterial("video_material", this.scene);
(mesh.material as StandardMaterial).diffuseTexture = texture;
texture.update();
buildVideo(src: string, size: number, position: Vector3): AbstractMesh {
const vid = document.createElement("video");
vid.setAttribute('autoplay', 'true');
vid.setAttribute('playsinline', 'true');
vid.setAttribute('src', src);
const texture = new VideoTexture("video", vid, this.scene, true);
const mesh = this.makeObject("video", position, size, 16 / 9);
const material = new StandardMaterial("video_material", this.scene);
material.diffuseTexture = texture;
material.diffuseColor = new Color3(1, 1, 1);
material.emissiveColor = new Color3(1, 1, 1);
mesh.material = material;
if (Hls.isSupported()) {
const hls = new Hls();
hls.loadSource(src);
hls.attachMedia(vid);
hls.on(Hls.Events.MANIFEST_PARSED, function () {
vid.play();
});
} else if (vid.canPlayType('application/vnd.apple.mpegurl')) {
vid.src = src;
vid.addEventListener('loadedmetadata', function () {
vid.play();
});
}
return mesh;
}
makeObject(text: string, position: Vector3, size: number): AbstractMesh {
makeObject(text: string, position: Vector3, size: number, ratio: number = 2): AbstractMesh {
const welcome = MeshBuilder.CreateTiledBox(text + "_box", {width: 1, height: 1, depth: 1}, this.scene);
welcome.position = position;
welcome.scaling = new Vector3(size, size / 2, size);
welcome.scaling = new Vector3(size, size / ratio, size);
const aggregate = new PhysicsAggregate(welcome, PhysicsShapeType.BOX, {
friction: 1,
@ -88,7 +113,7 @@ export class Introduction {
}, this.scene, true);
texture.drawText(text, null, null, "bold 128px Arial", "white", "#00f", true, true);
mesh.material = new StandardMaterial(text + "_material", this.scene);
mesh.material.alpha = .9;
mesh.material.alpha = 1;
(mesh.material as StandardMaterial).diffuseTexture = texture;
texture.update();
return mesh;
@ -117,7 +142,9 @@ export class Introduction {
this.current = this.items.slice(-1);
break;
case 3:
this.items.push(this.buildVideo("A quick video", 5, new Vector3(0, 8, 5)));
const src = 'https://customer-l4pyjzbav11fzy04.cloudflarestream.com/8b906146c75bb5d81e03d199707ed0e9/manifest/video.m3u8'
this.items.push(this.buildVideo(src, 7, new Vector3(0, 15, 6)));
this.current = this.items.slice(-1);
break;
case 4:

27
src/util/appConfig.ts
View File

@ -50,11 +50,11 @@ export class AppConfig {
{value: 90, label: "90 Degrees"}];
public get currentGridSnap(): SnapValue {
return this.gridSnapArray[this.gridSnap];
return this.gridSnapArray[this.gridSnap || 0];
}
public get demoCompleted(): boolean {
return this._demoCompleted;
return this._demoCompleted || false;
}
public set demoCompleted(val: boolean) {
@ -79,7 +79,7 @@ export class AppConfig {
}
public get physicsEnabled(): boolean {
return this._physicsEnabled;
return this._physicsEnabled || false;
}
public set phsyicsEnabled(val: boolean) {
@ -97,19 +97,19 @@ export class AppConfig {
}
public get currentRotateSnap(): SnapValue {
return this.rotateSnapArray[this.rotateSnap];
return this.rotateSnapArray[this.rotateSnap || 0];
}
public get currentCreateSnap(): SnapValue {
return this.createSnapArray[this.createSnap];
return this.createSnapArray[this.createSnap || 0];
}
public get currentTurnSnap(): SnapValue {
return this.turnSnapArray[this._turnSnap];
return this.turnSnapArray[this._turnSnap || 0];
}
public get currentGridSnapIndex(): number {
return this.gridSnap;
return this.gridSnap || 0;
}
public set currentTurnSnapIndex(val: number) {
@ -123,7 +123,7 @@ export class AppConfig {
}
public get currentCreateSnapIndex(): number {
return this.createSnap;
return this.createSnap || 0;
}
public set currentCreateSnapIndex(val: number) {
@ -136,7 +136,7 @@ export class AppConfig {
}
public get currentRotateSnapIndex(): number {
return this.rotateSnap;
return this.rotateSnap || 0;
}
public set currentRotateSnapIndex(val: number) {
@ -218,6 +218,9 @@ export class AppConfig {
this._physicsEnabled = config.physicsEnabled;
this.logger.debug("Physics enabled changed to " + this._physicsEnabled);
}
if (config.demoCompleted) {
this._demoCompleted = config.demoCompleted;
}
if (config.createSnap != this.currentCreateSnap.value ||
config.gridSnap != this.currentGridSnap.value ||
config.rotateSnap != this.currentRotateSnap.value) {
@ -227,7 +230,13 @@ export class AppConfig {
this._turnSnap = 0;
}
this.rotateSnap = this.rotateSnapArray.findIndex((snap) => snap.value == config.rotateSnap);
if (!this.rotateSnap || this.rotateSnap == -1) {
this.rotateSnap = 0;
}
this.createSnap = this.createSnapArray.findIndex((snap) => snap.value == config.createSnap);
if (!this.createSnap || this.createSnap == -1) {
this.createSnap = 0;
}
const gridSnap = this.gridSnapArray.findIndex((snap) => snap.value == config.gridSnap);
if (gridSnap == -1) {
this.gridSnap = this.defaultGridSnapIndex;

17
src/util/appConfigType.ts
View File

@ -1,12 +1,13 @@
export type AppConfigType = {
id?: number,
gridSnap: number,
rotateSnap: number,
createSnap: number,
turnSnap: number,
physicsEnabled: boolean,
newRelicKey: string,
newRelicAccount: string,
demoCompleted: boolean,
currentDiagramId?: string,
gridSnap?: number,
rotateSnap?: number,
createSnap?: number,
turnSnap?: number,
physicsEnabled?: boolean,
newRelicKey?: string,
newRelicAccount?: string,
demoCompleted?: boolean,
}