Download as PDF, PPTX
More Related Content
Similar to 3D in the Browser via WebGL: It's Go Time
![[GREE Tech Talk #08] You Don't Know WebGL](https://cdn.slidesharecdn.com/ss_thumbnails/youdontknowwebgl-150618071531-lva1-app6891-150619005902-lva1-app6892-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Mobile Engineer and Software Engineer: Are we...](https://cdn.slidesharecdn.com/ss_thumbnails/md-mobileengineerandsoftwareengineerarewestillrelevantsidiqpermana-251127010650-55224ef1-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Mobile Development] Exploring Apple’s On-Device FoundationModels](https://cdn.slidesharecdn.com/ss_thumbnails/md-exploringappleson-devicefoundationmodels-251124030840-d690542c-thumbnail.jpg?width=640&height=640&fit=bounds)
![[BDD 2025 - Artificial Intelligence] Building AI Systems That Users (and Comp...](https://cdn.slidesharecdn.com/ss_thumbnails/ai-buildingaisystemsthatusersandcompanieslove-251124030845-038f7732-thumbnail.jpg?width=640&height=640&fit=bounds)
![Support, Monitoring, Continuous Improvement & Scaling Agentic Automation [3/3]](https://cdn.slidesharecdn.com/ss_thumbnails/agenticcommunityseries-day3-cfd-251120170304-ddef8112-thumbnail.jpg?width=640&height=640&fit=bounds)
3D in the Browser via WebGL: It's Go Time
- 1. 3D In theBrowser It’s go time. Presented by Pascal Rettig http://cykod.com @cykod Liberally using Material From: Mozilla MIT IAP WebGL Class http://learningwebgl.com Monday, July 11, 2011
- 2. When last Italked... Monday, July 11, 2011
- 3. Where We are 1977-84 1985-90 1991-94 1995-2000 Monday, July 11, 2011
- 4. Where we are Q1 2010 Q4 2010 Q2 2011 Q4 2011 Monday, July 11, 2011
- 5. I was wrong. Q1 2010 Q4 2010 Q2 2011 Monday, July 11, 2011
- 6. WebGL is enabledin: • Chrome - Stable • Firefox 4 Beta • Webkit Nightly’s • an Opera Preview Release • IE ...Yeah, not anytime soon. Monday, July 11, 2011
- 7. By the endof Q2 All major supported browsers should have WebGL turned on by default. Monday, July 11, 2011
- 8. What can youdo with WebGL? http://webglsamples.googlecode.com/hg/aquarium/ aquarium.html http://webglsamples.googlecode.com/hg/spacerocks/ spacerocks.html Monday, July 11, 2011
- 9. What is WebGL? WebGL is a royalty-free, cross-platform API that brings OpenGL ES 2.0 to the web as a 3D drawing context within HTML, exposed as low-level Document Object Model interfaces. It uses the OpenGL shading language, GLSL ES, and can be cleanly combined with other web content that is layered on top or underneath the 3D content. It is ideally suited for dynamic 3D web applications in the JavaScript programming language, and will be fully integrated in leading web browsers. http://www.khronos.org/ Monday, July 11, 2011
- 10. WebGL is: Monday, July11, 2011
- 11. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group Monday, July 11, 2011
- 12. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group • In-browser native (Look ma, no plugins!) Monday, July 11, 2011
- 13. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group • In-browser native (Look ma, no plugins!) • Implementation of OpenGL ES 2.0 (OpenGL for embedded systems) Monday, July 11, 2011
- 14. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group • In-browser native (Look ma, no plugins!) • Implementation of OpenGL ES 2.0 (OpenGL for embedded systems) • A low level API (We’re not kidding around) Monday, July 11, 2011
- 15. WebGL is: • A 1.0 Standard (as of 3/8/11) released by the Khronos Group • In-browser native (Look ma, no plugins!) • Implementation of OpenGL ES 2.0 (OpenGL for embedded systems) • A low level API (We’re not kidding around) • Well Integrated into the DOM - can layer, use textures, etc. Monday, July 11, 2011
- 16. OpenGL ES 2.0 Monday,July 11, 2011
- 17. OpenGL ES 2.0 • OpenGL for Embedded Systems Monday, July 11, 2011
- 18. OpenGL ES 2.0 • OpenGL for Embedded Systems • Well-defined subsets of desktop OpenGL Monday, July 11, 2011
- 19. OpenGL ES 2.0 • OpenGL for Embedded Systems • Well-defined subsets of desktop OpenGL • What you’re using playing 3D games on your iPhone 3G (Orig. iPhone, Android are ES 1.0) Monday, July 11, 2011
- 20. OpenGL ES 2.0 • OpenGL for Embedded Systems • Well-defined subsets of desktop OpenGL • What you’re using playing 3D games on your iPhone 3G (Orig. iPhone, Android are ES 1.0) • OpenGL ES 1.X is for fixed function hardware. 2.0 is fully programmable vertex and fragement shaders. Monday, July 11, 2011
- 21. WebGL uses shadersfor just about everything • Little bits of run-time compiled code that runs on the GPU • GLSL (OpenGL Shading Language) • “High Level” Shader language based on C • Compiled at runtime • Vertex shaders transform vertices • Fragment shaders compute pixel colors Monday, July 11, 2011
- 22. WebGL PipeLine Vertex Operation ⇓ Rasterization ⇓ Fragment Operation ⇓ FrameBuffer Monday, July 11, 2011
- 23. Simple(st) Shaders Vertex Shader attribute vec3 aVertexPosition; void main(void) { gl_Position = vec4(aVertexPosition, 1.0); } Fragment Shader void main(void) { gl_FragColor = vec4(1.0, 1.0, 1.0, 1.0); } Monday, July 11, 2011
- 24. Which gets us... Monday,July 11, 2011
- 25. Simplest Full Example (From Mozilla IAP class) Monday, July 11, 2011
- 26. More Tutorials at LearningWebGl.com • Based on the famous NeHe Open GL Tutorials • Textures: http://learningwebgl.com/ lessons/lesson05/index.html • http://learningwebgl.com/blog/? page_id=1217 Monday, July 11, 2011
- 27. Has anyone noticeda problem? Monday, July 11, 2011
- 28. Has anyone noticeda problem? OpenGL isn’t exactly something you want to have to see on a daily basis, especially as a Javascript Programmer Monday, July 11, 2011
- 29.
- 30. PhiloGL Relatively new framework from Sencha Labs http://senchalabs.github.com/philogl/ Monday, July 11, 2011
- 31. PhiloGL • “PhiloGL code is highly abbreviated compared to WebGL.” • Have transcribed the learningwebgl lessons to PhiloGL • http://senchalabs.github.com/philogl/ PhiloGL/examples/lessons/1/ • http://senchalabs.github.com/philogl/ PhiloGL/examples/lessons/5/ • Sort of neat, but kinda meh... Monday, July 11, 2011
- 32. Mr. Doobs Three.js https://github.com/mrdoob/three.js/ Generic 3D library that supports a WebGL rendering as one of the backends. Monday, July 11, 2011
- 33.
- 34. Three.js • Nice, standard OO Abstractions for 3D programming. • No documentation, but lots of examples in the examples directory. • Lots of Demos to look at on the Github Page • May be a little too abstract for performant WebGL games, but they are reworking the WebGL renderer, so who knows. Monday, July 11, 2011
- 35. Copperlicht • Bills itself as “Commercial grade WebGL 3D engine with editor” • http://www.ambiera.com/copperlicht/ • Quake 3 Level http://bit.ly/fGKoOh Monday, July 11, 2011
- 36. More Frameworks / Engines From the Chronos WebGL Wiki: http://www.khronos.org/webgl/wiki/ Monday, July 11, 2011
- 37.
- 38. glQuery doesn’t exist... But it should - talk to me if you’re interested in working on something after the meetup. Monday, July 11, 2011
- 39. Thanks! Pascal Rettig @cykod on Twitter Monday, July 11, 2011