WebGL and Web Site Performance

WebGL
and web site
performance
Tony Parisi
September, 2014

disclaimer
I’m not a perf guy.
but I am perf-curious.
and I teach the world about WebGL.
so I need to figure this out.
why?
WebGL devs need to understand high performance web site
development
the world is watching and there are lots of examples out there with
bad perf practices
we have an opportunity to add WebGL to the perf testing canon
http://www.tonyparisi.com 9/17/2014

about me
http://www.meetup.com/WebGL-Developers-Meetup/
creds
Co-creator, VRML and X3D
work
http://www.vizi.gl/
get GLAM
http://www.glamjs.org/
https://github.com/tparisi/glam/
get VIZI
https://github.com/tparisi/Vizi
contact information
tparisi@gmail.com
skype: auradeluxe
http://twitter.com/auradeluxe htt
p://www.tonyparisi.com/
http://www.learningwebgl.com/
SF WebGL Meetup
SF WebVR Meetup
http://www.meetup.com/Web-VR/
book source code
https://github.com/tparisi/WebGLBook
https://github.com/tparisi/Programming3DApplications
get the books!
WebGL: Up and Running
http://www.amazon.com/dp/144932357X
Programming 3D Applications with HTML and WebGL
http://www.amazon.com/Programming-Applications-
HTML5-WebGL-Visualization/dp/1449362966 http://www.tonyparisi.com 9/17/2014

performance savior…
or scourge?
SAVIOR…
WebGL brings the power of the GPU to the web
WebGL means no 3D plugins
WebGL pioneered Typed Arrays: compact binary data for web
applications
WebGL has no DOM – no CSS or layout impact
or SCOURGE?
WebGL has no DOM – scripts required to see anything on the
screen. lots of script code… LOTS.
WebGL requires shaders – text programs that result in
additional requests and client-side load/compile time
WebGL pulls more content down the pipe
WebGL apps tend toward full-screen… more front page content
WebGL SUCKS… CPU (if you’re not careful)

the anatomy of a WebGL
application
1. create a <canvas> element and obtain
a WebGL drawing context
var ctx= canvas.getContext(“webgl”);
2. load JavaScript setup code
a. initialize viewport
b. create buffers
c. create matrices
d. load texture maps
3. download and compile/link shaders
4. draw

first render
no scripts…
no pics.

shaders
GLSL (Open GL Shader Language) – C-like language compiled
onto the GPU and executed to position each vertex and paint
each pixel. REQUIRED TO SEE ANYTHING ON THE SCREEN.
var vertexShaderSource =
" attribute vec3 vertexPos;n" +
" attribute vec2 texCoord;n" +
" uniform mat4 modelViewMatrix;n" +
" uniform mat4 projectionMatrix;n" +
" varying vec2 vTexCoord;n" +
" void main(void) {n" +
" // Return the transformed and projected vertex valuen" +
" gl_Position = projectionMatrix * modelViewMatrix * n" +
" vec4(vertexPos, 1.0);n" +
" // Output the texture coordinate in vTexCoordn" +
" vTexCoord = texCoord;n" +
" }n";
var fragmentShaderSource =
" precision mediump float;n" +
" varying vec2 vTexCoord;n" +
" uniform sampler2D uSampler;n" +
" void main(void) {n" +
" // Return the pixel color: always output whiten" +
" gl_FragColor = texture2D(uSampler, vec2(vTexCoord.s, vTexCoord.t));n" +
"}n";
the vertex shader
transforms model-space
positions into screen
space
the fragment shader
outputs a color value
for each pixel

more stuff to load (1)
shader source code
from Anton Gerdelan’s “Loading Shaders from
Files with Ajax”
http://antongerdelan.net/webgl/shadersandajax.
html
more files == more
requests
after download, this
compile/link step
consumes additional
client side cycles

JavaScript libraries
programming WebGL to the metal not very productive;
most people use an engine library
Three.js – very popular 3D rendering engine
430k minified
Tween.js – tweening (simple animation)
5k! nice
more code from there – game engines, frameworks, app
templates…
it can get big. but we minify, compress, and defer loading.
thus has it ever been.

texture maps
bitmaps applied to the surfaces of
3D objects
image sprite-type techniques
can help
CSS sprites not supported
directly
one texture map can be used for
several 3D objects – saves both
download time and rendering
time – but utility is limited to
certain situations
bigger savings will be in
compressed, fast to load texture
formats like DDS (currently in a
WebGL extension)
surface details of
various parts, or even
different objects, can
be packed into a single
image

3D models and scenes
reminder: WebGL is an API. no file format. no DOM.
current state of practice is to load JSON, or JSON + binary data in typed
array (non-standard format)
some apps use (shudder) XML 3D data description like COLLADA (“just
server-side GZIP it, what’s the big deal…?”)
new format: glTF
http://www.gltf.gl/
a “JPEG for 3D”
Khronos group initiative – pre-standard, experimental
compact, efficient to load representation of 3D data
GL native data types require no additional processing – stored as Typed Arrays
also includes common 3D scene constructs: object hierarchy, cameras, lights,
common material types, animation
all data for a scene can be packed into a single file (or multiple, it’s totally flexible)
can be streamed

what fold…?
full-screen apps are making a comeback…
more content on the front page… and nothing below the fold to optimize.

what IS performance? (1)
in games, fast run-time performance usually comes at the
expense of large initial engine download
pro game engine ports to WebGL are taking us back to the
future
Emscripten cross-compiled C++ to asm.js (low-level assembly-style
JavaScript) – really fast and not leaky
resulting JavaScript is HUGE – 10Mb+ http://www.tonyparisi.com 9/17/2014

what IS performance? (2)
what happens after first
render? we could be
creating a high-performance
way to deliver perf hogs…
WebGL apps can be
CPU-suckers! lots of
computation needs to be
done on CPU
JavaScript engines tend
to be greedy…
new Page Visibility API
can help (but it doesn’t
tell you when a window
is occluded…)
! gah !

some things to try
inline shaders (defeats caching)
pack shaders, unpack on client
defer loading library code – start with small head end
pack textures
use DDS textures when the format becomes available (WebGL 2?)
use procedural textures and geometry
defer 3D content loading – load on navigate, visibility, combine with
prediction
use CSS3 3D transforms for front page/load screen – they are
hardware-accelerated and can be rendered before scripts are
loaded

WebGL sites: some perf
tests
WebGL showcase sites not optimized
not sure end users care… these are showcases
but View Source and copy-paste could spread bad practices
pro sites showing mixed results
but this could be similar to the distribution in non-WebGL
sites…

making today’s perf tests
WebGL-aware
search DOM for canvas elements and WebGL patterns
var c = document.createElement("canvas");
var gl1 = c.getContext("webgl"); // return WebGL context
var ctx2d = c.getContext("2d"); // returns NULL. Canvas cannot have
multiple context types.
var gl2 = c.getContext("experimental-webgl"); // returns gl1. Browser
treats experimental-webgl as an alias for webgl
if succeeds then either (a) it’s already being used for WebGL or (b)
false positive: uninitialized canvas
look for inclusion of popularly used WebGL libraries like
Three.js, Babylon.js, glMatrix…
look for Ajaxing shader source files: .vs, .fs, .glsl
look for Ajaxing popular model files: .stl, .obj, .dae, .gltf (soon)

the state of things
WebGL presents new perf challenges
scripts required to see anything on the screen
more stuff to load – shaders, JS libraries, textures, models
full-screen apps make it hard to use above-the-fold techniques
game engines might trade load time for run-time speed… will users
tolerate it?
performance doesn’t end at first render; apps need to watch resources
once loaded
WebGL devs need to start thinking about site performance
WebGL moving from demo to deployment, so we should start to see
good perf techniques (we better!)
most WebGL developers are game devs or visualization experts… great
at frame rate but need to learn web site perf
we should investigate adding WebGL checks to standard perf tests

WebGL and Web Site Performance

Recommended

Recommended

More Related Content

Viewers also liked

Viewers also liked (20)

More from Tony Parisi

More from Tony Parisi (20)

Recently uploaded

Recently uploaded (20)

WebGL and Web Site Performance