This talk was delivered in the "Red Pill" track of the Fullstack Toronto conference (http://fsto.co), November 2014.

1. The Power of WebGL
Presented at the Fullstack Toronto conference, November 2014
Michael Bond
Derrick Weis
and Ross McKegney
Verold

2. Interactive 3D is the next big datatype on the web
TEXT IMAGE AUDIO VIDEO 3D

9. Link

10. Graphics WebGL
Processing WebCL / Workers / Emscripten
Audio Web Audio
Networking WebRTC
Real-time + Devices Web Sockets

11. What is WebGL?

12. 3D Graphics Acceleration
● Gives browser direct access to your graphics card (GPU)
● Offloads CPU so that it can continue with other things

13. WebGL API
● JavaScript!
● Modern API based on widely-used OpenGL for Embedded
Systems

14. Pretty Pictures
● Enables us to have scenes with realistic lighting, materials and
animations

15. WebGL is low-level
● Doesn’t know what a light or a camera is
● Just knows about arrays of vertices, textures, and other data
● Has to be told what to do with the data

16. Graphics Pipeline
Vertices & Textures
Stuff on the screen

17. OpenGL Shading Language (GLSL)
● Load code using WebGL
● Compiles and runs directly on the GPU
● Purpose-built hardware runs really fast

18. Back in the day...
GLSL
ASM

19. Vertex Shader
● Run on every single vertex
● Positions each 3D vertex on the 2D screen

20. Fragment Shader
● GPU fills in each triangle
● Runs shader for every pixel
● Texturing and lighting
● Outputs a colour

21. I ain’t got time for this!
● We want to work with higher level abstractions
● Many graphics libraries out there
○ Three.js
○ Babylon.js
○ CopperLicht
○ etc.

22. Three.js
● By far the most commonly used framework
● Huge community of contributors

23. API
● Gives you cameras, lights, materials, etc.
● Don’t need to worry about shaders (but you can!)
● Don’t need to deal with matrix math
● All you need is THREE.Scene and THREE.Camera

24. THREE.Scene
● Scene contains hierarchy of objects
● Every object inherits from THREE.Object3D

25. Materials and Textures

26. WebGL + DOM

27. It’s Just a <canvas>
● No plugins
● Easy to integrate, framework agnostic
● Can be used for anything:
○ Small animated area of web page
■ can render transparently over other items in DOM
[link]
○ Larger application or game
○ Data visualizations
○ Unlimited possibilities..

28. Component Entity Model
● Attach components to any object or asset (Entity)
● Modular, easy to reuse
● Code + data
● Integrate third party libraries easily
○ Ammo.JS http://codepen.io/gentooist/pen/azzPyL

29. Causes the attached three
object to pulsate (scale)
based on abs(sin(time *
speed))
http://vrld.co/UOZaoD

30. Fun with WebGL
● High performance native libraries converted to Javascript via
Emscripten
○ Ammo.js (Bullet Physics Library)
■ https://github.com/kripken/ammo.js/
○ Fun examples:
■ Simple Ammo.js Example
■ Delivery Simulator

31. Performance

32. Performance
● Always needs to be a balance between JavaScript execution
and WebGL rendering
● Either can stall the other

33. JavaScript Performance
Be good.
● Minimize memory allocation every frame.
● Don’t change an object’s virtual type on the fly
● Not running code is always faster
Use asm.js libraries or workers for intensive work when possible

34. WebGL Performance
● Each WebGL API command is expensive
○ Merge geometry
○ Share materials and textures
● Complex Fragment Shaders
○ Disable unneeded material features
○ Decrease number of lights, etc.
○ Reduce screen resolution

35. Download Performance
We want our apps to load fast!
● Model triangles
● Animation frame rate and length
● Texture resolution
● Texture format
○ Download size: jpg < png < dds
○ In-memory size: dds < jpeg < png

36. Links
● All codepens from this talk
○ http://codepen.io/collection/XWqyGD/

37. PUBLISH INTERACTIVE 3D
TO THE OPEN WEB
Michael Bond
Lead Engine Developer
michael.bond@verold.com
Derrick Weis
Platform Engineer
derrick.weis@verold.com
Ross McKegney
CEO
ross.mckegney@verold.com