View
4.666
Download
16
Embed Size (px)
DESCRIPTION
3D Graphics have come to the browser and this represents a new world of possibilities. WebGL has a reputation for a high entry barrier, but fortunately there are already some frameworks out there making things simpler. We’ll cover some of the WebGL basics and show you what to look for in a framework for 3D graphics in the browser. You’ll also meet PhiloGL, a WebGL framework focused on data visualization, creative coding and game development from Sencha Labs. Prepare to watch cool 3D demos!
Citation preview
Thursday, November 3, 2011
Nicolas Garcia Belmonte, Sencha
@philogb
http://philogb.github.com/
WebGL Fundamentals
Thursday, November 3, 2011
Agenda
Thursday, November 3, 2011
Agenda
What is WebGL ?
What can WebGL be used for ?
How can I get started with WebGL ?
Thursday, November 3, 2011
What is WebGL ?
Thursday, November 3, 2011
What is WebGL ?
Thursday, November 3, 2011
What is WebGL ?
OpenGL
OpenGL ES
WebGL
Thursday, November 3, 2011
What is WebGL ?
JavaScript
GPU (Compiled Program)
WebGL JS API
Thursday, November 3, 2011
What is WebGL ?JavaScript
Fragment Shader
WebGL JS API
Vertex ShaderGLSL API
GLSL API
Thursday, November 3, 2011
What is WebGL ?JavaScript
Fragment Shader
WebGL JS API
Vertex ShaderGLSL API
GLSL API
[x1, y1, z1, x2, y2, z2, ...]
attributeuniform
uniform varying
Thursday, November 3, 2011
What is WebGL ?JavaScript
Fragment Shader
Vertex Shader
[x1, y1, z1, x2, y2, z2, ...]
attributeuniform
uniform varying
Triangle Assembly
Rasterization
Thursday, November 3, 2011
What is WebGL ?
Fragment Shader
Vertex Shader
Triangle Assembly
Rasterization
Thursday, November 3, 2011
What can WebGL be used for ?
Thursday, November 3, 2011
What can WebGL be used for ?
Thursday, November 3, 2011
What can WebGL be used for ?
Interactive games
Data visualization
Creative coding
Physics simulations
Music videos
... very fast processing of any data.Thursday, November 3, 2011
What can WebGL be used for ?
Thursday, November 3, 2011
What can WebGL be used for ?
Interactive games
Thursday, November 3, 2011
Thursday, November 3, 2011
What can WebGL be used for ?
Thursday, November 3, 2011
What can WebGL be used for ?
Data visualization
Thursday, November 3, 2011
What can WebGL be used for ?
Thursday, November 3, 2011
What can WebGL be used for ?
Creative coding
Thursday, November 3, 2011
What can WebGL be used for ?
Thursday, November 3, 2011
What can WebGL be used for ?
Physics simulations
Thursday, November 3, 2011
What can WebGL be used for ?
Thursday, November 3, 2011
What can WebGL be used for ?
Music videos
Thursday, November 3, 2011
Thursday, November 3, 2011
PhiloGL
A WebGL framework for data visualization, creative coding and
game development.
Thursday, November 3, 2011
PhiloGL
http://senchalabs.github.com/philogl/
A WebGL framework for data visualization, creative coding and
game development.
Thursday, November 3, 2011
PhiloGL
A WebGL framework for data visualization, creative coding and
game development.
Thursday, November 3, 2011
PhiloGL
http://senchalabs.github.com/philogl/
A WebGL framework for data visualization, creative coding and
game development.
Thursday, November 3, 2011
HTML Document
Thursday, November 3, 2011
How most people see a WebGL app:
HTML DocumentWebGL Canvas
Thursday, November 3, 2011
How we see a WebGL app:
WebGL Canvas
Web Workers
2D Canvas XHR(2)
Video
Audio
Images
Forms
Thursday, November 3, 2011
Examples
Thursday, November 3, 2011
PhiloGL
Thursday, November 3, 2011
PhiloGL
Idiomatic JavaScript
Rich Module System
Flexible and Performance Focused
Thursday, November 3, 2011
Idiomatic JavaScript
Thursday, November 3, 2011
Idiomatic JavaScript
Concise & Expressive
Thursday, November 3, 2011
//Create application PhiloGL('canvasId', { program: { from: 'uris', vs: 'shader.vs.glsl', fs: 'shader.fs.glsl' }, camera: { position: { x: 0, y: 0, z: -50 } }, textures: { src: ['arroway.jpg', 'earth.jpg'] }, events: { onDragMove: function(e) { //do things... }, onMouseWheel: function(e) { //do things... } }, onError: function() { alert("There was an error creating the app."); }, onLoad: function(app) { /* Do things here */ } });
Thursday, November 3, 2011
CoreMathWebGLProgramShadersO3DCameraSceneEventFxIOWorkersMedia
Module System
Thursday, November 3, 2011
Other Examples
Thursday, November 3, 2011
Thanks!
Thursday, November 3, 2011
Thanks!
@philogb
http://philogb.github.com/
http://senchalabs.github.com/philogl/
Thursday, November 3, 2011