WebGL and Web Site Performance
-
Upload
tony-parisi -
Category
Technology
-
view
123 -
download
4
description
Transcript of WebGL and Web Site Performance
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 [email protected]: 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