Category Archives: Virtual Reality

Auto Added by WPeMatico

#ifdef WINDOWS – How to enable WebVR with just two lines of code with BabylonJS

BabylonJS is a very powerful JavaScript framework for building 3D apps and games with web standards, used by game developers to build some amazing experiences that can run on any platform and device. This includes Windows Mixed Reality and VR platforms such as Oculus or SteamVR.  
With the latest release of BabylonJS, developers can enable immersive experiences with only 2 lines of code. David Rousset, one of the core authors of BabylonJS, stopped by to show just how easy it is to create fully interactive WebVR apps. Watch the full video above and feel free to reach out on Twitter or in the comments below for questions or comments. 
Happy coding! 

Announcing Babylon.js v3.1

Babylon.js is an open source framework that allows you to easily create stunning 3D experiences in your browser or your web apps.
Built with simplicity and performance in mind, it is the engine that fuels the Remix3D site, Xbox Design Lab or 3D objects preview in Teams or OneDrive on the web.
Earlier this year we announced the third version of the engine. Today I’m glad to announce its first update: Babylon.js v3.1.

The main goal of this version was to provide helpers to achieve high end tasks. Let’s see some of them:

Improving VR experiences with the VRExperienceHelper
Babylon.js v3.0 introduced support for WebVR and VR controllers (including Windows Mixed Reality, Oculus and HTC Vive). With 3.1 release, we wanted to make the process to add VR experience in your code simple.
Therefore, we introduced the VRExperienceHelper which will take care of the following for you:
Create the HTML button to enter VR mode
Create a WebVRCamera (if supported) and a DeviceOrientationCamera as a fallback (this camera will allow you to use device orientation events to control your scene. This is useful on mobiles for instance)
Add support for teleportation and rotation in the same way you can experience it in the Windows Mixed Reality cliff house
Add support for controllers picking (you can use your controllers to interact with the scene) and gaze picking (you can use your gaze to interact)
All of this will be available with literally 3 lines of code:

var VRHelper = scene.createDefaultVRExperience();
VRHelper.enableTeleportation({floorMeshName: "Sponza Floor"});

You can try it here: https://www.babylonjs-playground.com/frame.html#JA1ND3#15

We also added more WebVR demos on our homepage for you to try:

Building a 3D experience with 2 lines of HTML with Babylon.js Viewer
Babylon.js viewer is a new tool to allow you to integrate 3D into your web sites or web apps in a couple of seconds. Everything can be done directly from your web page:

<body>
<babylon model.title="Damaged Helmet"
model.subtitle="BabylonJS"
model.thumbnail="https://www.babylonjs.com/img/favicon/apple-icon-144×144.png"
model.url="https://www.babylonjs.com/Assets/DamagedHelmet/glTF/DamagedHelmet.gltf">
</babylon>
<script src="//viewer.babylonjs.com/viewer.js "></script>
</body>

With these two lines of HTML you can create a complete touch aware 3D viewer anywhere in your page.
http://viewer.babylonjs.com/basicexample
The viewer can be configured in all possible way either with HTML attributes, JavaScript code or even with DOM elements:

<babylon extends="minimal" scene.default-camera="false">
<model url="https://playground.babylonjs.com/scenes/BoomBox.glb" title="GLB Model" subtitle="BabylonJS">
</model>
<camera>
<behaviors>
<auto-rotate type="0"></auto-rotate>
</behaviors>
</camera>
<lights>
<light1 type="1" shadow-enabled="true" position.y="0.5" direction.y="-1" intensity="4.5">
<shadow-config use-blur-exponential-shadow-map="true" use-kernel-blur="true" blur-kernel="64" blur-scale="4">
</shadow-config>
</light1>
</lights>
</babylon>

All the user interface can be updated to reflect your brand and the configuration model can also be extended.
Please follow this link to our documentation to learn mode about the Babylon.js viewer: http://doc.babylonjs.com/extensions/the_babylon_viewer
Create your demo setup with a few lines of code thanks to the EnvironmentHelper
For non-3D experts, setting up a 3D environment (lights, skyboxes, etc.) could be tricky. Therefore, we added a tool named EnvironmentHelper and directly available on the scene to help you with this task.
Using it is straightforward:

var helper = scene.createDefaultEnvironment();
helper.setMainColor(BABYLON.Color3.Teal());

And you can then get a good-looking setup (skybox + ground) adapted to your scene:

The helper offers a lot of options like enabling reflections or shadows:

var helper = scene.createDefaultEnvironment({
enableGroundMirror: true,
groundShadowLevel: 0.6,
});

See a live version here: https://www.babylonjs-playground.com/#4AM01A
Helping the community with our glTF exporter for Autodesk 3dsmax
We introduced support for glTF 2.0 in Babylon.js 3.0 and we wanted to help our community to produce assets in this open standard format. This is the reason why we worked on adding support for glTF export in our Autodesk 3dsmax exporter.
You can now create your scene in 3dsmax and directly export it to glTF in one click:

More info here: http://doc.babylonjs.com/resources/3dsmax_to_gltf
From the client to the server: Introducing the NullEngine
Starting with Babylon.js v3.1, we introduced the NullEngine which is a version of the main Babylon.js engine but we no need for a WebGL capable device.
The NullEngine will obviously not produce any rendering and thus can be used in a node.js / server-side environment.
It can be used to:
Run tests
Run a server-side version of your application / game
Use specific Babylon.js services (like glTF loaders for instance)
More details can be found here: http://doc.babylonjs.com/features/nullengine
Improving the codebase
Babylon.js is entirely written in TypeScript. In order to improve the quality of the code we decided to turn on all strict type checking offered by the latest version of TypeScript (like the strict null check introduced by TypeScript 2.0 or the strict function types added by TypeScript 2.6).
With stricter type checking we can capture errors and bugs at compilation time and thus provide more reliable code for the community.
Improving documentation
Writing good documentation is a complex task. With this release we added more content for beginners. We now have complete course starting from scratch and going through all important aspects of the engine.

We also added several multi-steps guide so you can read and learn at your own pace.
If you want to know more or just want to experiment with our latest demo, please visit http://www.babylonjs.com/.
And if you want to join the community and contribute, please join us on GitHub!

Bringing WebVR to everyone with the Windows 10 Fall Creators Update

Last April, we introduced the WebVR 1.1 API in Microsoft Edge as part of the Windows Creators Update, providing a foundation for developers to create immersive virtual reality experiences with Windows Mixed Reality developer kits. We have been hard at work building on this foundation to provide an end-to-end mixed reality experience with Microsoft Edge, WebVR, and Windows Mixed Reality, in line with our goal to democratize virtual reality this holiday.
On October 17th, EdgeHTML 16 will be released with Windows 10 Fall Creators Update, and the era of Windows Mixed Reality begins as headsets and motion controllers become widely available, enabling low-cost, immersive experiences with WebVR in Microsoft Edge.
In anticipation of this upcoming release, we’re excited to announce (with big thanks to the community and contributors involved) that the popular WebVR frameworks A-Frame, BabylonJS, ReactVR and three.js have now added support for the Windows Mixed Reality platform to their current and upcoming releases.

Version
Immersive View
WebGL context switching
Motion Controllers

master


0.7.0


R88*


2.0.0



* Upcoming release
In EdgeHTML 16, we’ve made a few updates to our WebVR 1.1 implementation that you should be aware of, starting with added support for Windows Mixed Reality motion controllers.
New support for motion controllers
Developers now have the tools to create fully interactive, immersive experiences on the web with our new support for Windows Mixed Reality motion controllers.

When a site is presenting to a headset, connected motion controllers will be available via the Gamepad API.
Adding support to the browser is only half of the story. We have been working with 3rd party middleware libraries to make sure that integrating support for motion controllers into your experience is as seamless a process as possible.
Current releases of both BabylonJS and A-Frame have full support for Windows Mixed Reality headsets and motion controllers.
Controller support includes detection of connected motion controllers, rendering accurate representations of the controllers into the scene, mapping button presses to actions and casting pointing rays into the scene for point-and-commit interactions. For added realism, the controller models animate the buttons and thumbsticks as the devices are manipulated:

Image: Hotel Room, Reno, Nevada / Bob Dass / Creative Commons 2.0
Added support for more Windows Mixed Reality PCs
Windows Mixed Reality supports a wide range of desktop and laptop hardware, with many graphics card configurations. Microsoft Edge has extended support for running WebVR experiences on this broad range of hardware – including machines with multiple graphics cards.
To leverage this support as a WebVR application developer, make sure that you are using the most up to date version of BabylonJS, A-Frame (0.7.0), three.js (r87), ReactVR (2.0.0).
If you are using WebGL directly rather than through one of these libraries, you’ll need to handle the WebGL Context Lost and Context Restored events to take advantage of this wider range of hardware.
The first immersive experience that lets you enjoy the entire Web
Microsoft Edge is now the first stable browser to ship comprehensive support for Virtual Reality.  From within your headset you can view traditional 2D websites, manage your favorites, create new tabs (including InPrivate tabs), and seamlessly transition into WebVR experiences.  And when browsing with Microsoft Edge on the Desktop, you’re still only one click away from launching WebVR content directly into your headset.
Because Microsoft Edge is built on the Universal Windows Platform, it can be used alongside the thousands of other apps supported by Windows Mixed Reality out of the box.

When you encounter a WebVR experience in Microsoft Edge within Mixed Reality, you can seamlessly transition from a 2D page to an immersive experience and back again without ever switching apps or leaving your headset.
Start developing today!
Our updated WebVR implementation is coming in EdgeHTML 16 with the Windows 10 Fall Creators Update, which will be released alongside new Windows Mixed Reality headsets and motion controllers on October 17th. Developers can get started building for WebVR today (no headset required!) via the Windows Insider Program, using the built-in Mixed Reality Simulator. Or, if you have an Acer or HP developer kit, you can try out Mixed Reality today!
You can learn more about the WebVR API with our documentation online, where you’ll find everything you need to get started, including a checklist of things to consider when creating a WebVR experience.
More Information
Finally, check out the talk that Nell Waliczek and Lewis Weaver recently gave at the Microsoft Edge Web Summit for an overview of WebVR, a deep dive into how to use the APIs, and some more good practices and resources:

We can’t wait to see what you build!
Lewis Weaver, Program Manager, WebVR
Nell Waliczek, Principal Software Engineering Lead, WebVR