https://github.com/spite/three.fbohelper
FrameBuffer Object inspector for three.js
https://github.com/spite/three.fbohelper
Last synced: about 1 year ago
JSON representation
FrameBuffer Object inspector for three.js
- Host: GitHub
- URL: https://github.com/spite/three.fbohelper
- Owner: spite
- License: mit
- Created: 2016-09-28T00:04:39.000Z (over 9 years ago)
- Default Branch: master
- Last Pushed: 2018-02-27T23:38:08.000Z (over 8 years ago)
- Last Synced: 2025-06-05T09:42:50.888Z (about 1 year ago)
- Language: JavaScript
- Size: 11.4 MB
- Stars: 138
- Watchers: 5
- Forks: 9
- Open Issues: 2
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# THREE.FBOHelper
FrameBuffer Object inspector for three.js
####Check out a demo here: [Goth GPU Physics](https://www.clicktorelease.com/code/THREE.FBOHelper/#512)
# 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
```js
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)
```js
var THREE = require( 'three' );
var FBOHelper = require( 'three.fbo-helper' );
```
- Call .setSize to adjust to the renderer size (don't forget to do onResize!)
```js
helper.setSize( width, height );
```
- Attach WebGLRenderTargets at discretion
```js
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:
```js
helper.attach( buffer, 'Particles', function( d ) {
return `Position: (${d.x}, ${d.y}, ${d.z}) | Life: ${d.a}`;
} );
```
- Update with your animation loop
```js
helper.update();
```
- If for any reason you resize the FBO, call:
```js
helper.refreshFBO( fbo );
````
- Call ```.detach``` to remove any fbo previously attached
```js
helper.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.
#### License ####
MIT licensed
Copyright (C) 2016 Jaume Sanchez Elias, http://www.clicktorelease.com