Introduction to WebGL 3D with HTML5 and Babylon.js Loading assets Introduction to WebGL 3D with HTML5 and Babylon.js

WHO ARE WE? DAVID ROUSSET DAVID CATUHE Geeks, web developers, 3D addicts DAVID ROUSSET DAVID CATUHE TECHNICAL EVANGELIST PRINCIPAL PROGRAM MANAGER Twitter: @davrous http://blogs.msdn.com/davrous Twitter: @deltakosh http://blogs.msdn.com/eternalcoding Do not try to tune your speakers, the weird sound is due to French accent…

Introduction to WebGL 3D with HTML5 and Babylon.js Course topics Introduction to WebGL 3D with HTML5 and Babylon.js Day One 01 | 3D on the Web: Understanding the Basics 02 | WebGL Basics 03 | Using Babylon.js for Beginners 04 | Understanding materials and inputs Day Two 01 | Game Pipeline Integration with Babylon.js 02 | Loading Assets 03 | Babylon.js: Advanced Features 04 | Special Effects

AGENDA Loading your scene, meshes and assets 1 Loading your scene, meshes and assets Creating a 3D Windows Universal App 2 3 Understanding offline mode

Loading your scene, meshes and assets Section One Loading your scene, meshes and assets

Loading a scene SceneLoader.Load will do it for you Assets (textures, shaders) are loaded asynchronously You can either start rendering the scene directly or…. Wait for all assets to be loaded (scene.executeWhenReady) Using SceneLoader.ShowLoadingScreen to display loading screen SceneLoader.Append can load a scene into an existing one

LOADING A SCENE DEMO

Importing a mesh SceneLoader.ImportMesh will do it for you Assets (textures, shaders) are loaded asynchronously Can import one or many meshes alongside materials Engine can display loading UI if you ask for it: engine.displayLoadingUI(); engine.hideLoadingUI();

IMPORTING A MESH DEMO

Assets manager A central tool to organize loading of your assets Importing meshes Loading text files Loading binary files Event based approach (per task or globally) Loading UI by default

USING ASSETSMANAGER DEMO

MIME types and your web server Do not forget to allow babylon extensions on your web server Unknown extensions will return 404 error <system.webServer> <staticContent> <mimeMap fileExtension=".fx" mimeType="application/fx" /> <mimeMap fileExtension=".babylon" mimeType="application/babylon" /> <mimeMap fileExtension=".babylonmeshdata" mimeType="application/babylonmeshdata" /> </staticContent> </system.webServer> IIS – web.config AddType application/fx .fx AddType application/babylon .babylon AddType application/babylonmeshdata .babylonmeshdata APACHE .htaccess

Creating a 3D Windows Universal App Section Two Creating a 3D Windows Universal App

FROM WEB TO APPS IN 5 MIN DEMO

Understanding offline mode Section Three Understanding offline mode

IndexedDB via .manifest file To enable offline support, create a .manifest file Must be named NameOfYourScene.babylon.manifest Supports .JPG, .PNG, .DDS & .TGA texture storing By default, LoadScene will try to find a .manifest file You can then see a 404 error in F12, this is normal { "version“ : 1, "enableSceneOffline" : true, "enableTexturesOffline" : true } NameOfYourScene.babylon.manifest

TESTING CACHING WITH F12 DEMO

To enable a full offline experience Use a .manifest file Combine it with HTML5 Offline API CACHE MANIFEST # Version 1.0 CACHE: babylon.js hand.minified-1.2.js index.html Screenshots/heart.jpg Screenshots/omegacrusher.jpg Scenes/Heart/Heart.babylon.manifest Scenes/SpaceDek/SpaceDek.babylon.manifest NETWORK: * HTML5 Cache Manifest

FULL OFFLINE SUPPORT DEMO

Going further How to load a .babylon file produced with Blender Using AssetsManager Using IndexedDB to handle your 3D WebGL assets: sharing feedbacks & tips of Babylon.JS Using WebGL to create games for the Windows Store Creating a HTML5 phone, tablet & PC game using the Universal Apps project for Windows Stores