THREE.FBOHelper
FrameBuffer Object inspector for three.js
Goth GPU Physics
Check out a demo here:Screenshots
Position buffer | Motion blur buffer |
Shadow map buffer | Position buffer |
How to use
- Include THREE.FBOHelper.js. There's an ES6 build and an ES5 build transpiled with babel-cli in /build.
- Create a helper linked to a WebGLRenderer
var helper = renderer ;
or use npm to install the package:
npm i three.fbo-helper
and include it in your code (remember to include three.js too)
var THREE = ;var FBOHelper = ;
- Call .setSize to adjust to the renderer size (don't forget to do onResize!)
helper;
- Attach WebGLRenderTargets at discretion
helper;helper;
attach()
admits a third parameters, formatter
, a function that will receive an object with the values of the current point x
, y
, u
, v
, r
, g
, b
, and a
. You can return a custom string in case you want to show a different caption in the label. Otherwise, it will show all the values.
Example:
helper;
- Update with your animation loop
helper;
- If for any reason you resize the FBO, call:
helper;
- Call
.detach
to remove any fbo previously attached
helper;
Once the helper is working, you can select FBOs to inspect, and drag the viewer around and use the scroll/mousewheel to zoom in and out.
License
MIT licensed
Copyright (C) 2016 Jaume Sanchez Elias, http://www.clicktorelease.com