Skip to main content

ShaderPass

ShaderPass is a ShaderModule that can be executed as a standalone fullscreen texture-processing stage. ShaderPass and CompositeShaderPass are descriptors from @luma.gl/shaders; ShaderPassRenderer is the engine class that executes them.

For the authoring model, see Shader Passes.

Usage​

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

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

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

Use a plain ShaderPass when subpasses only need the logical original or previous texture sources. Use a CompositeShaderPass when later steps need named intermediate render targets.

Types​

ShaderPass​

export type ShaderPass<
  PropsT extends Record<string, any> = Record<string, any>,
  UniformsT extends Record<string, UniformValue> = PickUniforms<PropsT>,
  BindingsT extends Record<string, Binding> = PickBindings<PropsT>,
  RenderTargetNameT extends string = never
> = ShaderModule<PropsT, UniformsT, BindingsT> & {
  passes?: ShaderSubPass<UniformsT, Extract<keyof BindingsT, string>, RenderTargetNameT>[];
};

ShaderPass inherits all ShaderModule fields and may add passes.

ShaderSubPass​

export type ShaderSubPass<
  UniformsT extends Record<string, UniformValue> = Record<string, UniformValue>,
  BindingNameT extends string = string,
  RenderTargetNameT extends string = string
> = {
  action?: 'filter' | 'sample';
  sampler?: boolean;
  filter?: boolean;
  uniforms?: UniformsT;
  inputs?: Partial<
    Record<BindingNameT | 'sourceTexture', ShaderPassInputSource<RenderTargetNameT>>
  >;
  output?: 'previous' | RenderTargetNameT;
};
PropertyDescription
action?Whether the subpass filters each pixel or performs its own sampling.
sampler?, filter?Legacy pass behavior flags.
uniforms?Uniform values applied to this subpass.
inputs?Shader binding names routed to logical texture sources.
output?Logical output target. Defaults to previous.

ShaderPassInputSource​

export type ShaderPassInputSource<TargetNameT extends string = string> =
  | 'original'
  | 'previous'
  | TargetNameT;

ShaderPassRenderTarget​

export type ShaderPassRenderTarget = {
  scale?: [number, number];
  format?: TextureFormat;
  lifetime?: 'transient' | 'history';
  initialize?: 'original' | {clearColor: [number, number, number, number]};
};

history targets retain the last successfully rendered value through an internal ping-pong pair. When one step reads and writes the same history target, it reads the previous frame and writes the current frame. initialize controls the first value after construction, resize, or reset.

CompositeShaderPass​

export type CompositeShaderPass<TargetNameT extends string = string> = {
  name: string;
  renderTargets?: Record<TargetNameT, ShaderPassRenderTarget>;
  steps: CompositeShaderPassStep<TargetNameT>[];
};

CompositeShaderPassStep​

export type CompositeShaderPassStep<TargetNameT extends string = string> = {
  shaderPass: ShaderPass<any, any, any, any>;
  inputs?: Record<string, ShaderPassInputSource<TargetNameT>>;
  output?: 'previous' | TargetNameT;
  uniforms?: Record<string, UniformValue>;
};

CompositeShaderPass owns named render targets. A plain ShaderPass does not. For routing validation, draw-time uniforms and bindings, resize behavior, and presentation methods, see ShaderPassRenderer.