Power of WebGL (FSTO 2014)
37
The Power of WebGL Presented at the Fullstack Toronto conference, November 2014 Michael Bond Derrick Weis and Ross McKegney Verold
Transcript of Power of WebGL (FSTO 2014)
The Power of WebGLPresented at the Fullstack Toronto conference, November 2014
Michael Bond Derrick Weis
and Ross McKegneyVerold
Interactive 3D is the next big datatype on the web
TEXT AUDIO VIDEOIMAGE 3D
Graphics WebGLProcessing WebCL / Workers / EmscriptenAudio Web AudioNetworking WebRTCReal-time + Devices Web Sockets
What is WebGL?
3D Graphics Acceleration
● Gives browser direct access to your graphics card (GPU)
● Offloads CPU so that it can continue with other things
WebGL API
● JavaScript!
● Modern API based on widely-used OpenGL for Embedded Systems
Pretty Pictures
● Enables us to have scenes with realistic lighting, materials and animations
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
Graphics Pipeline
Vertices & Textures
Stuff on the screen
OpenGL Shading Language (GLSL)
● Load code using WebGL
● Compiles and runs directly on the GPU
● Purpose-built hardware runs really fast
Back in the day...
GLSL
ASM
Vertex Shader
● Run on every single vertex
● Positions each 3D vertex on the 2D screen
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.
Three.js
● By far the most commonly used framework
● Huge community of contributors
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
THREE.Scene
● Scene contains hierarchy of objects
● Every object inherits from THREE.Object3D
Materials and Textures
WebGL + DOM
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
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]
