Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Loading...
Overview of WebXR and BabylonJS features.
BabylonJS is a JavaScript/TypeScript 3D engine that makes creating WebXR experiences easier for the developer. Check out https://www.babylonjs.com/ for more info and code samples. Below is a great introduction to the tools and capabilities of BabylonJS.
WebXR Code Samples: https://doc.babylonjs.com/how_to/webxr_demos_and_examples
To create a basic scene we need to initialize a scene object. You can think of a scene as a stage that will hold your production. Everything that will be visible to the viewer will be added to the scene.
We need to add a camera object to the scene that will be our viewers perspective. Anything on the scene but not in the view of the camera won't be visible on your canvas.
We also need a light source for our objects to be visible.
Finally, we will create a basic shape(mesh), box.
We will create our scenes, save and share them on playground.
To create a basic BabylonJS scene, we initialize a scene, create camera, light and a mesh and return the scene object.
Scene object gets engine as the input argument. You don't have to worry about the engine when you are working on the playground but when you are working on your local code sample, we will create the engine as well.
A hemispheric light is an easy way to simulate an ambient environment light. In our case, we are doing the bare minimum, just giving a name to the light and set it's location.
Setting y location to 1 while our main object is in the center (0,0,0) location will move the light above the object.
We are creating a Box Mesh by calling BABYLON.MeshBuilder.CreateBox method with the minimum requirements, a name and an options empty object.
Arc Rotate Camera acts like a satellite in orbit around a target and always points towards the target position. In our case, it is pointing towards the box. Where ever you move your camera, it will still point to towards the box.
Arc Rotate Camera parameters are: name you want to give to your camera, alpha(radians) the longitudinal rotation, beta beta (radians) the latitudinal rotation, radius(the distance from the target position), target position(center where the box will be created as a default), scene(optional argument). In this code example scene is not given as an argument and defaults to the scene object on the playground.
Setting beta to 0 or PI can, for technical reasons, cause problems.
Few things to note:
Experimenting and changing any code in the playground and clicking on the Run button will run your code. Running the code will not affect any original code in the playground you are currently using. Original code can be restored by refreshing the browser.
You need to save your changes to create a new version of the the code in Playground. That way, you can share the link with anyone.
Title and Version: As stated.
Language: Typescript/JavaScript switch.
Theme: Choose the theme for the playground
Font size: Set the font size in the editor.
Safe Mode: When the checkbox is ticked the playground issues a "leaving the page?" confirmation warning when you try to unload/reload a freshly-edited, un-saved scene.
Editor: The checkbox hides or un-hides the editor portion of the playground.
Full Screen: Makes the render area full screen.
Editor Full Screen: Makes the editor area full screen.
Format Code: Pretty prints the code.
Minimap: Display the minimap of the code editor.
Inspector: The checkbox toggles the playground scene inspector which shows a multitude of variable values.
Metadata: This is where you describe your playground allowing yourself and other to search the playground database for examples of use.
Menu : Contains Run, New, Clear, Save and Zip as submenus.
Code : Bottom Left Corner - switch to Code View and Editor.
Scene : Bottom Right Corner - switch to Scene View.
We need to add an environment and create an XR Experience. This will automaticly add a button to our scene to go into VR mode.
We can also add the WebXR directly to a loaded model without an environment.
Playground is an online editor that you can write your code and view the results. You can edit your code on the left hand side and see the result on the right. You can find more examples by clicking examples button on the top right menu and searching for concepts.
Run : Commands the playground to try to render your scene.
Save : Causes your scene to be permanently stored in the playground's database and it will issue a unique URL for each save. On save you will be asked to complete the metadata so that it can be searched for. Once saved it is a good idea to bookmark the page so you can return to it later. You could then share the URL with others, for example, if it is not working as you expect you can ask a question in the forum along with the link to your playground.
Download : Allows you to download a zip file named sample.zip. Once downloaded and unzipped, you will see a file named index.html
which contains everything necessary to run the code in your browser, including links to external babylon.js and other files.
New : Places a basic createScene()
function into the editor along with code to initialise the scene variable and provide a camera.
Clear : Empties all the code out of the playground editor. You could then paste in any createScene function you are working on locally.
Settings : The Settings button has a sub menu with extra options
Version : Allows and shows your choice of the BABYLON.js framework, either the current stable one or the latest preview version.
Examples : A drop down menu giving examples of playgrounds with a search filter.
You can simply open up the playground link on your phone or
Loading a 3D model is like uploading an image but for 3D models. You can upload one or multiple models as shown in below code sample.
Below example loads all the models in the path and changes the position.
1) The postion of the house is changed in the above example by setting an integer value to house1.position.y. Try setting scaling the model by setting it's scale value, ex: house1.scale.x.
2) Console.log the house2 object to see what it is. Save and open the developer tools with the short cut: Option + Command + I on mac and Control + Shift + I on windows. Find the console tab to see the printed house object.
WebXR Chrome Dev Tools Testing
Loading takes time and is asynchronous. When we call the function, web browser gives us back a "" that it will give us a result when the loading is complete. Now we can call the can let the browser know what we want to do when the loading is complete inside the .then(whatToDoWhenModelLoadedFunction). We call this function a callback functions.
Dragging an object in 6 .
Remember to add your .env file to gitignore and never commit your key to Github
00:00 Introduction by Chris Noring
02:49 3D Concepts
12:44 Demo: Dinosaur garden
15:01 Introduction by Ayşegül Yönet
15:29 W3C Immersive Web Group https://www.w3.org/immersive-web/
15:56 What is the benefit of Augmented Reality experiences?
17:47 How to add Augmented Reality with BabylonJS demo
22:20 How to run the demo app locally
22:44 How to test AR application with Chrome Developer Tools
24:58 What's next for BabylonJS and WebXR
28:18 Computer Vision demo with Azure Cognitive Services:http://bit.ly/AzureCognitiveServices
29:54 Demo and Resources Links
Code Samples: https://github.com/Yonet/TSConf2020Demo and https://github.com/softchris/dinosaur...
Find
If you are starting a new project, you can use the below :
by Raanan
by Brianzinn
by JohnnyDevNull
by Beg-in
Or you can follow the .
You can use your favorite tool like npm or yarn to add babylon packages. Find more information about .