Graphics debugging with Firefox DevTools

Demoing the Canvas Inspector

Hello Racer WebGL version

Demoing the WebGL Shader editor

3D objects

Playing with fragment shader

// alpha channel at 0.5
gl_FragColor = vec4( vColor.x, vColor.y, vColor.z, 0.5);

// saturate the blue channel
gl_FragColor = vec4( vColor.x, vColor.y, 1.0, 1.0);

// invert the colours
gl_FragColor = vec4( 1.0 - vColor.x, 1.0 - vColor.y, 1.0 - vColor.z, 1.0);

Playing with vertex shader

// make everything narrower on the X axis
gl_Position.x *= 0.5;

// make it ... interesting
gl_Position.x -= 1.0*sin(gl_Position.y);

and...

vColor.x = 0.5*sin(gl_Position.x);