https://github.com/stackgl/gl-compare
Visually compare two webgl render loops on the fly
https://github.com/stackgl/gl-compare
Last synced: 3 months ago
JSON representation
Visually compare two webgl render loops on the fly
- Host: GitHub
- URL: https://github.com/stackgl/gl-compare
- Owner: stackgl
- License: other
- Created: 2014-06-13T13:48:24.000Z (about 12 years ago)
- Default Branch: master
- Last Pushed: 2015-12-23T15:40:45.000Z (over 10 years ago)
- Last Synced: 2025-06-19T19:57:05.043Z (about 1 year ago)
- Language: JavaScript
- Homepage: http://stack.gl/gl-compare
- Size: 85.9 KB
- Stars: 8
- Watchers: 7
- Forks: 3
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# gl-compare [](http://github.com/badges/stability-badges)
Visually compare two WebGL render loops on the fly by drawing them to an FBO
and diffing them with shaders.
[](http://gl-modules.github.io/gl-compare)
## Usage
[](https://nodei.co/npm/gl-compare/)
### 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:
``` javascript
gl.bindFramebuffer(gl.FRAMEBUFFER, null)
```
You should use:
``` javascript
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:
``` javascript
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](http://github.com/gl-modules/gl-compare/blob/master/LICENSE.md) for details.