Giter Club home page Giter Club logo

tsconf2020demo's Introduction

TSConf 2020 WebXR Demo

WebXR demo app for TSConf2020.

Getting started with WebXR Augmented Reality using Babylon.js

Technologies

Getting started

To run the basic scene:

  1. run npm install to install the needed dependencies.
  2. run npm start
  3. 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.

Click on the glasses icon on the bottom left

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.

How to debug WebXR on Chrome Dev Tools Tutorial

Running Computer Vision Sample

Computer Vision Samples

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.

Computer Vision Resource Overview

  • 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)

What is covered

  • Latest typescript version
  • Simple texture loading (using url-loader)
  • dev-server will start on command (webpack-dev-server)
  • A working core-only example of babylon
  • Full debugging with any browser AND VS Code
  • (production) bundle builder.
  • eslint default typescript rules integrated

tsconf2020demo's People

Contributors

yonet avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    ๐Ÿ–– Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. ๐Ÿ“Š๐Ÿ“ˆ๐ŸŽ‰

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google โค๏ธ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.