This is a small helper tool to view render targets and data textures, displaying thumbnails and a separate viewer window when you click on a thumb, in the viewer you can zoom in and pick the pixel values. Click on the small rectangle to save it as image. With the arrows you can place the thumbs bar where it doesn’t cover your overlay if any.
I just made it for some quick inspection and comparing of values, unfortunately it seems Firefox has a bug with drawImage using the onscreen context so it’s slow in Firefox, i’ll investigate into that when i have time. However it was quickly made for debugging of atlases and other non-visible data, if you get any issue feel free to tell. If it finds some use i might extend it.
You can also use it to debug depth maps such as from lights, to use it create it:
const inspector = new THREE.RenderTargetInspector( 200, renderer ); // 200x200 thumbs
And update it in your render loop:
inspector.update();
You can add render targets, textures and uniform objects, you might use a uniform if you want to see the changed textures or when they will be generated some time later.
inspector.add( renderTarget, 'Some render target' );
inspector.add( material.uniforms.dataTexture, 'Data texture from uniform' );
inspector.add( material.uniforms.dataTexture.value, 'Data texture' );
inspector.add( csm.lights, null, { // An array of lights
type: 'depth'
});
The third parameter is an options object, options are:
-
fragment
A string of glsl code which will be inserted at the end of the fragment main body. It’s useful to highlight some threshold on the output or different decoding. For default:
gl_FragColor = texture2D ( map, ( floor( vUv * size ) + 0.5 ) / size ); -
onBeforeCompile
For custom shader code. -
type
Currently just ‘depth’, for RGBA encoded depth maps.
Some example: https://mevedia.com/share/RenderTargetInspector
Plugin: https://mevedia.com/share/RenderTargetInspector/RenderTargetInspector.min.js
Some test with simple planar terrain: https://streamable.com/ziovg