David Catuhe

David Rousset

Windows Clients Evangelist Lead

Windows Clients Evangelist

http://aka.ms/david
@deltakosh

...
Agenda
 Why building a WebGL 3D engine ?
 The old school way: Using the 2D canvas
 Using WebGL directly

 Using Babylo...
Why building a WebGL 3D engine ?
The oldschool way: using 2D canvas
Build a 3D “Software” engine that only uses the CPU

Wireframe

Rasterization

Lights &...
Using WebGL directly
Requires a compatible browser:

A new context for the canvas:
canvas.getContext("webgl", { antialias:...
Using WebGL directly
WebGL is a low level API
Need to handle everything
except the rendering:






Shaders code (loa...
Using Babylon.js to create 3D apps & games
How to use Babylon.js ?
Open source project (Available on Github)

http://www.babylonjs.com
https://github.com/babylonjs/b...
Advanced features
Blender exporter

Offline support

Design & render

IndexedDB

Complete collisions
engine

Network optim...
What we’ve learned ?
Tracking & reducing the pressure on GC
A 3D engine is a place where matrices, vectors and quaternions live.
And there may ...
Tracking & reducing the pressure on GC
Maximum reuse of mathematical entities
 Pre-instantiate
 Stock variables
GC frien...
Performance first
Efficient shaders
Do only what is REALLY required

Scene partitioning
Frustum / submeshes / octrees

Com...
Handling touch devices
Latest experiments
Roadmap








Lens flares
Multi-views to add support for Oculus Rift
Simple Editor
Sandbox mode / Drag'n'drop sup...
@deltakosh / @davrous
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Réaliser un jeu cross plateformes avec WebGL et babylon.js
Upcoming SlideShare
Loading in …5
×

Réaliser un jeu cross plateformes avec WebGL et babylon.js

2,921 views

Published on

Contenu de la présentation effectuée à FranceJS le 23/11/2013 . Version étendue de la présentation effectué à ParisJS le 20/11/2013 :)

Published in: Technology
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
2,921
On SlideShare
0
From Embeds
0
Number of Embeds
1,405
Actions
Shares
0
Downloads
4
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide
  • Davrous/davca/davrous
  • Davrous – 4’’
  • davrous
  • Davrous – 10’’
  • davca
  • davca
  • Davca – 20’’
  • davca
  • Davca – 40’’ (demoresponsiveness / profiler)
  • Davrous – 4’’
  • Réaliser un jeu cross plateformes avec WebGL et babylon.js

    1. 1. David Catuhe David Rousset Windows Clients Evangelist Lead Windows Clients Evangelist http://aka.ms/david @deltakosh http://aka.ms/davrous @davrous
    2. 2. Agenda  Why building a WebGL 3D engine ?  The old school way: Using the 2D canvas  Using WebGL directly  Using Babylon.js to create 3D apps and games  How to use Babylon.js?  Advanced features  What we’ve learned…  Tracking and reducing the pressure on garbage collector  Performance first  Handling touch devices  Lastest experiment  Building a Windows Store Apps in an hour  Roadmap
    3. 3. Why building a WebGL 3D engine ?
    4. 4. The oldschool way: using 2D canvas Build a 3D “Software” engine that only uses the CPU Wireframe Rasterization Lights & Shadows Textures
    5. 5. Using WebGL directly Requires a compatible browser: A new context for the canvas: canvas.getContext("webgl", { antialias: true}) || canvas.getContext("experimental-webgl", { antialias: true});
    6. 6. Using WebGL directly WebGL is a low level API Need to handle everything except the rendering:      Shaders code (loading, compilation) Geometry creation, topology, transfer Shaders variables management Texture and resources management Render loop
    7. 7. Using Babylon.js to create 3D apps & games
    8. 8. How to use Babylon.js ? Open source project (Available on Github) http://www.babylonjs.com https://github.com/babylonjs/babylon.js How to use it? Include one file and you’re ready to go! <script src="babylon.js"></script> To start Babylon.js, you’ve just need to create an engine object: var engine = new BABYLON.Engine(canvas, true);
    9. 9. Advanced features Blender exporter Offline support Design & render IndexedDB Complete collisions engine Network optimizations Incremental loading
    10. 10. What we’ve learned ?
    11. 11. Tracking & reducing the pressure on GC A 3D engine is a place where matrices, vectors and quaternions live. And there may be tons of them! Pressure is huge on the garbage collector
    12. 12. Tracking & reducing the pressure on GC Maximum reuse of mathematical entities  Pre-instantiate  Stock variables GC friendly arrays (able to reset size at no cost) When the scene is up and running, aiming at no allocation at all
    13. 13. Performance first Efficient shaders Do only what is REALLY required Scene partitioning Frustum / submeshes / octrees Complete cache system Update WebGL only when required
    14. 14. Handling touch devices
    15. 15. Latest experiments
    16. 16. Roadmap        Lens flares Multi-views to add support for Oculus Rift Simple Editor Sandbox mode / Drag'n'drop support Support for a physic engine Collisions on webworkers Binary file format
    17. 17. @deltakosh / @davrous

    ×