Successfully reported this slideshow.
We use your LinkedIn profile and activity data to personalize ads and to show you more relevant ads. You can change your ad preferences anytime.

Leaving Flatland: Getting Started with WebGL- SXSW 2012

10,794 views

Published on

Published in: Technology, Art & Photos
  • Be the first to comment

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

×