Leaving Flatland: Getting Started with WebGL- SXSW 2012

  • 3,700 views
Uploaded on

 

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
    Be the first to comment
No Downloads

Views

Total Views
3,700
On Slideshare
0
From Embeds
0
Number of Embeds
1

Actions

Shares
Downloads
51
Comments
0
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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