gl-compare
Visually compare two WebGL render loops on the fly by drawing them to an FBO
and diffing them with shaders.
Usage
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:
fbo.bind()
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]
}
comparison.run()
Renders the actual
and expected
loops to their respective FBOs. Should be
called before you call comparison.render
.
comparison.render()
Renders the comparison to your screen.
comparison.mode
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
.
comparison.amount
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.
License
MIT. See LICENSE.md for details.