FrameBuffer Object inspector for three.js
MIT License
FrameBuffer Object inspector for three.js
####Check out a demo here: Goth GPU Physics
var helper = new FBOHelper( 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 = require( 'three' );
var FBOHelper = require( 'three.fbo-helper' );
helper.setSize( width, height );
helper.attach( fieldFBO, 'Distance Field' );
helper.attach( particleFBO, 'Particles' );
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.attach( buffer, 'Particles', function( d ) {
return `Position: (${d.x}, ${d.y}, ${d.z}) | Life: ${d.a}`;
} );
helper.update();
helper.refreshFBO( fbo );
.detach
to remove any fbo previously attachedhelper.deatch( fbo );
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.
MIT licensed
Copyright (C) 2016 Jaume Sanchez Elias, http://www.clicktorelease.com