Leaving Flatland: Getting Started with WebGL- SXSW 2012

6,917 views
6,574 views

Published on

Published in: Technology, Art & Photos
0 Comments
2 Likes
Statistics
Notes
  • Be the first to comment

No Downloads
Views
Total views
6,917
On SlideShare
0
From Embeds
0
Number of Embeds
1
Actions
Shares
0
Downloads
58
Comments
0
Likes
2
Embeds 0
No embeds

No notes for slide

Leaving Flatland: Getting Started with WebGL- SXSW 2012

  1. Leaving Flatland: Getting Started with WebGLSXSW 2012 - Luz Caballero - Nicolas Garcia Belmonte
  2. Nicolas Garcia Belmonte - @philogbI use Web Standards to create Data Visualizations.
  3. Luz Caballero - @gerbilleI’m a Web Opener, I evangelize Web Standards.
  4. Agenda• What is WebGL?• What can WebGL be used for?• How does WebGL work?• Getting started with WebGL
  5. What is WebGL ?
  6. OpenGL OpenGL ES WebGL
  7. desktop mobile
  8. <canvas id=‘c’ width=‘100’ height=‘100’></canvas>document.getElementById(‘c’).getContext(‘webgl’)
  9. What can WebGL be used for?
  10. • Data visualization• Creative coding• Art• 3D design environments• Music videos• Plotting math functions• 3D modeling of objects & space• Creating textures• ...fast processing of any data
  11. data visualization
  12. creative coding
  13. art
  14. 3D design environments
  15. music videos
  16. plotting mathematical functions
  17. 3D models of objects/space
  18. gamesoperasoftware.github.com/Emberwind
  19. creating textures
  20. How does WebGL work?
  21. Vertex ShaderTriangle Assembly RasterizationFragment Shader image source: http://duriansoftware.com/joe/An-intro-to-modern-OpenGL.-Chapter-1:-The-Graphics-Pipeline.html
  22. JavaScriptWebGL JS API GPU (Compiled Program)
  23. JavaScript [x1, y1, z1, x2, y2, z2, ...]WebGL JS API attributeGLSL API Vertex Shader uniformGLSL API Fragment Shader uniform varying
  24. Getting started
  25. The 3D scene image source: http://computer.yourdictionary.com/graphics
  26. Choosing a library• Three.js• PhiloGL• GLGE• J3D• ...
  27. desktop mobile
  28. PhiloGL
  29. HTML Document
  30. How most people see a WebGL App: WebGL Canvas HTML Document
  31. How we see a WebGL App: Web Workers Forms Images WebGL Canvas Audio Video 2D Canvas XHR(2)
  32. Examples
  33. PhiloGL• Idiomatic JavaScript• Rich Module System• Flexible and Performance Focused• Complete documentation
  34. Idiomatic JavaScript Concise & Expressive
  35.   //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 */    }  });
  36. Module System • Core • Math • WebGL • Program • Shaders • O3D • Camera • Scene • Event • Fx • IO • Workers • Media
  37. Other Examples
  38. Resources• An Introduction to WebGL @ dev.Opera• PhiloGL• PhiloGL tutorial• WebGL w/o a library @ dev.Opera• Porting 3D models to WebGL @ dev.Opera• News and resources @ the Learning WebGL blog• WebGL w/o a library @ Learning WebGL• Three.js• Three.js tutorial• WebGL FAQ• The Khronos WebGL forum
  39. Thanks! @philogb @gerbille

×