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

2. WHO ARE WE? DAVID ROUSSET DAVID CATUHE
Geeks, web developers, 3D addicts
DAVID ROUSSET
DAVID CATUHE
TECHNICAL EVANGELIST
PRINCIPAL PROGRAM MANAGER
Do not try to tune your speakers, the weird sound is due to French accent…

3. 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

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

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

6. 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

7. LOADING A SCENE
DEMO

8. 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();

9. IMPORTING A MESH
DEMO

10. 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

11. USING ASSETSMANAGER
DEMO

12. 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

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

14. FROM WEB TO APPS IN 5 MIN
DEMO

15. Understanding offline mode
Section Three
Understanding offline mode

16. 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

17. TESTING CACHING WITH F12
DEMO

18. 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

19. FULL OFFLINE SUPPORT
DEMO

20. 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