WebGL: Yesterday, Today, Tomorrow
Download as PPTX, PDF1 like604 views
This document discusses the past, present, and future of WebGL. In the past (2011-2015), WebGL support was limited and performance was low. Today, full browser support exists including mobile, performance has improved, and many frameworks like Three.js have been developed. Looking forward, WebGL 2.0 will provide more features but has a way to go for full support, while WebAssembly may provide a new way to use WebGL beyond asm.js.
![WebGL ?
• JS API to OpenGL ES [v2.0]
• Drawing to a canvas using special context
• Low-level drawing [buffers, textures, shaders]
• Accelerated by GPU
• 3D and 2D](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-3-320.jpg)
![What we had…
• Chrome WebGL support 10+
• Firefox WebGL support 4+
• IE 10+ [poor support]
• Almost no mobile support [till recent time]
• Low performance](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-5-320.jpg)
![Pros and cons
• Low support
• Quite slow
• No mobile [almost]
• Not enough features
• But it’s FUN and looks nice](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-6-320.jpg)
![Improvements ?
• Working stable 1.0 WebGL release
• Full browser support [and mostly mobile]
• Nice performance
• Lots of examples, tools and frameworks
• Large community](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-9-320.jpg)
![Tools
• ShaderToy
• WebGL inspector [chrome extension]
• Chrome webGL profiler
• WebGL <-> node.js npm plugins
• And lots more](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-11-320.jpg)
![Unity and Unreal + asm.js
• FF support
• Chrome performance improvements
• LLVM compilers [C++ / Python / Ruby support]
• But has some problems…](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-12-320.jpg)
![• Awesome for newbies
• Documentation
• Extreme amount of examples
• Largest webGL community
• OpenSource [nicest js code I have ever seen]
Three.js (by mr.doom)](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-15-320.jpg)
![WebGL 2.0
• Moving to OpenGL ES 3.0
• More gl extensions [instancing, VAO, Fragment depth]
• 3D Textures
• Sampler Objects
• Uniform Buffer Objects
• Sync/Query Objects.. and more!](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-19-320.jpg)
![Future is here?
• WebGL 2.0 still has a long way to go.
• WebAssembly! New way of asm.js-ing!
• Still has problems with support [minor, but problems]
• Still developing libs / frameworks / tools, and it’s
not bad!
NOPE!](https://image.slidesharecdn.com/jslpp-150829173918-lva1-app6891/85/WebGL-Yesterday-Today-Tomorrow-20-320.jpg)
WebGL: Yesterday, Today, Tomorrow
- 1. WebGL: yesterday, today, tomorrow Bogdan Gorpynchuk NWG studios, co-founder & core developer
- 2. WebGL - one of many • WebAudioApi • FileAPI • WebRTC • WebWorkers • WebSockets • and lots more!
- 3. WebGL ? • JS API to OpenGL ES [v2.0] • Drawing to a canvas using special context • Low-level drawing [buffers, textures, shaders] • Accelerated by GPU • 3D and 2D
- 5. What we had… • Chrome WebGL support 10+ • Firefox WebGL support 4+ • IE 10+ [poor support] • Almost no mobile support [till recent time] • Low performance
- 6. Pros and cons • Low support • Quite slow • No mobile [almost] • Not enough features • But it’s FUN and looks nice
- 7. Main projects • Three.js • Chrome experiments • PlayCanvas • HexGL
- 8. Today
- 9. Improvements ? • Working stable 1.0 WebGL release • Full browser support [and mostly mobile] • Nice performance • Lots of examples, tools and frameworks • Large community
- 10. Engines • Three.js (threejs.org) • Goo engine (goocreate.com) • PlayCanvas (playcanvas.com) • Artillery Engine (artillery.com) • Scene.js (scenejs.org) • BabylonJS (babylonjs.com)
- 11. Tools • ShaderToy • WebGL inspector [chrome extension] • Chrome webGL profiler • WebGL <-> node.js npm plugins • And lots more
- 12. Unity and Unreal + asm.js • FF support • Chrome performance improvements • LLVM compilers [C++ / Python / Ruby support] • But has some problems…
- 13. asm.js
- 14. asm.js as it is…
- 15. • Awesome for newbies • Documentation • Extreme amount of examples • Largest webGL community • OpenSource [nicest js code I have ever seen] Three.js (by mr.doom)
- 16. Basic scene Some VAR’s Create scene and camera Setup renderer Add cube object Rotate / render
- 17. And THE hidden part Allmost 500 lines of code! vs. 37 using three.js
- 18. Tomorrow 2015+
- 19. WebGL 2.0 • Moving to OpenGL ES 3.0 • More gl extensions [instancing, VAO, Fragment depth] • 3D Textures • Sampler Objects • Uniform Buffer Objects • Sync/Query Objects.. and more!
- 20. Future is here? • WebGL 2.0 still has a long way to go. • WebAssembly! New way of asm.js-ing! • Still has problems with support [minor, but problems] • Still developing libs / frameworks / tools, and it’s not bad! NOPE!
- 21. DemoTime
- 22. QA?Bogdan Gorpynchuk http://nwgstudios.com Skype: le.sung e-mail: hot.surnuk@gmail.com