• In short: 3D rendering on the web
• Very low level (compared to other web APIs)

• Both Firefox and Chrome use
  • On mobile: OpenGL ES2
  • On Mac and Linux: "desktop" OpenGL
  • On Windows: OpenGL ES2 (through ANGLE → Direct3D)
• ANGLE also provides with shader translation/validation on all platforms.

• The JS that calls into WebGL runs in the same thread as layout and most of the web content
• Means other things can block your game's thread
• WebGL workers \o/

• OpenGL specifications have behaviors left undefined to achieve the best performance
• On the web we cannot allow undefined behaviors because they generally expose security vulnerabilities
• Browsers needs to perform additional checks
  • Exemple: gl.drawElements() checks that all referenced vertices are within vertex buffer storage.
  • All newly allocated resources are cleared to zero to prevent access to unitialized data.

• WebGL tries to pipeline commands as much as possible
• A point of synchronization can block the JS thread for a long time
• For instance: gl.getError(), gl.readPixels(), gl.finish()

• Data transfer betwwen CPU and GPU is slow
  • Texture uploads, vertex buffers, ect.
• Cache getter calls like gl.getParameter(), gl.getUniformLocation()
• Avoid gl.uniform1f(gl.getUniformLocation(program, "time"), time);

• This is generally the most important optimization!
• State changes are expensive (texture bindings, shaders, etc.)
• Pack all the geometry that share the same states together in the same drawing commands.
• Pack several textures into one, and select the appropritae region with texture coordinates.
• batch, batch, batch!

• Highly parallel execution
• Process Vertices and Fragments
• We can render worlds in two triangles!
  • For example: ray marching in a fragment shader
  • Or all the cool demos at shadertoy.com!

            if (foo < 0.5) {
              // do A...
            } else {
              // do B...
            }
      

• Branching is slow!
• Often the cost of computing both A and B
• Coherency usually improves performance

• For the texture cache, proximity is considered in 2D
• Cache misses are expensive

• Shader compilation is synchronous
• Very heavy shaders can block the browser for several seconds on some drivers
• Example: shadertoy.com

• Avoid high precision floats in fragment shaders (mobile hardware don't support it)
• Always have vertex attrib 0 array enabled.
• Otherwise it forces the browser to do complicated emulation when running on desktop OpenGL.

• Is it JS code?
• Data transfer?
• Vertex processing?
• Fragment processing?
• Profile your code!
• Test and measure on all the platforms you target

• Due to pipelining, calls that show up in profiles are not always the ones that actually take time.
• Use gl.finish() (but not in prduction!)

• The GPU is good at doing some specific opertations
• It is NOT good at everything
  • Rendering text
  • Vector shapes in general (bezier curves)
  • processing that is sequencial by nature

• Publishing on the web, we need to care about network / loading times. Modern games often contain several gigabytes of Assets...
• Asset LOD streaming
• More client-side procedural content?

• www.khronos.org/registry/webgl/specs/1.0
• www.khronos.org/webgl/security/
• hacks.mozilla.org/2013/04/the-concepts-of-webgl
• www.khronos.org/webgl/wiki/WebGL_and_OpenGL_Differences

• Nicolas Silva
• nical@mozilla.com
• @nicalsilva
• http://nical.github.com/onGameStart2013