WebGLand web site performance

Tony ParisiSeptember, 2014

04/10/2023

http://www.tonyparisi.com

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

04/10/2023

http://www.tonyparisi.com

about me

contact informationtparisi@gmail.comskype: auradeluxehttp://twitter.com/auradeluxe                   http://www.tonyparisi.com/http://www.learningwebgl.com/

book source codehttps://github.com/tparisi/WebGLBook

https://github.com/tparisi/Programming3DApplications

get the books!WebGL: Up and Runninghttp://www.amazon.com/dp/144932357XProgramming 3D Applications with HTML and WebGLhttp://www.amazon.com/Programming-Applications-HTML5-WebGL-Visualization/dp/1449362966

SF WebGL Meetuphttp://www.meetup.com/WebGL-Developers-Meetup/

SF WebVR Meetuphttp://www.meetup.com/Web-VR/

get VIZIhttps://github.com/tparisi/Vizi

get GLAMhttp://www.glamjs.org/https://github.com/tparisi/glam/

workhttp://www.vizi.gl/

credsCo-creator, VRML and X3D

04/10/2023

http://www.tonyparisi.com

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)

04/10/2023

http://www.tonyparisi.com

the anatomy of a WebGL application

1. create a <canvas> element and obtain a WebGL drawing contextvar ctx= canvas.getContext(“webgl”);

2. load JavaScript setup codea. initialize viewport

b. create buffers

c. create matrices

d. load texture maps

3. download and compile/link shaders

4. draw

04/10/2023

http://www.tonyparisi.com

first render

no scripts… no pics.

04/10/2023

http://www.tonyparisi.com

shaders

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 value\n" +" gl_Position = projectionMatrix * modelViewMatrix * \n" +" vec4(vertexPos, 1.0);\n" +" // Output the texture coordinate in vTexCoord\n" +" 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 white\n" +

" 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

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.

04/10/2023

http://www.tonyparisi.com

more stuff to load (1)shader source code

from Anton Gerdelan’s “Loading Shaders from Files with Ajax” http://antongerdelan.net/webgl/shadersandajax.html

after download, this compile/link step consumes additional client side cycles

more files == more requests

04/10/2023

http://www.tonyparisi.com

more stuff to load (2)JavaScript libraries

programming WebGL to the metal not very productive; most people use an engine library

Three.js – very popular 3D rendering engine430k 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.

04/10/2023

http://www.tonyparisi.com

more stuff to load (3)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

04/10/2023

http://www.tonyparisi.com

more stuff to load (4)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: glTFhttp://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

04/10/2023

http://www.tonyparisi.com

what fold…?full-screen apps are making a comeback…

more content on the front page… and nothing below the fold to optimize.

04/10/2023

http://www.tonyparisi.com

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+

what IS performance? (1)

04/10/2023

http://www.tonyparisi.com

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 !

04/10/2023

http://www.tonyparisi.com

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

04/10/2023

http://www.tonyparisi.com

WebGL sites: some perf tests

WebGL showcase sites not optimizednot sure end users care… these are showcases

but View Source and copy-paste could spread bad practices

pro sites showing mixed resultsbut this could be similar to the distribution in non-WebGL sites…

04/10/2023

http://www.tonyparisi.com

making today’s perf tests WebGL-aware

search DOM for canvas elements and WebGL patternsvar 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)

04/10/2023

http://www.tonyparisi.com

the state of things

WebGL presents new perf challengesscripts 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 performanceWebGL 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