Skip to main content

Shader Passes

A shader pass is a shader module that can run as a fullscreen texture-processing stage. The pass descriptor lives in @luma.gl/shadertools; the renderer that executes pass chains lives in @luma.gl/engine as ShaderPassRenderer.

Components

ComponentRole
ShaderPassRendererOwns the fullscreen draw path, swap framebuffers, named targets, shader inputs, and presentation step.
ShaderPassPipelineChains existing passes with named intermediate render targets.
ShaderPassDescribes one standalone texture-processing effect and its optional subpasses.
ShaderSubPassDescribes one draw inside a pass, including source routing, output routing, and subpass uniforms.

Use a plain ShaderPass when each stage only needs the original input texture or the previous result. Use a ShaderPassPipeline when later steps need named intermediate textures such as an extracted highlight texture and its blurred version.

Execution Model

ShaderPassRenderer receives a source texture, runs each pass or pipeline step, and either returns the final texture or presents it to the current framebuffer. It always exposes two logical texture sources:

SourceMeaning
originalThe texture passed to renderToTexture() or renderToScreen().
previousThe current output in the shared pass chain.

Pipelines may add named render targets. The renderer validates routing, manages their size, and prevents a subpass from reading and writing the same named target in one draw.

When To Use Shader Passes

  • Postprocessing color, blur, bloom, depth-of-field, and temporal effects.
  • Fullscreen effects whose inputs and outputs are textures.
  • Reusable effects that should be configured as shader modules but executed by an engine-owned pass renderer.

Do not use shader passes for ordinary geometry shading. Use Model with modules or plugins when the shader participates in a model's vertex and fragment pipeline.

Minimal Shape

import {ShaderPassRenderer} from '@luma.gl/engine';

const renderer = new ShaderPassRenderer(device, {
shaderPasses: [myShaderPass, myShaderPassPipeline]
});

const outputTexture = renderer.renderToTexture({sourceTexture});

For descriptor fields, see ShaderPass. For execution methods and routing details, see ShaderPassRenderer. The current built-in effect catalog is under Shader Pass Catalog.