Visually compare two webgl render loops on the fly
Last updated 5 years ago by mattdesl .
MIT · Repository · Bugs · Original npm · Tarball · package.json
$ cnpm install gl-compare 
SYNC missed versions from official npm registry.

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.

Current Tags

  • 2.0.2                                ...           latest (5 years ago)

4 Versions

  • 2.0.2                                ...           5 years ago
  • 2.0.1                                ...           6 years ago
  • 2.0.0                                ...           6 years ago
  • 1.0.0                                ...           6 years ago
Today 1
This Week 1
This Month 1
Last Day 0
Last Week 1
Last Month 4
Dependencies (5)
Dev Dependencies (12)

Copyright 2014 - 2016 © |