power of webgl (fsto 2014)
TRANSCRIPT
The Power of WebGLPresented at the Fullstack Toronto conference, November 2014
Michael Bond Derrick Weis
and Ross McKegneyVerold
Graphics WebGLProcessing WebCL / Workers / EmscriptenAudio Web AudioNetworking WebRTCReal-time + Devices Web Sockets
3D Graphics Acceleration
● Gives browser direct access to your graphics card (GPU)
● Offloads CPU so that it can continue with other things
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
OpenGL Shading Language (GLSL)
● Load code using WebGL
● Compiles and runs directly on the GPU
● Purpose-built hardware runs really fast
Fragment Shader
● GPU fills in each triangle
● Runs shader for every pixel
● Texturing and lighting
● Outputs a colour
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.
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
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..
● 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
Component Entity Model
Causes the attached three object to pulsate (scale) based on abs(sin(time * speed))
http://vrld.co/UOZaoD
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
Performance
● Always needs to be a balance between JavaScript execution and WebGL rendering
● Either can stall the other
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
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
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
Links
● All codepens from this talk○ http://codepen.io/collection/XWqyGD/
PUBLISH INTERACTIVE 3D TO THE OPEN WEB
Michael BondLead Engine [email protected]
Derrick WeisPlatform [email protected]
Ross [email protected]