home/ atoms/ p5js-framebuffer-gpu-texture

p5.Framebuffer is an off-screen GPU surface you can draw to and then reuse as a texture

A p5.Framebuffer (createFramebuffer() in WEBGL mode) is an off-screen render target that lives on the GPU. Drawing between fb.begin() and fb.end() renders into the framebuffer instead of the main canvas. The result can then be applied as a texture on 3D geometry with texture(), sampled in a shader, or drawn back with image(). Because it stays on the GPU where most computation already happens, reads and writes are fast without shuttling data between CPU and GPU — enabling feedback loops (ping-ponging two framebuffers), multi-pass rendering, higher-precision color, and depth-based effects like fog and depth-of-field.

Examples

let fb; function setup() { createCanvas(400, 400, WEBGL); fb = createFramebuffer(); } function draw() { fb.begin(); background(0); sphere(80); fb.end(); texture(fb); plane(400, 400); // framebuffer used as a texture }

Assessment

Explain why drawing into a framebuffer and reusing it as a texture is faster than get()+image() on the main canvas. Describe a video-feedback loop with two framebuffers.

“Because Framebuffers live on the GPU, where we're already doing most of the computation, you can write to and read from Framebuffers quickly”