Category Archives: 3D

Auto Added by WPeMatico

#ifdef WINDOWS – 3D launchers and glTF toolkit

With the Windows 10 Fall Creators Update, when developing experiences for Windows Mixed Reality, a 3D launcher can be defined to override the default 2D launcher and provide a richer experience launching a game or app from the mixed reality home.
Roberto Sonnino and Tom Mignone from the mixed reality team dropped by my office to give me a hands on demonstration as we discussed why developers should consider creating 3D launchers and what is possible when creating 3D tiles. We also covered why the team chose glTF as the file format and how they created the glTF toolkit to make it very easy for developers to modify and optimize glTF assets.
Check out the full video above and feel free to reach out on  Twitter or in the comments below.
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!

New Map Control features in Windows 10 Fall Creators Update

The Maps team has been busy making improvements and adding new features to the Maps platform for the Windows 10 Fall Creators Update. In addition to performance and visual improvements to the 3D engine, we are introducing features requested by users, like the ability to import 3D models into the map and support for layering and binding for map elements. We also are making enhancements to the styling API to allow clients to specify base map styles and visual states for their own map elements. Finally, we are announcing a places API to see relevant information of a place right within the current context of the calling app.
Without further ado, please see the highlights below and keep your feedback coming!
3D Buildings
You might recall that some 3D buildings were missing in the previous release. We have been working hard since then to bring them back (and improve the ones that didn’t look correct) with this update.  Keep an eye out for more 3D buildings in the next few months!

3D Objects
We are adding a new MapElement called MapElement3D. Along with MapModel3D, this new API can be used to import and display 3D objects with ease. Think about fancy 3D push pins, cars, planes, etc.  The possibilities are endless!
Here are some great examples of MapElement3D displaying 3D models at a specific location, orientation and scale on the Windows 10 Map Control:
Avatars

Cars
Clouds
Map Layering APIs
We also are adding a new MapLayer class, the first derivation of which is MapElementsLayer. Unlike the existing MapControl.MapElements API, this can be used to manipulate groups of elements independently as a unit or to designate a joint purpose.
Bind your data to the map using MapControl.Layers
You can bind elements on the map to your own custom collections of business objects with the Map Control.Layers API.
See How To: Display points of interest (POI) on a map.
Map Styling APIs extensions
We are extending the current set of Map Styling APIs for Windows 10 Map Control. In the previous release, we added the MapStylesheet API to allow you to dynamically change the look and feel of the map in real-time. In this release, we are adding support for two new properties on MapElement: MapStyleSheetEntry and MapStyleSheetEntryState, which can be used to more deeply customize the appearance of your map elements using one of the default style entries and states or custom ones.
See How To: Customize Your Map Elements
Here are some examples of the customization that can be done of map elements using the new styling extensions on the Windows 10 Map Control:
Integrate your elements better with the base map using MapStyleSheetEntry
You can make your map elements look like they are part of the base map by setting their style to an existing entry in the map style sheet such as Water. See MapStyleSheetEntry for the full list of entries you can chose from.

Bing logo is rendered by the Windows 10 Map Control through changing the map polygon’s MapStyleSheetEntry property to Water.
Implement states on your map elements using MapStyleSheetEntryState
You can further modify the appearance of your map elements by leveraging default states like Hover and Selected in the map style sheet, or override them to create your own. See MapStyleSheetEntriesStates for the full list of states you can chose from.

Bellevue Square, City Center and Meydenbauer POIs are rendered by the Windows 10 Map Control through overriding the scale of the existing UserPoint entry and changing the map icon’s MapStyleSheetEntryState property to a custom state that extends the existing Hover and Selected entry states.
Place Info
Finally, we are happy to announce the new PlaceInfo API that allows you to see rich relevant information of a place without the need of switching context, in a pop-up UI, right within your own app.

https://github.com/Microsoft/Windows-universal-samples/tree/dev/Samples/MapControl
API Updates and Additions
For a list of the APIs added since Windows 10 Creators Update, please see here the following resources:
MapElement: MapStyleSheetEntry, MapStyleSheetEntryState and Tag properties
MapElement3D
MapElementsLayer
MapStyleSheetEntries
MapStyleSheetEntryStates
PlaceInfo
For more details on all new APIs go to MSDN.

New Tools in Windows Device Portal for the Windows 10 Fall Creators Update

In the Windows 10 Fall Creators Update, Device Portal now offers several new tools from across Windows to help you location test your UWP, explore Mixed Reality, build new hardware peripherals and test your apps new installation pipeline. It’s a little bit of goodness for everyone, and we’re excited to share these with you.
If you’re not familiar with Device Portal, you can check out the blog posts below to see what other tools you can find in Device Portal, or look at the new docs.microsoft.com to learn how to enable it.
And as always, all of these tools are backed by a REST API, so that you can use it from a scripting or client application environment using the Device Portal Wrapper.
Location Based Testing
Most of us don’t have the travel budgets to test our apps across the world – but pretending to travel is almost as good!  The Location tool in Device Portal lets you easily change the location that Windows reports to apps. By tapping the “Override” check box, you can swap out the device location for whatever you set using the map or lat/long text boxes. Be sure to uncheck the box when you’re done so that your location (and timezone) come back to reality – every vacation must end…

Figure 1: The News app keeping me up to date with local headlines!
This also works for web pages in Microsoft Edge, letting you test your webpages in different parts of the world.
Some notes on what this tool can and cannot do:
This doesn’t change the locale of your PC! So the News app above still saw an EN-US user in the middle of Italy.
You may not see all apps using this location. Some programs don’t use the Windows API to determine location or have special logic (e.g. using your IP address) to determine your location.
This tool marks the PositionSource of the location data as “Default.” Some apps may check for the source and alter their behavior based on it.
Happy travels!
USB Diagnostics
This one goes out to all the hardware folks – if “HLK” or “WDK” sound familiar, you might find this handy. The USB team has updated the USBView tool to work inside Device Portal, so developers working on new hardware can have more tooling at their fingertips.
The USB Devices tool can be a bit tricky to find – head to the hamburger menu in the top right, and go to “Add tools to workspace.”  Scroll to the bottom and check the “USB Devices” box, then hit “Add.” And voila – a full view of your systems USB hubs, controllers and peripherals. The hubs and controllers expand to show individual devices using the + (plus) sign, and clicking the gear will expand to show the items properties.

Streaming App Install Debugging
The Windows 10 Creators Update added ““streaming installation” for UWP, which allows a user to launch the app before it finished downloading. In order to make this easy to test, the App Model team has added a Streaming Install Debugger tool to Device Portal. To use it, deploy an app with content groups to the device, then open the Streaming Install Debugger. In it you’ll be able to edit the states of the content groups so you can test your apps behavior as streaming install is being simulated and ensure it behaves correctly when content groups are missing.

For more details, check out Andy Liu’s blog posts about the new App Installer and Streaming Install Debugger tools.
Mixed Reality Tooling
One of the bigger splashes in the Fall Creators Update is the addition of Mixed Reality to Windows Desktop. As part of that release, we’re including a suite of tools to help developers build great Mixed Reality apps. Two of these tools may look familiar to HoloLens developers – 3D View and a Framerate counter. There’s also a new app launch option that appears when you have an immersive headset attached to your PC, which lets you launch your app in Mixed Reality.
Frame rate is an important factor in making mixed reality apps comfortable, and it’s important for developers to optimize performance to hit full frame rate on the systems they support. The Frame Rate tool in the Device Portal helps by showing developers both the frame rate of their app and of the system’s compositor.

The 3D View helps when testing your immersive headset’s interactions with the real world, displaying its position as it moves through space.

Finally, what good is tooling if you can’t actually run your app in your immersive headset? Now, when you have an immersive headset attached, the Installed Apps tool will add a button letting you launch the app in the HMD. While fully immersive apps will always run in Mixed Reality, this new button is particularly useful for 2D UWP apps (or apps that switch between 2D and immersive) when you want to test them in Mixed Reality.

As always, if you have ideas for Device Portal that would help you write or debug apps, please leave us a note on our UserVoice or upvote an existing request. If you run into bugs, please file it with us via the Feedback Hub.
Related Posts:
Using Device Portal to view debug logs for UWP
Using the App File Explorer to see your app data