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.

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

4. Yesterday
2011-2015

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