• Share
  • Email
  • Embed
  • Like
  • Save
  • Private Content
WebGL and Web Site Performance

WebGL and Web Site Performance



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

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



Total Views
Views on SlideShare
Embed Views



1 Embed 18

https://twitter.com 18


Upload Details

Uploaded via as Microsoft PowerPoint

Usage Rights

© All Rights Reserved

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
Post Comment
Edit your comment

    WebGL and Web Site Performance WebGL and Web Site Performance Presentation Transcript

    • WebGL and web site performance Tony Parisi Vizi, inc. June 26, 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 6/27/2014http://www.tonyparisi.com
    • about me serial entrepreneur founder, Vizi co-organizer, SF WebGL Meetup co-creator, VRML and X3D web standards designer, glTF author contact information tparisi@gmail.com skype: auradeluxe http://twitter.com/auradeluxe htt p://www.tonyparisi.com/ http://www.learningwebgl.com/ 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 6/27/2014 SF WebGL Meetup http://www.meetup.com/WebGL-Developers-Meetup/
    • 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) 6/27/2014http://www.tonyparisi.com
    • the anatomy of a WebGL application 1. create a <canvas> element 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 6/27/2014
    • first render 6/27/2014http://www.tonyparisi.com no scripts… no pics.
    • 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 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 6/27/2014 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.
    • more stuff to load (1) shader source code 6/27/2014http://www.tonyparisi.com 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
    • 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. 6/27/2014http://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) 6/27/2014http://www.tonyparisi.com surface details of various parts, or even different objects, can be packed into a single image
    • 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 6/27/2014http://www.tonyparisi.com
    • what fold…? 6/27/2014http://www.tonyparisi.com full-screen apps are making a comeback… more content on the front page… and nothing below the fold to optimize.
    • 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+ 6/27/2014http://www.tonyparisi.com what IS performance? (1)
    • 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…) 6/27/2014http://www.tonyparisi.com ! 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 6/27/2014http://www.tonyparisi.com
    • perf-testing today’s WebGL sites 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… 6/27/2014http://www.tonyparisi.com
    • 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 6/27/2014http://www.tonyparisi.com