Render target; framebuffer object

A private canvas for the GPU: draw a scene into a texture now, then use that texture for shadows, effects, mirrors, picking, or another pass.

render the scene into a texturedraw somewhere other than the screenuse one camera view inside anothermake a texture from the current framehow do I make a security camera monitor in 3DFBOframe buffer objectframebufer

See it

Live demo coming soon

What it is

A render target is a texture, or set of textures, that receives a draw instead of the visible screen. In WebGL the underlying container is a framebuffer object, or FBO, whose attachments can hold color, depth, or stencil results. Afterward a shader can sample the color or depth texture like any other image.

Render targets are the plumbing behind shadow maps, post-processing, mirrors, portals, picking buffers, deferred shading, and GPU simulation. They let one render become input to the next, which turns a single draw into a pipeline of passes. The security-camera monitor on a game wall and a car's rear-view mirror are both a second camera drawn into a texture.

Gotcha: binding a target does not automatically fix the viewport, clear old pixels, resize attachments, or restore the screen afterward. You also cannot safely sample a texture while the same texture is attached for writing in that pass; use two targets and swap them. Multisampled attachments must be resolved before their result can be sampled.

Ask AI for it

Add an offscreen pass to this three.js renderer with THREE.WebGLRenderTarget at half the drawing-buffer width and height. Attach a DepthTexture, call renderer.setRenderTarget(target), set the matching viewport, clear, and render the scene; then call renderer.setRenderTarget(null) and draw target.texture through a full-screen ShaderMaterial that applies a 9-tap Gaussian blur. Recreate the target on resize, dispose the old attachments, and use two targets for horizontal and vertical blur so no pass reads from the texture it is writing.

You might have meant

post processing render passshadow mapping shadow acne peter panningpicking via ray castingtexturedepth buffer z buffer