http://blogs.msdn.com/davrous
Agenda
 Why building a WebGL 3D engine ?
 The old school way: Using the 2D canvas
 Using WebGL directly
 Using Babylon...
Whybuilding a WebGL 3D engine?
The oldschool way: using 2D canvas
Build a 3D “Software” engine that only uses the CPU
Wireframe Rasterization
Lights &
Sh...
UsingWebGL directly
Requires a compatible browser:
A new context for the canvas:
canvas.getContext("webgl", { antialias: t...
UsingWebGL directly
WebGL is a low level API
Need to handle everything
except the rendering:
 Shaders code (loading, comp...
UsingBabylon.js to create 3D apps & games
Howto use Babylon.js ?
Open source project (Available on Github)
http://www.babylonjs.com
https://github.com/babylonjs/bab...
Advanced features
Offline support
IndexedDB
Network optimizations
Incremental loading
Physics Engine
Complete collisions
e...
Handlingtouch devices
Performance first
Efficient shaders
Do only what is REALLY required
Scene partitioning
Frustum / submeshes / octrees
Compl...
Creation Pipeline
.babylonOnlineconverter
.FBX
.OBJ
.FBX
.OBJ
Enoughof yourblah-blah!
Giveus some demos, demos &live code!
@deltakosh / @davrous
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
NGF2014 - Create a 3d game with webgl and babylon.js
Upcoming SlideShare
Loading in …5
×

NGF2014 - Create a 3d game with webgl and babylon.js

1,762 views

Published on

We'll see in this session how to create 3D HTML5 WebGL games for the web (IE11/Chrome/Firefox & Opera) as well as for some mobile ecosystems.

For that, we’ll show you our open-source Babylon.JS WebGL gaming engine available on GitHub: https://github.com/BabylonJS/Babylon.js

You’ll see how to cover the complete gaming pipeline from the 3D assets created & exported from Blender/3DS Max/Maya to BabylonJS, the various camera's types (touch, device orientation, etc.), the usage of the embedded physic engine. At last, of course, how to implement the game logic in JavaScript.

We'll build a simple game from scratch to better understand how to use this free engine.

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

No Downloads
Views
Total views
1,762
On SlideShare
0
From Embeds
0
Number of Embeds
32
Actions
Shares
0
Downloads
16
Comments
0
Likes
1
Embeds 0
No embeds

No notes for slide
  • Davrous/davca/davrous
  • Davrous – 4’’
  • davrous
  • Davrous – 10’’
  • davca
  • davca
  • Davrous – 4’’
  • NGF2014 - Create a 3d game with webgl and babylon.js

    1. 1. http://blogs.msdn.com/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  Advanced features  Handling touch devices  Performance first  Content Pipeline  Demos, demos & live code  From Blender to the browser with no line of code  Loading a scene by code  Third-parties demos  Live code session
    3. 3. Whybuilding 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. UsingWebGL directly Requires a compatible browser: A new context for the canvas: canvas.getContext("webgl", { antialias: true}) || canvas.getContext("experimental-webgl", { antialias: true});
    6. 6. UsingWebGL 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. UsingBabylon.js to create 3D apps & games
    8. 8. Howto 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! To start Babylon.js, you’ve just need to create an engine object: <script src="babylon.js"></script> var engine = new BABYLON.Engine(canvas, true);
    9. 9. Advanced features Offline support IndexedDB Network optimizations Incremental loading Physics Engine Complete collisions engine
    10. 10. Handlingtouch devices
    11. 11. Performance first Efficient shaders Do only what is REALLY required Scene partitioning Frustum / submeshes / octrees Complete cache system Update WebGL only when required
    12. 12. Creation Pipeline .babylonOnlineconverter .FBX .OBJ .FBX .OBJ
    13. 13. Enoughof yourblah-blah! Giveus some demos, demos &live code!
    14. 14. @deltakosh / @davrous

    ×