Question

I would like to play around with testing a 3D map, of sorts. At it’s simplest, one flat pane, with map lines etc. drawn onto it, flat (as if I was drawing onto an HTML canvas). But I want that pane to be movable in 3D space.

I know that I can make a flat pane in three.js very simply, but is it possible to implement some sort of ‘custom texture’ that would allow me to programmatically draw onto this pane?

Answer 1

It is called render-to-texture in webGL.

Three.js provides WebGLRenderTarget which can be used as image source for further textures. You render your scene to WebGLRenderTarget instead of main WebGL screen. Then you use this WebGLRenderTarget as image source for the texture.

A lot of 2D post-processing works like this. They render the world to 2D texture, then use fragment shaders to apply per-pixel postprocessing code, like blurring.

For examples, see e.g. http://mrdoob.github.com/three.js/examples/webgl_postprocessing.html

It renders the scene for 2D postprocessing, but the theory is the same.

Here is the WebGLRenderTarget setup code:

https://github.com/mrdoob/three.js/blob/master/examples/js/postprocessing/EffectComposer.js#L14