advertisement

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

60 %
40 %
advertisement
Information about NGF2014 - Create a 3d game with webgl and babylon.js
Technology

Published on March 13, 2014

Author: davrous

Source: slideshare.net

Description

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

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

Whybuilding a WebGL 3D engine?

The oldschool way: using 2D canvas Build a 3D “Software” engine that only uses the CPU Wireframe Rasterization Lights & Shadows Textures

UsingWebGL directly Requires a compatible browser: A new context for the canvas: canvas.getContext("webgl", { antialias: true}) || canvas.getContext("experimental-webgl", { antialias: true});

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

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/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);

Advanced features Offline support IndexedDB Network optimizations Incremental loading Physics Engine Complete collisions engine

Handlingtouch devices

Performance first Efficient shaders Do only what is REALLY required Scene partitioning Frustum / submeshes / octrees Complete cache system Update WebGL only when required

Creation Pipeline .babylonOnlineconverter .FBX .OBJ .FBX .OBJ

Enoughof yourblah-blah! Giveus some demos, demos &live code!

@deltakosh / @davrous

Add a comment

Related presentations

Presentación que realice en el Evento Nacional de Gobierno Abierto, realizado los ...

In this presentation we will describe our experience developing with a highly dyna...

Presentation to the LITA Forum 7th November 2014 Albuquerque, NM

Un recorrido por los cambios que nos generará el wearabletech en el futuro

Um paralelo entre as novidades & mercado em Wearable Computing e Tecnologias Assis...

Microsoft finally joins the smartwatch and fitness tracker game by introducing the...

Related pages

NGF2014 - Create a 3D game with WebGL and Babylon.js

Learning Babylon.js -- Importing a Blender Camera and Mesh Animation into Babylon - Duration: 13:53. Mad Dog Tutorials 1,954 views
Read more

Game | NGF2014 Create a 3D game with WebGL and Babylon.js

Category: Game, 3D Game, 5 Minute Game, Action Game, Adventure Game, American Football Game, Android Game, Arcade Game, Award Game, Back To School Game ...
Read more

Babylon.js A 3D Game Engine In JavaScript From Microsoft ...

Babylon.js A 3D Game Engine In JavaScript From ... Unleash 3D games with Babylon.js ... NGF2014 - Create a 3D game with WebGL and Babylon ...
Read more

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

http://blogs.msdn.com/davrous Agenda Why building a WebGL 3D engine ? The old school way: Using the 2D canvas Using WebGL directly Using ...
Read more

babylonJS – GameDev Academy

Tag: babylonJS. Babylon.JS Multi ... Learn WebGL and Babylon.js at your own pace Feel free to check out our online ... Create wonderful interactive games ...
Read more

tutorials - BabylonJS Documentation

The Play Pen Tutorials. ... Using WebGL to Create Games for the Windows Store. ... 3D Programming with WebGL and Babylon.js for Beginners.
Read more

Babylon.js: JS framework for building 3D games with HTML5 ...

You have to define the maximum capacity of a particle system to allow babylon.js to create associated WebGL ... powerful enough to run 3d games. ...
Read more

Babylon.js - 3D engine based on WebGL/Web Audio and JavaScript

A complete JavaScript framework for building 3D games with HTML5, WebGL and Web Audio. ... by Babylon.js team. XBOX AVATARS. by Xbox.com. DISTRACTION.
Read more