node package manager
We need your input. Help make JavaScript better: Take the 2017 JavaScript Ecosystem survey »


gl-compare experimental

Visually compare two WebGL render loops on the fly by drawing them to an FBO and diffing them with shaders.




comparison = compare(gl, actual, expected)

Creates a comparison renderer.

  • gl is the WebGL context.
  • actual(fbo) is the first render loop to run.
  • expected(fbo) is the second render loop to run.

Note that these are both running within the same context – generally, this won't be a problem if you're cleaning up after yourself, but keep that in mind. Also note that instead of using:

gl.bindFramebuffer(gl.FRAMEBUFFER, null)

You should use:


Where fbo is the first argument passed to the render loop. If you'd like to resize your FBOs to match the size of the canvas:

function actual(fbo) {
  fbo.shape = [canvas.height, canvas.width]
function expected(fbo) {
  fbo.shape = [canvas.height, canvas.width]

Renders the actual and expected loops to their respective FBOs. Should be called before you call comparison.render.


Renders the comparison to your screen.


The mode of comparison – may be set to one of the following:

  • diff: RGB color difference.
  • onion: blending between actual and expected.
  • slide: a slider that divides actual and expected.


Used to vary the amount of diffing to do for each mode, and can be any value between 0 and 1. Has the following effects:

  • diff: 0 will amplify any difference considerably, whereas 1 will dull the difference to only show the most significant changes.
  • onion: 0 will display expected, 1 will display actual, and any values in between will be a mixture of both.
  • slide: 0 will display expected, 1 will display actual, and any values in between will move the slider from the left of the buffer to the right.


MIT. See for details.