Introduction to WebGL 3D with HTML5 and Babylon.js

Slides:



Advertisements
Similar presentations
Välkommen till Sommarkollo Introduce XNA Game Studio Express Make A Game!
Advertisements

COMPUTER GRAPHICS SOFTWARE.
GlTF and rest3d Patrick Cozzi University of Pennsylvania CIS Fall 2013.
An introduction to WebGL Viktor Kovács. Content A little 3D modeling. What is WebGL? Introducing Three.js. Visualizing GDL objects.
Introduction to Computers Section 10A. home Presentation Programs Provide powerful design tools to outline, create, edit, arrange and display complex.
MULTIMEDIA DEVELOPMENT 4.3 : AUTHORING TOOLS. At the end of the lesson, students should be able to: 1. Describe different types of authoring tools Learning.
Particle Systems Final Exam Study Guide Game Design Experience Professor Jim Whitehead March 16, 2009 Creative Commons Attribution 3.0 (Except copyrighted.
1/12/09 1 Introduction Computer Graphics COMP 770 (236) Spring 2009 Instructor: Dinesh Manocha.
UFCEKT-20-33D Modelling and Animation 3D Modelling & Animation MotionBuilder:Lights and Cameras.
Lesson 22 Graphics Software. This lesson includes the following sections: Paint Programs Photo-Manipulation Programs Draw Programs Computer-Aided Design.
Feature-length films: Games: Desktop Animations: Computer Animation.
COM 205 Multimedia Applications
Modeling and representation 1 – comparative review and polygon mesh models 2.1 Introduction 2.2 Polygonal representation of three-dimensional objects 2.3.
Evaluation of HTML5 Graphics for Data Structure Visualization
WebGL for lazy dudes Janne Lautamäki 1 GLGE – Janne Lautamäki
Chapter 11-Multimedia Authoring Tools. Overview Introduction to multimedia authoring tools. Types of authoring tools. Cross-platform authoring notes.
CS 480/680 Computer Graphics Course Overview Dr. Frederick C Harris, Jr. Fall 2012.
Virtual reality. Tasks 3D digital model from planes 3D digital model of existing objects Office work Field observations Solid modeling Photogrammetry.
CS426 Game Programming II Dan Fleck. Why games?  While the ideas in this course are demonstrated programming games, they are useful in all parts of computer.
Character Animation Blending Abstract BSP Content Importing Digital Content Pipeline Extending Microsoft’s XNA Framework with BSP Content and Animation.
1. 2 Plan Introduction Overview of the semester Administrivia Iterated Function Systems (fractals)
Final Project Presentation& Demo Zhi Dong Real Time FEM of Elasto-Plastic Simulation.
London April 2005 London April 2005 Creating Eyeblaster Ads The Rich Media Platform The Rich Media Platform Eyeblaster.
London April 2005 London April 2005 Creating Eyeblaster Ads The Rich Media Platform The Rich Media Platform Eyeblaster.
Chris Kerkhoff Matthew Sullivan 10/16/2009.  Shaders are simple programs that describe the traits of either a vertex or a pixel.  Shaders replace a.
Web Games Programming An Introduction to Unity 3D.
1 Introduction to Computer Graphics SEN Introduction to OpenGL Graphics Applications.
1 Angel: Interactive Computer Graphics 5E © Addison-Wesley 2009 CS4610/7610: Introduction to Computer Graphics.
به نام خدا تنظیم کننده : فرانه حدادی استاد : مهندس زمانیان تابستان 92.
Mark Nelson 3d projections Fall 2013
Vizard Virtual Reality Toolkits Vizard Virtual Reality Toolkits.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
Programming with OpenGL Part 2: Complete Programs Ed Angel Professor of Emeritus of Computer Science University of New Mexico.
3D Objects in WebGL Loading 3D model files. Announcement Midterm exam on 12/2 –No Internet connection. –Example code and exam questions will be on USB.
VIRTUAL REALITY (VR) INTRODUCTION AND BASIC APPLICATIONS الواقع الافتراضي : مقدمة وتطبيقات Dr. Naji Shukri Alzaza Assist. Prof. of Mobile technology Dean.
UFCFSU-30-13D Technologies for the Web An Introduction to Unity 3D.
Feature-length films: Games: Desktop Animations:.
Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, Chapter 5 Examples 1.
Build your own 2D Game Engine and Create Great Web Games using HTML5, JavaScript, and WebGL. Sung, Pavleas, Arnez, and Pace, Chapter 5 Examples 3.
Armand Rousso describe the X3D Technology
X3DOM : Integrating 3D content seamlessly into webpage
3D on the Web : Understanding the basics
- Introduction - Graphics Pipeline
Ying Zhu Georgia State University
3GB3 Game Design Unity 3D Basics.
Lesson 22 Graphics Software.
Antigone Engine.
ICG Syllabus 1. Introduction 2. Viewing in 3D and Graphics Programming
Introduction to Graphics Modeling
Web3D Consortium X3DOM: Next-Generation Web3D Applications on Open Standards and Open Source Web3D Consortium
Graphics Processing Unit
Game Development Unity3D.
CHAPTER 8 Multimedia Authoring Tools
Introduction to WebGL 3D with HTML5 and Babylon.js
Les nouveautés autour de WebGL Pour Windows 8.1 et Windows Phone 8.1
Learning Objective LO: We’re learning to understand when it is appropriate to use particular data types.
Physics-based Sound Synthesis with a Novel Friction Model
Introduction to Software Testing
Introduction to Computer Graphics with WebGL
Introduction to Computer Graphics
Computer Graphics Introduction to Shaders
Lesson 22 Graphics Software.
CIS 441/541: Introduction to Computer Graphics Lecture 15: shaders
Using Babylon.js for beginner
David CATUHE Babylon.js / Microsoft
OpenGL-Rendering Pipeline
GPAT – Chapter 7 Physics.
Introduction to WebGL 3D with HTML5 and Babylon.js
How to debug a website using IE F12 tools
Presentation transcript:

Introduction to WebGL 3D with HTML5 and Babylon.js Advanced features Introduction to WebGL 3D with HTML5 and Babylon.js

WHO ARE WE? DAVID ROUSSET DAVID CATUHE Geeks, web developers, 3D addicts DAVID ROUSSET DAVID CATUHE TECHNICAL EVANGELIST PRINCIPAL PROGRAM MANAGER Twitter: @davrous http://blogs.msdn.com/davrous Twitter: @deltakosh http://blogs.msdn.com/eternalcoding Do not try to tune your speakers, the weird sound is due to French accent…

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

TEASER DEMO Espilit with Physic & gamepad

AGENDA Picking meshes Create your own shader Animations 1 Picking meshes 2 Create your own shader 3 Animations 4 Physics simulation 5 CSG: Constructive Solid Geometries

Section One Picking meshes

Picking scene.pick() scene.onPointerDown Get a pickResult at given 2D coordinates Can use a predicate to determine candidates scene.onPointerDown Raised by the scene Give you the current picked mesh (if any)

USING SCENE.PICK() DEMO

Manual ray casting You can create rays manually scene. createPickingRay (convert 2D to 3D ray) new BABYLON.Ray(origin, destination) Check intersection with Mesh.intersects(ray)

CASTING A RAY DEMO

Section Two Create your own shader

ShaderMaterial Used to create custom shaders Compatible with mesh.material Based on GLSL shaders You have to provide Vertex shader code (text or DOM element) Pixel shader code (text or DOM element) Simple API to communicate with shaders (constants)

USING SHADERMATERIAL DEMO

CYOS Interactive shader creation tool Learn by experimenting

USING CYOS DEMO

Section Three Animations

Manual animations Using scene.registerBeforeRender() Will be called on every frame Use scene.getAnimationRatio() to synchronize animations

MANUAL ANIMATIONS DEMO

Animations engine Controlled by the scene Based on keyframes Number Color3 Based on keyframes Vector3 Linear interpolation by default Matrix Custom interpolation supported Quaternion Animations can loop Multi-animations supported Supported types:

USING ANIMATIONS DEMO

Section Four Physics simulation

2 physics engines via a plug-in system Based on Oimo.js by default & Canon.js available Absolutely uncorrelated from the native collision engine scene.enablePhysics(new BABYLON.Vector3(0, -10, 0), new BABYLON.OimoJSPlugin());

Set impostors Choose the right impostor for your mesh: BABYLON.PhysicsEngine.PlaneImposter BABYLON.PhysicsEngine.BoxImposter BABYLON.PhysicsEngine.SphereImposter BABYLON.PhysicsEngine.CompoundImposter To generate a physic effect on a mesh: Let the gravity do its job Collisions between meshes with physics enabled Apply an impulse on the selected mesh at a given point yourMesh.setPhysicsState( BABYLON.PhysicsEngine.BoxImpostor, { mass: 0, friction: 0.5, restitution: 0.7 }); yourMesh.applyImpulse(direction, point); /* both BABYLON.Vector3 */

USING OIMO.JS WITH ESPILIT DEMO

CSG: Constructive Solid Geometries Section Five CSG: Constructive Solid Geometries

Boolean operations for meshes You can combine or subtract meshes Union Difference Intersection More about the algorithm: http://en.wikipedia.org/wiki/Constructive_solid_geometry

USING CSG DEMO

Going further Creating a convincing world for your game with custom shaders, height maps and skyboxes Picking collisions Animation Oimo - How to use a new Physics plugin Adding your own physics engine plugin to Babylon.js