WebGL and Web Site Performance


Published on

Updated slides from my talk at the San Francisco and Silicon Valley Web Performance Group


Slides from my talk at WebPerfDays Silicon Valley 2014 http://www.webperfdays.org/events/2014-siliconvalley/index.html

Published in: Technology, Art & Photos
  • Be the first to comment

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

WebGL and Web Site Performance

  1. 1. WebGL and web site performance Tony Parisi September, 2014
  2. 2. 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
  3. 3. 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
  4. 4. 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) http://www.tonyparisi.com 9/17/2014
  5. 5. 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 http://www.tonyparisi.com 9/17/2014
  6. 6. first render no scripts… no pics. http://www.tonyparisi.com 9/17/2014
  7. 7. 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 http://www.tonyparisi.com 9/17/2014
  8. 8. 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 http://www.tonyparisi.com 9/17/2014
  9. 9. 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 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. http://www.tonyparisi.com 9/17/2014
  10. 10. 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 http://www.tonyparisi.com 9/17/2014
  11. 11. 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: 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 http://www.tonyparisi.com 9/17/2014
  12. 12. what fold…? http://www.tonyparisi.com 9/17/2014 full-screen apps are making a comeback… more content on the front page… and nothing below the fold to optimize.
  13. 13. 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
  14. 14. 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…) http://www.tonyparisi.com 9/17/2014 ! gah !
  15. 15. 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 http://www.tonyparisi.com 9/17/2014
  16. 16. 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… http://www.tonyparisi.com 9/17/2014
  17. 17. 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) http://www.tonyparisi.com 9/17/2014
  18. 18. 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 http://www.tonyparisi.com 9/17/2014