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

Mar 13, 2014Download as PPTX, PDF1 like2,297 views

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.

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

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

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

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

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!

We'll see in this session how to create 3D HTML5 WebGL games for the desktop & mobile web. For that, I’ll show you our open-source Babylon.JS WebGL gaming engine available on GitHub. It has been recently used by Ubisoft for the Assassin’s Creed Pirates web experience. We’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, virtual joysticks, gamepad, 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 to better understand how to use this free engine.

Unleashing WebGL & WebAudio with babylon.jsdavrous

During this session, we will see how, thanks to babylon.js, we can easily create and use 3D content associated with sounds directly with JavaScript. We will also see how to interact with DCC tools like Blender or 3DS Max to work with 3D designer. With simplicity in mind we will be able to use complex topics like collisions, physics or even spatial sound with the minimal amount of code! #jquk 2015

Using babylon js to create apps & games for all web gl devicesDavid Catuhe

We have built in France a WebGL 3d realtime engine named BabylonJS. It has been made to support all WebGL compatible platforms such as Chrome, Firefox, Opera, IE11 on the desktop as well as on Firefox OS, Android & Windows 8.1 devices. We will see 2 main points in this session. First, we’ll share some of the things we’ve learned while building it: how to track and reduce the garbage collector, how to pay attention to the performance and how to handle touch on all devices. Then, we’ll see how to use these frameworks to build your own 3d applications & games for the web! Be ready to read some code.

Html5 (games)chamsddine bouzaine

HTML5 provides capabilities for building games in a cross-platform and lightweight manner without dependencies. It includes powerful APIs like the canvas element for 2D drawing and WebGL for 3D rendering. Common elements of HTML5 games include using <canvas> to define a drawing area, a 2D or 3D API to render shapes and objects, physics engines to simulate movement and interactions, and technologies like local storage for data caching. Tools like game engines, libraries, and bundlers can help develop HTML5 games.

Migrating your Web app to Virtual RealityDenis Radin

HTML/CSS is an ultimate stack for UI development however hyping VR technology still have no way to reuse millions of Web applications already available. This talk is about theory and practice of porting existing HTML/CSS apps into Virtual Reality. Oculus Rift is bought by Facebook, HTC investing 10 billions in VR apps developers, Sony got VR for PlayStation, Nintendo is going VR. Virtual Reality is booming and number of households having VR doubles every month. The same do number of VR applications. However it is still not possible to bring best UI development practices into Virtual Reality using UI development unicorn - Web platform. This talk gives insights on ways possible for displaying HTML/CSS content in Virtual Reality. Should we go CSS way or WebGL? What are possible solutions and most expected pitfalls? Why HTML is still a good choice to develop interfaces for VR? How Web developers can contribute to VR industry? These are questions answered.

Sergey Gonchar - Fast rendering with StarlingFlash Conference

The document discusses Stage3D and Starling frameworks. It describes how Stage3D allows managing texture memory, vertex and pixel shading, and mesh rendering using OpenGL and DirectX. It also explains that Starling uses a quad batching approach to group quads with the same state for efficient rendering and provides a vertex buffer description to store quad vertex attributes. The document recommends profiling tools for optimizing 3D rendering and references books for further reading.

Sergey Shamruk - Building Project From ScratchFlash Conference

The document discusses principles for building a project from scratch using Git, IntelliJ IDEA, and Apache Flex. It recommends following principles like single responsibility and loose coupling. It describes setting up complicated parts like the visualization and resource loading systems. It provides code examples for configuring resource loading and continuous integration using Jenkins and GradleFX. It recommends structuring the project with modules for each feature and using patterns like MVVM or Model-View+Skin. Finally, it lists some basic server components that are usually enough for most projects.

From HTML to pixels on the ScreenIgor Talic

The document discusses how browsers render HTML documents to pixels on screen. It explains the browser rendering pipeline which includes HTML and CSS parsing, building the render tree, performing layout, and painting. It provides tips for optimizing performance such as minimizing elements to speed parsing, avoiding layout thrashing, and using layers for 3D transforms and animations which can be hardware accelerated. The document recommends resources for learning more about how browsers work and GPU accelerated compositing.

Zoomcharts @ DevClub.lvViesturs Zariņš

ZoomCharts is an interactive and fast HTML5 charts library for big data visualization. It was created to address graphics challenges on the web like supporting multiple browsers, resolutions, and varying performance across devices. The developers use CoffeeScript, commit to GitHub, and have an automated testing setup to ensure quality. Key features of ZoomCharts include support for Canvas, SVG, and WebGL rendering as well as responsive design for big screens. Future plans include more chart types, an extension API, and memory tracking.

WebAssemblyJawahar

xPad - Building Simple Tablet OS with Gtk/WebKitPing-Hsun Chen

Web is becoming the new graphic library, based on the success of xPUD project, we make it further by adding following components: 1) WebKit-based browser with finger scrolling and dobule-tap zooming function, 2) A BPMF-friendly virtual keyboard integrated with SCIM input method and 3) Touch-enhanced user interface based on xPUD’s plate framework. By using simple software stack, we’re pretty confident that xPad could be an alternative of MeeGo or Android as a lightweight and easily customizable tablet OS.

Html5 Canvas and Mobile GraphicsEngin Hatay

Engin Yağız Hatay gave a presentation on graphics and animation capabilities in web browsers. He discussed several technologies including CSS3, Canvas, SVG, and WebGL, and when each is best suited. He provided details on HTML5 Canvas capabilities and limitations. Hatay also covered browser support for these technologies and recommended several JavaScript libraries that can be used to create graphics and animations, including PaperJS, ProcessingJS, and ThreeJS. He concluded with a discussion of tools and frameworks for mobile graphics development.

Software Architecture StoriesESUG

This document discusses software architecture patterns and principles. It describes three stories that illustrate techniques for crafting software architectures. The first story talks about using layers to separate levels of abstraction and isolate points where components interact. The second story discusses how to loosely couple components through events and messages. It also addresses separating transient and stateful components. The third story shows how to use explicit scheduling to conveniently execute tasks asynchronously in a controlled way. Overall, the document advocates for separating architectures into layers, isolating failure points, distinguishing state, and being explicit rather than relying on magic.

Power of WebGL (FSTO 2014)Verold

Extending GWTisurusndr

GWT is a free and open source framework that allows developers to create complex JavaScript front-end applications using Java. It handles cross-browser issues and supports features like OOP designs, reusable UI components, localization, and mixing native JavaScript with Java code. GWT provides UiBinder for binding UI components using an HTML-like markup language at compile time. Alternatively, some companies define UI bindings at runtime using XML defined at the server-side with component definitions in XSDs and dynamically generated factory classes. The document provides examples of defining a sample UI component and binding.

W3C HTML5 KIG-HTML5 Game Performance IssueChanghwan Yi

This document discusses HTML5 game performance and compares the graphics capabilities of different platforms. It finds that Canvas 2D is faster than before but WebGL is still much faster for rendering 2D sprites. WebGL provides 3D graphics using OpenGL ES and is accessed through the HTML5 Canvas element. The document tests performance by drawing many blue squares and measuring framerates, finding that WebGL can render significantly more sprites before slowing down.

ScenejsLindsay Kay

SceneJS is a JavaScript library that provides an easy-to-use API for WebGL. It uses a JSON-based scene graph structure to define 3D scenes and models. SceneJS aims to lower the barrier to working with WebGL by handling lower-level WebGL calls and optimizations under the hood. It supports features like instancing, level-of-detail, and bounding volumes to improve performance. The library is open source and its architecture is designed to integrate well with other web technologies.

Beating canvas 2 d in its own territory webgl+tesspathygree_tech

[1C5]Lessons from developing a web browser for raspberry piNAVER D2

The document discusses lessons learned from developing a web browser on the Raspberry Pi. Some key optimizations included progressive tiled rendering to improve scrolling performance, avoiding unnecessary image format conversions, using disk caching for images, reducing memory copies for video playback, and supporting hardware decoding and scaling of images and video. Other optimizations involved improving responsiveness, managing tabs and memory usage, speeding up startup, and fixing issues for the Raspberry Pi's ARMv6 processor. The main lessons highlighted were the importance of profiling, watching for relevant upstream improvements, eliminating unnecessary processes, optimizing just-in-time, utilizing all available platform resources, and carefully managing memory and resource allocation.

Advanced Web Graphics with CanvasJason Harwig

I can't believe it's java scriptpebble {code}

Ustream Techtalks: Google Chrome Developer ToolsMáté Nádasdi

This document provides an overview of Chrome Dev Tools and how it can be used for debugging websites. Some key points covered include: - Chrome Dev Tools allows debugging of JavaScript, HTML, CSS and network requests. It provides features like logging, breakpoints, and profiling of frames and memory. - The DevTools UI is based on WebKit, which provides common features across browsers like DOM, CSSOM, and rendering. It shows the DOM tree, render tree, layer tree, and graphics layer tree. - Panels like Elements, Styles, Network, Timeline, Profiles, and Audits allow inspection and debugging of pages, styles, requests, performance, memory usage and more. Settings allow control of caching

Js loversShivam Singh

Easy charting withMajor Ye

This document discusses two technologies for creating charts directly in the browser: Canvas and SVG. Canvas uses JavaScript to manipulate pixel data and is best for fast rendering like games, while SVG uses vector-based markup that lives in the DOM, making it easier to interact with and support older browsers with VML. The document recommends SVG for charts since it allows dynamic tooltips and broad browser support without needing polyfills.

WebGL의 무궁무진한 가능성 Jun Ho Lee

This document discusses the possibilities of WebGL and how it can be used for 3D graphics rendering on the web. It explains that WebGL allows for GPU-accelerated rendering directly in the browser by using APIs to control graphics processing units. It provides examples of using WebGL to initialize a WebGL context, create and compile shaders, and render 3D graphics by passing vertex and color data to shaders. The document recommends learning resources and frameworks for WebGL and suggests areas where WebGL could be applied, such as games, data visualization, and user interfaces.

Web xr:vr getting startedWajdi Ben Rabah

This document provides instructions for getting started with building VR and AR experiences using Unity and WebXR. It outlines the key steps for setting up the project including adding packages, configuring the project for WebXR, adding interactions to a sample scene, building and deploying to a local web server, and launching the experience in a browser. Next steps mentioned include integrating additional frameworks like ARCore, Vuforia and Snap Lens.

Confoo - Javascript Server Side : How to startQuentin Adam

nodeJS, claypool, APE, map reduce en nosql, yql... Le javascript server side est un sujet d'actualité, une tendance de fond est en train d'émerger. Et la mise en avant des outils dans la communauté progresse rapidement. La promesse d'un seul langage sur le client et le serveur d'une application web est très attirante alors que HTML5, les websockets, les webworker, les local storage sont en train de se faire une place dans le futur du web. Cette conférence a pour but de vous permettre de mieux appréhender cet écosystème à travers son historique, l'exposé des standards émergeant, des avantages et défauts des différentes solutions proposées et en présentant les briques communes. Quels projets pouvez vous entreprendre sur ces technologies ? Est-ce possible à intégrer en production ? L'administration et l'intégration de ces outils au SI d'une entreprise est il possible ? Ces technologies vont elles s'implanter ou rester des expérimentations de techniciens sous stéroïdes ?

Metaverse building (blockchain, nft, 3d, vr)Wajdi Ben Rabah

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

Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArtAlina Vilk

This document discusses interactive 3D graphics for the web using three.js. It begins with an overview of WebGL, including the WebGL pipeline and shaders. It then introduces three.js as a JavaScript library that builds on WebGL to make 3D graphics creation simpler. The document shows a basic "hello world" example in three.js and outlines some of its additional features like objects, lights and cameras. It concludes by discussing potential next steps like WebVR.

More Related Content

What's hot (20)

Zoomcharts @ DevClub.lvViesturs Zariņš

WebAssemblyJawahar

xPad - Building Simple Tablet OS with Gtk/WebKitPing-Hsun Chen

Html5 Canvas and Mobile GraphicsEngin Hatay

Software Architecture StoriesESUG

Power of WebGL (FSTO 2014)Verold

Extending GWTisurusndr

W3C HTML5 KIG-HTML5 Game Performance IssueChanghwan Yi

ScenejsLindsay Kay

Beating canvas 2 d in its own territory webgl+tesspathygree_tech

[1C5]Lessons from developing a web browser for raspberry piNAVER D2

Advanced Web Graphics with CanvasJason Harwig

I can't believe it's java scriptpebble {code}

Ustream Techtalks: Google Chrome Developer ToolsMáté Nádasdi

Js loversShivam Singh

Easy charting withMajor Ye

WebGL의 무궁무진한 가능성 Jun Ho Lee

Web xr:vr getting startedWajdi Ben Rabah

Confoo - Javascript Server Side : How to startQuentin Adam

Metaverse building (blockchain, nft, 3d, vr)Wajdi Ben Rabah

Zoomcharts @ DevClub.lvViesturs Zariņš

WebAssemblyJawahar

xPad - Building Simple Tablet OS with Gtk/WebKitPing-Hsun Chen

Html5 Canvas and Mobile GraphicsEngin Hatay

Software Architecture StoriesESUG

Power of WebGL (FSTO 2014)Verold

Extending GWTisurusndr

W3C HTML5 KIG-HTML5 Game Performance IssueChanghwan Yi

ScenejsLindsay Kay

Beating canvas 2 d in its own territory webgl+tesspathygree_tech

[1C5]Lessons from developing a web browser for raspberry piNAVER D2

Advanced Web Graphics with CanvasJason Harwig

I can't believe it's java scriptpebble {code}

Ustream Techtalks: Google Chrome Developer ToolsMáté Nádasdi

Js loversShivam Singh

Easy charting withMajor Ye

WebGL의 무궁무진한 가능성 Jun Ho Lee

Web xr:vr getting startedWajdi Ben Rabah

Confoo - Javascript Server Side : How to startQuentin Adam

Metaverse building (blockchain, nft, 3d, vr)Wajdi Ben Rabah

Similar to NGF2014 - Create a 3d game with webgl and babylon.js (20)

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

Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArtAlina Vilk

Unleash 3D rendering with WebGL and Microsoft EdgeDavid Catuhe

This document provides an overview and introduction to WebGL and Babylon.js for 3D rendering on the web. It discusses how WebGL requires handling all rendering aspects directly, while Babylon.js abstracts this through a scene graph and handles rendering with one line of code. It then demonstrates a basic "hello world" example in both WebGL and Babylon.js. The document also lists many features supported by Babylon.js, such as colliders, physics, animations, particles, textures, cameras and more for building 3D games and scenes on the web.

WebGL: 3D Graphics for the WebShritesh Bhattarai

This document introduces WebGL, which brings 3D graphics capabilities to the web by using OpenGL ES within JavaScript. WebGL allows for rendered 3D graphics directly within browsers by interacting with the GPU similarly to OpenGL on other platforms. It uses a <canvas> element and is supported by modern browsers. Libraries like Three.js make WebGL easier to use. The document discusses how WebGL promotes openness on the web by allowing open 3D graphics without restrictions.

WebGL 3D playerVasilika Klimova

This document discusses using WebGL for 3D graphics on the web. It introduces basic 3D graphics concepts like scenes, cameras, and lights. It then explains how to build a 3D model viewer using the Three.js library. Key steps include loading a texture, 3D model, setting up the scene, camera and renderer, and adding animation with requestAnimationFrame to continuously render the scene. The document provides code examples for setting up the different 3D objects and rendering the scene.

Academy PRO: HTML5 API graphicsBinary Studio

Minko stage3d 20130222Minko3D

This document provides resources and information about Minko SDKs. It lists various resources available for Minko, including documentation, forums, code samples, and more. It then describes the Community SDK as being free and open source, while the Professional SDK offers advanced features. The document goes on to cover scripting with Minko, using controllers and scripts to add interactivity. It also discusses using shaders with Minko's ActionScript shader language. Finally, it mentions the WYSIWYG scene editor for building scenes and importing file formats.

mloc.js 2014 - JavaScript and the browser as a platform for game developmentDavid Galeano

JavaScript and the browser can be a viable platform for game development, as demonstrated by games like Polycraft and a Quake 4 demo ported to JavaScript. However, to reach the level of native applications, improvements are needed in areas like memory usage, parallelism, and floating point performance. Specifically, typed objects could help memory usage, a task-based parallelism API could improve multi-core support, and SIMD and single-precision floats could enhance performance of common game operations like vectors and matrices.

WebGL - 3D programmingMinh Ng

WebGL is a JavaScript API for rendering 3D graphics in web browsers without plugins. It is supported in modern desktop and mobile browsers depending on the graphics card. Three.js is a popular open-source WebGL framework that handles 3D scene graph management and rendering. It allows creating 3D scenes with meshes made from geometries and materials, adding cameras, and rendering with common patterns like box geometries, basic materials, and perspective cameras. Examples include simple cubes and panoramic views.

140716 : 同業前端聚會分享 - webgl 與 three.jsangelliya00

WebGL is a JavaScript API for rendering 3D graphics in a web browser without plugins. It is based on OpenGL ES 2.0 and uses the HTML5 Canvas element. Three.js is a popular JavaScript library that makes it easier to use WebGL for 3D graphics. It supports 3D models, materials, textures, lights, and effects. WebGL provides low-level rendering capabilities while Three.js handles complexities like scene graph management, animation, and events.

Migrating from OpenGL to VulkanMark Kilgard

1. The document discusses migrating from OpenGL to Vulkan, providing analogies comparing the APIs to fixed-function toys, programmable LEGO kits, and raw materials pine wood derby kits. 2. It outlines scenarios that are likely and unlikely to benefit from Vulkan, such as applications with parallelizable CPU-bound graphics work. 3. Key differences between OpenGL and Vulkan are explained, such as Vulkan requiring explicit management of graphics resources, synchronization, and command buffer queuing. The document emphasizes that transitioning to Vulkan truly rethinks the entire graphics rendering approach.

Presentation JavaFXrecon4

This document discusses JavaFX, a software platform for developing and running rich Internet applications. It provides an overview of JavaFX, describing its key features like being a framework for rich internet applications, allowing for rapid GUI development, platform independence, and targeting multiple device types. The document also covers technical details of JavaFX like its compiler, runtime environment, programming concepts around objects and media, events and bindings, and how to program with JavaFX in the NetBeans IDE.

Presentation JavaFXrecon4

This document discusses JavaFX, a software platform for developing and running rich internet applications. It provides an overview of JavaFX, describing its key features like being a framework for rich GUI applications, platform independence, and targeting multiple device types. The document also covers technical details of JavaFX like its compiler, runtime environment, programming in JavaFX using objects and events, and browser integration capabilities. Examples of applications developed in JavaFX are also presented.

Swt 2009German Arduino

SWT is a web development framework based on Model-View-Controller that allows developing web applications entirely in Smalltalk. It divides the application into a server part running Smalltalk code and a client part running translated Javascript code. SWT uses Comet to push updates from the server-side model to the client-side views without polling, enabling real-time collaborative applications. It includes a translator from Smalltalk to Javascript so developers can write both parts of the application in Smalltalk without knowing Javascript. Several real projects have been built with SWT, including games, virtual museums, and image viewers.

Native clientzyc901016

Native Client is an open source technology that allows native compiled code to run safely and securely in web browsers. It expands web programming beyond JavaScript by allowing code written in C and C++ to run at near-native speed, while maintaining OS portability and safety. The Native Client SDK includes tools and libraries like Pepper that provide a bridge between native code modules and JavaScript, enabling two-way asynchronous communication. Developing a Native Client application involves creating HTML, native module, and manifest files, then compiling and loading the module via the manifest.

Building Browser VR Experience in React VRMarcin Mincer

Design and development of a CityGML Visualization Tool3DGIS

Cityvu is a 3D viewer for CityGML and other formats that is multiplatform, available as a browser plugin, and has extended functionality and optimized performance. It uses events, layers, models, and other features to allow visualization, modeling, and querying of spatial data. Cityvu supports various input formats, platforms, and has capabilities like dynamic level of detail and attribute management through an external database.

Android chromium web view朋王

What's new in Visual Studio for Mac for .NET DevelopersJon Galloway

The document summarizes new features in recent and upcoming versions of Visual Studio for Mac. It describes improvements to performance, reliability, and the developer experience for building .NET and .NET Core apps. Key features highlighted include enhanced tooling for C#, ASP.NET Core, Blazor, Xamarin, Unity, containers, and Azure development. Preview features mentioned are gRPC/OpenAPI support, Blazor WebAssembly, an integrated terminal, and updated tools for Android development.

MindMaster Crack Latest Version FREE Download 2025mahmadzubair09

⭕️➡️ FOR DOWNLOAD LINK : http://drfiles.net/ ⬅️⭕️ MindMaster is a mind mapping software developed by Edrawsoft that helps users visualize and organize information through mind maps. It's available on various platforms and offers features like different map structures, themes, clip arts, and presentation options. MindMaster is used for tasks like brainstorming, knowledge management, and project planning.

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

Interactive 3D graphics for web with three.js, Andrey Vedilin, DataArtAlina Vilk

Unleash 3D rendering with WebGL and Microsoft EdgeDavid Catuhe

WebGL: 3D Graphics for the WebShritesh Bhattarai

WebGL 3D playerVasilika Klimova

Academy PRO: HTML5 API graphicsBinary Studio

Minko stage3d 20130222Minko3D

mloc.js 2014 - JavaScript and the browser as a platform for game developmentDavid Galeano

WebGL - 3D programmingMinh Ng

140716 : 同業前端聚會分享 - webgl 與 three.jsangelliya00

Migrating from OpenGL to VulkanMark Kilgard

Presentation JavaFXrecon4

Swt 2009German Arduino

Native clientzyc901016

Building Browser VR Experience in React VRMarcin Mincer

Design and development of a CityGML Visualization Tool3DGIS

Android chromium web view朋王

What's new in Visual Studio for Mac for .NET DevelopersJon Galloway

MindMaster Crack Latest Version FREE Download 2025mahmadzubair09

More from davrous (20)

Building a cross platforms tower defense game Dev Days 2016davrous

Create fun & immersive audio experiences with web audiodavrous

Nouveautés JavaScript dans le monde Microsoftdavrous

Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSdavrous

TypeScript ou comment goûter à une partie d’ECMAScript 6 le tout de manière typée. Inventé par le créateur de C# et Delphi ! JavaScript est passé d’un jouet utilisé dans une simple page web à de grosses applications en production tournant à la fois sur un serveur et dans le navigateur. Cette croissance exponentielle a rapidement amené son lot de problèmes de par la nature même du langage qui n’avait pas été forcément conçu pour cela au départ. Plusieurs approches différentes ont été étudiées ces dernières années pour palier à ces défauts en passant par de l’outillage à la génération du JS depuis un autre langage totalement différent. TypeScript apporte un angle différent. Il peut travailler de concert avec du JS et ensuite le modifier au fur et à mesure pour le typer. Nous verrons ainsi ensemble une introduction au langage et nous vous présenterons comment nous l’avons utilisé dans notre projet open-source Babylon.JS. Ce sera l’occasion de partager avec vous les bénéfices et éventuels écueils que nous avons rencontrés. Objectif de l’intervention : Sensibiliser les développeurs web JS à un nouveau langage qui semble avoir d’excellents retours de la communauté en général et qui a le vent en pompe chez les projets web gérés par Microsoft. Cela sera l’occasion de voir que TypeScript permet de générer du JS très propre suivant les guidelines de D. Crockford « The Good Parts » ainsi que de voir que l’on peut plus facilement générer et maintenir de grosses applications web avec.

Babylon.js WebGL Parisdavrous

Microsoft et l'Open Sourcedavrous

Back from BUILD - WebGLdavrous

The document discusses WebGL and related technologies. It introduces WebGL, which allows for 3D graphics in the browser via JavaScript, and how it can be implemented on different platforms like DirectX. It also discusses tools and libraries that can be used with WebGL, such as EaselJS and Babylon.js, an open source 3D engine. Finally, it covers some advanced features supported by Babylon.js, including offline usage, incremental loading, physics, and virtual reality support.

Les défis d’une application mobile multi-périphériques avec HTML5davrous

Aujourd’hui, on peut s’approcher de plus en plus des capacités des applications dites « natives » grâce à HTML5. Il y a 2 manières pour atteindre ce but. Utiliser les capacités intrinsèques d’HTML5 en faisant un site web moderne ou étendre ses capacités avec des frameworks comme PhoneGap. Mais ce n’est pas tout. Il y a ensuite de nombreux défis à relever : gestion du tactile, identité visuelle de chacune des plateformes, performances très différentes du desktop, etc. Nous verrons comme adresser certains de ces points via des exemples parfois issus du monde du jeu vidéo pour égayer cette présentation ! http://conf2013.web-5.org/speaker/david-rousset-les-defis-dune-application-mobile-multi-peripheriques-avec-html5/

Pointer eventsdavrous

L'histoire d'html5 pour les développeurs windows phone 8davrous

Dans cette session, nous parcourons ensemble l'histoire HTML5 pour les développeurs Windows Phone 8. Nous verrons d'abord comment utiliser des morceaux d'HTML5 dans certaines applications natives, ce qui peut s'avérer dans certains cas exceptionnels être assez pratique. Ensuite, grâce aux possibilités d'IE10, nous verrons qu'il est également possible de créer de vraies applications vivant uniquement dans le navigateur. Pour finir, nous jetterons un oeil aux possibilités d'intégration dans l'OS grâce au template de projet HTML5 de Visual Studio 2012 ou grâce à des frameworks comme PhoneGap ou Sencha Touch 2. Jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=2d81322e-6ab2-4840-a4b1-568f1bd370f4

Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous

Nous verrons durant cette heure de session comment développer une application pour le Windows Store grâce aux technologies HTML5, JS & CSS3. Nous verrons ainsi comment construire depuis 0 un petit lecteur de flux RSS. Cela sera notre excuse pour découvrir l'usage de WinJS, le framework JavaScript de Microsoft pour Windows 8, ainsi que de l'outillage Visual Studio 2012 et Blend 5. Pour finir, nous verrons à travers un petit exemple d'usage de la camera comment fonctionne l'accès à WinRT depuis JS, le nouveau jeu d'API dédiés aux applications modernes. Session jouée lors des MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=60738dd2-6d50-4360-a285-ed988e49d850 Retrouvez les tutoriaux associés sur mon blog: http://blogs.msdn.com/b/davrous/archive/2012/09/05/tutorial-series-using-winjs-amp-winrt-to-build-a-fun-html5-camera-application.aspx & http://blogs.msdn.com/b/davrous/archive/2012/06/04/comment-cr-233-er-un-petit-lecteur-de-flux-rss-pour-windows-8-metro-en-html5-et-en-30-min-partie-1-2.aspx

Les dernières avancées html5 & css3 en action !davrous

Dans cette session, vous découvrirez les nouveaux standards supportés par Internet Explorer 10. Coté CSS3, on verra ainsi des choses comme grid layout, animations ou transitions. Coté nouvelles APIs, nous passerons un peu de temps sur la gestion du drag-n-drop, IndexedDB, la gestion de l'Application Cache ou bien encore la gestion du tactile. Pour découvrir tout cela, nous verrons à chaque fois de petits exemples d'illustration ainsi que des sites plus « complexes » les mettant en oeuvre. Présentation jouée pendant les MS Techdays 2013: http://www.microsoft.com/france/mstechdays/programmes/2013/fiche-session.aspx?ID=4a174b26-32b7-4d4c-8523-ad3a3228ef53 Retrouvez tous les exemples de code sur mon blog ici: http://blogs.msdn.com/b/davrous/archive/2012/11/03/demos-links-amp-articles-associated-to-htm5-amp-css3-latest-features-in-action-build-3-114.aspx

W3 cafe ie10etwindows8davrous

Création d'une application html5 utilisant canvas, svg et les animations css3davrous

Création d’une application gérant l’offline et le stockagedavrous

Nouveautés html5 et css3 dans internet explorer 10davrous

Webinar HTML5 Microsoft Inteldavrous

C’est quoi HTML5 et pourquoi c’est important ? La partie d’HTML5 la plus répandue et supportée Comment supporter les anciens navigateurs ? Les spécifications les plus récentes comme : HTML5 : IndexedDB, AppCache, File APIs, HTML5 Forms, SVG Filters, WebSockets, WebWorkers, Drag’n’drop, HTML5 History, ECMAScript 5 Strict Mode CSS3 : CSS3 Multi-column Layout, CSS3 Grid Layout, CSS3 Flexible Box Layout, CSS3 Gradients, CSS3 Transitions, CSS3 Animations, CSS3 3D Transforms, Text Shadow

Développement d'un jeu de plateforme en html5davrous

Session sur le développement d'un jeu de plateforme en HTML5 / Canvas jouée pendant les Microsoft Days 2011. On y voit : - les différents frameworks de jeux JS du marché ainsi qu'une comparaison de performance entre SVG et Canvas - La manière d'animer des sprites - La manière d'ajouter de la logique pour les tests de collisions - Le jeu HTML5 Platformer complet - Des idées pour aller plus loin: webworkers, requestAnimationFrame, Box2D, etc.

AMDEV: Graphismes avec html5 grâce à canvas et svgdavrous

HTML5 pour l’écriture d’applications cross-devicesdavrous

HTML5 et ses amis CSS3 et SVG sont particulièrement intéressants à l’heure de la multiplication des périphériques (PC, tablettes et téléphones). En effet, 2 choix s’offrent aux développeurs pour viser ces différentes plateformes. Le 1er est de coder avec l’environnement natif de chacune (Objective-C, Java, Silverlight, etc.) et cela peut vite coûter très cher. Le 2ème choix consiste à envisager une technologie commune à toutes les plateformes : HTML5. Oui mais HTML5 est-t-il capable d’offrir une richesse et une ergonomie similaire à une application native ? Comment s’adapter aux différentes résolutions et ergonomie disponibles ? Quiz des performances ? Quelles sont les limitations face à une application dite native ? Tout au long de cette session, nous essaierons de répondre à ces questions en construisant une même application qui fonctionnera sur la majorité des plateformes actuelles. Nous verrons ainsi que grâce aux dernières évolutions des technologies du W3C et à l’augmentation des performances des derniers navigateurs, HTML5 et ses amis n’ont pas à rougir face à aux applications natives pour de nombreux cas d’utilisation. Nous y découvrirons malgré tout les nouveaux challenges que cela peut lever.

Building a cross platforms tower defense game Dev Days 2016davrous

Create fun & immersive audio experiences with web audiodavrous

Nouveautés JavaScript dans le monde Microsoftdavrous

Introduction à TypeScript et retour d'expérience sur le portage de Babylon.JSdavrous

Babylon.js WebGL Parisdavrous

Microsoft et l'Open Sourcedavrous

Back from BUILD - WebGLdavrous

Les défis d’une application mobile multi-périphériques avec HTML5davrous

Pointer eventsdavrous

L'histoire d'html5 pour les développeurs windows phone 8davrous

Introduction au développement windows 8 modern ui avec html5 et javascriptdavrous

Les dernières avancées html5 & css3 en action !davrous

W3 cafe ie10etwindows8davrous

Création d'une application html5 utilisant canvas, svg et les animations css3davrous

Création d’une application gérant l’offline et le stockagedavrous

Nouveautés html5 et css3 dans internet explorer 10davrous

Webinar HTML5 Microsoft Inteldavrous

Développement d'un jeu de plateforme en html5davrous

AMDEV: Graphismes avec html5 grâce à canvas et svgdavrous

HTML5 pour l’écriture d’applications cross-devicesdavrous

Recently uploaded (20)

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Automation Dreamin' 2022: Sharing Some Gratitude with Your UsersLynda Kane

AI and Data Privacy in 2025: Global TrendsInData Labs

In this infographic, we explore how businesses can implement effective governance frameworks to address AI data privacy. Understanding it is crucial for developing effective strategies that ensure compliance, safeguard customer trust, and leverage AI responsibly. Equip yourself with insights that can drive informed decision-making and position your organization for success in the future of data privacy. This infographic contains: -AI and data privacy: Key findings -Statistics on AI data privacy in the today’s world -Tips on how to overcome data privacy challenges -Benefits of AI data security investments. Keep up-to-date on how AI is reshaping privacy standards and what this entails for both individuals and organizations.

Network Security. Different aspects of Network Security.gregtap1

Procurement Insights Cost To Value Guide.pptxJon Hansen

Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Impelsys Inc.

Rock, Paper, Scissors: An Apex Map Learning JourneyLynda Kane

Learn the Basics of Agile Development: Your Step-by-Step GuideMarcel David

#AdminHour presents: Hour of Code2018 slide deck from 12/6/2018Lynda Kane

Buckeye Dreamin 2024: Assessing and Resolving Technical DebtLynda Kane

Build Your Own Copilot & Agents For DevsBrian McKeiver

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

"Client Partnership — the Path to Exponential Growth for Companies Sized 50-5...Fwdays

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Building 10x Organizations with Modern Productivity Metrics 10x developers may be a myth, but 10x organizations are very real, as proven by the influential study performed in the 1980s, ‘The Coding War Games.’ Right now, here in early 2025, we seem to be experiencing YAPP (Yet Another Productivity Philosophy), and that philosophy is converging on developer experience. It seems that with every new method we invent for the delivery of products, whether physical or virtual, we reinvent productivity philosophies to go alongside them. But which of these approaches actually work? DORA? SPACE? DevEx? What should we invest in and create urgency behind today, so that we don’t find ourselves having the same discussion again in a decade?

Datastucture-Unit 4-Linked List Presentation.pptxkaleeswaric3

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Leading AI Innovation As A Product Manager - Michael JidaelMichael Jidael

Unlike traditional product management, AI product leadership requires new mental models, collaborative approaches, and new measurement frameworks. This presentation breaks down how Product Managers can successfully lead AI Innovation in today's rapidly evolving technology landscape. Drawing from practical experience and industry best practices, I shared frameworks, approaches, and mindset shifts essential for product leaders navigating the unique challenges of AI product development. In this deck, you'll discover: - What AI leadership means for product managers - The fundamental paradigm shift required for AI product development. - A framework for identifying high-value AI opportunities for your products. - How to transition from user stories to AI learning loops and hypothesis-driven development. - The essential AI product management framework for defining, developing, and deploying intelligence. - Technical and business metrics that matter in AI product development. - Strategies for effective collaboration with data science and engineering teams. - Framework for handling AI's probabilistic nature and setting stakeholder expectations. - A real-world case study demonstrating these principles in action. - Practical next steps to begin your AI product leadership journey. This presentation is essential for Product Managers, aspiring PMs, product leaders, innovators, and anyone interested in understanding how to successfully build and manage AI-powered products from idea to impact. The key takeaway is that leading AI products is about creating capabilities (intelligence) that continuously improve and deliver increasing value over time.

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Talk at the final event of Data Fusion Dynamics: A Collaborative UK-Saudi Initiative in Cybersecurity and Artificial Intelligence funded by the British Council UK-Saudi Challenge Fund 2024, Cardiff Metropolitan University, 29th April 2025 https://alandix.com/academic/talks/CMet2025-AI-Changes-Everything/ Is AI just another technology, or does it fundamentally change the way we live and think? Every technology has a direct impact with micro-ethical consequences, some good, some bad. However more profound are the ways in which some technologies reshape the very fabric of society with macro-ethical impacts. The invention of the stirrup revolutionised mounted combat, but as a side effect gave rise to the feudal system, which still shapes politics today. The internal combustion engine offers personal freedom and creates pollution, but has also transformed the nature of urban planning and international trade. When we look at AI the micro-ethical issues, such as bias, are most obvious, but the macro-ethical challenges may be greater. At a micro-ethical level AI has the potential to deepen social, ethnic and gender bias, issues I have warned about since the early 1990s! It is also being used increasingly on the battlefield. However, it also offers amazing opportunities in health and educations, as the recent Nobel prizes for the developers of AlphaFold illustrate. More radically, the need to encode ethics acts as a mirror to surface essential ethical problems and conflicts. At the macro-ethical level, by the early 2000s digital technology had already begun to undermine sovereignty (e.g. gambling), market economics (through network effects and emergent monopolies), and the very meaning of money. Modern AI is the child of big data, big computation and ultimately big business, intensifying the inherent tendency of digital technology to concentrate power. AI is already unravelling the fundamentals of the social, political and economic world around us, but this is a world that needs radical reimagining to overcome the global environmental and human challenges that confront us. Our challenge is whether to let the threads fall as they may, or to use them to weave a better future.

Salesforce AI Associate 2 of 2 Certification.docxJosé Enrique López Rivera

Linux Professional Institute LPIC-1 Exam.pdfRHCSA Guru

Manifest Pre-Seed Update | A Humanoid OEM Deeptech In Francechb3

Automation Dreamin' 2022: Sharing Some Gratitude with Your UsersLynda Kane

AI and Data Privacy in 2025: Global TrendsInData Labs

Network Security. Different aspects of Network Security.gregtap1

Procurement Insights Cost To Value Guide.pptxJon Hansen

Enhancing ICU Intelligence: How Our Functional Testing Enabled a Healthcare I...Impelsys Inc.

Rock, Paper, Scissors: An Apex Map Learning JourneyLynda Kane

Learn the Basics of Agile Development: Your Step-by-Step GuideMarcel David

#AdminHour presents: Hour of Code2018 slide deck from 12/6/2018Lynda Kane

Buckeye Dreamin 2024: Assessing and Resolving Technical DebtLynda Kane

Build Your Own Copilot & Agents For DevsBrian McKeiver

Electronic_Mail_Attacks-1-35.pdf by xploitniftliyevhuseyn

"Client Partnership — the Path to Exponential Growth for Companies Sized 50-5...Fwdays

DevOpsDays Atlanta 2025 - Building 10x Development Organizations.pptxJustin Reock

Datastucture-Unit 4-Linked List Presentation.pptxkaleeswaric3

Role of Data Annotation Services in AI-Powered ManufacturingAndrew Leo

Leading AI Innovation As A Product Manager - Michael JidaelMichael Jidael

AI Changes Everything – Talk at Cardiff Metropolitan University, 29th April 2...Alan Dix

Salesforce AI Associate 2 of 2 Certification.docxJosé Enrique López Rivera

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

1. http://blogs.msdn.com/davrous

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. Whybuilding a WebGL 3D engine?

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

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

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

8. UsingBabylon.js to create 3D apps & games

9. 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);

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

11. Handlingtouch devices

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

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

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

18. @deltakosh / @davrous

Editor's Notes

#3: Davrous/davca/davrous
#4: Davrous – 4’’
#5: davrous
#6: Davrous – 10’’
#7: davca
#8: davca
#15: Davrous – 4’’

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

Recommended

More Related Content

What's hot (20)

Similar to NGF2014 - Create a 3d game with webgl and babylon.js (20)

More from davrous (20)

Recently uploaded (20)

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

Editor's Notes