TSConf 2020 WebXR Demo

WebXR demo app for TSConf2020.

Technologies

BabylonJS
Azure Computer Vision
WebXR
TypeScript
BabylonJS-webpack-es6 starter by Raanan Weber
Mixed Reality
BabylonJS Playground
BabylonJS documentation
BabylonJS WebXR Docs
Check out more Cognitive Services, for Sentiment and Spatial analysis, Anamoly Detection and more.

Getting started

To run the basic scene:

run npm install to install the needed dependencies.
run npm start
A new window should open in your default browser. if it doesn't, open http://localhost:8080
Running npm start will start the webpack dev server with hot-reloading turned on. Open your favorite editor (mine is VSCode, but you can use nano. we don't discriminate) and start editing.

Click on the headset icon on the bottom left corner to view in immersive mode.

The entry point for the entire TypeScript application is ./src/index.ts . Any other file imported in this file will be included in the build.

To debug, open the browser's dev tool. Source maps are ready to be used. In case you are using VSCode, simply run the default debugger task ( Launch Chrome against localhost ) while making sure npm start is still running. This will allow you to debug your application straight in your editor.

Running Computer Vision Sample

To be able to run the demo, you need to sign up for an Azure Cognitive Services Account and add your key and url to the form on get-printed-text.html.

Sign up for a free account for Azure for a Cognitive Services Key.
Go to Azure Portal to create a Computer Vision resource.
Click "Create Resource" and search for Computer Vision.
Once resource is created, on the overview of the resource, find Keys and Endpoints tab.

Copy and paste your key and endpoint url on the html input and add an image to analyse.

Check out more Cognitive Services, for Sentiment and Spatial analysis, Anamoly Detection and more.

Loading different examples

The ./src/scenes directory contains a few examples of scenes that can be loaded. To load a specific scene, add a ?scene=FILENAME to the URL (i.e. to load the ammo physics demo, use http://localhost:8080/?scene=physicsWithAmmo ).

What else can I do

To lint your source code run npm run lint To build the bundle in order to host it, run npm run build . This will bundle your code in production mode, meaning is will minify the code.

Building will take some time, as it will build each sample (and create a different module for each). If you want to speed up the process, define the scene you want to render in createScene.ts (you can see the comment there)