A GPU becomes useful when browser graphics need more work than CPU-based drawing or JavaScript pixel processing can comfortably handle. Real-time 3D and repeated video effects are two examples: intensive JavaScript processing can make the interface feel sluggish. WebGL provides the browser route to the GPU for these tasks. section 15.2 section 15.3
The trade-off is complexity. A WebGL effect involves shaders and a canvas context, even when the goal is only to change image pixels. A vertex shader can position a flat square covering the canvas; a fragment shader can then determine the drawn pixels’ colors. For a larger 3D scene, higher-level libraries such as Three.js or Babylon.js let you work with objects instead of handling so much rendering detail. section 15.2
Listing 15.1. An example WebGL shader (continued)
precision mediump float;
varying vec2 v_texCoord; #1
uniform sampler2D u_image0; #2
void main(void) {
vec4 sourcePixel = #3
texture2D(u_image0, v_texCoord);
float multiply = 1.0;
vec2 center = vec2(0.5, 0.5);
float dist = distance(v_texCoord, center);
gl_FragColor = (0.6-dist) * sourcePixel; #4
}
The fragment shader samples an image and varies its output color by distance from the center, producing a radial fade. section 15.2
Move a camera filter off the CPU
A video component can first process frames with JavaScript and a 2D canvas. To use the GPU instead, a WebGL version changes the internal canvas context and handles shader code behind the component. Its demonstrated filters include greyscale, sepia, and edge detection; custom shaders can also be supplied. The component boundary keeps that low-level work out of the page using the effect. section 15.3
