Skip to main content

Shadertools

Overview​

@luma.gl/shadertools assembles reusable shader behavior. It resolves module dependencies, typed props and bindings, hooks, injections, plugins, and passes into shader source. It does not create a device or compile shaders itself. The generated Shadertools API index at /docs/api-reference/generated/shadertools contains every public descriptor, helper, built-in module, and type with source links.

When to use it​

Use Shadertools when shader behavior must be shared, configured, or composed. Use plain WGSL or GLSL for a tiny one-off shader. Move up to Engine when the assembled shader needs geometry, inputs, a pipeline, and draw lifecycle management.

Live example​

Toggle the module behavior in the running example and compare the reusable module inputs with the assembled WGSL/GLSL application that Engine submits.

Dependencies
color → lighting
Hook
fragmentColor(baseColor)
Injection
lighting::shade
Uniforms
lighting.intensity
Assembled teaching source
// module: color
fn applyColor(base: vec3<f32>) -> vec3<f32> { return base; }

// module: lighting
fn shade(base: vec3<f32>) -> vec3<f32> { return applyColor(base) * 0.85; }
Loading interactive example…

Core concepts​

shader moduleReusable shader behavior with source, dependencies, typed props or bindings, and optional injection points.
Reusable shader behavior with source, dependencies, typed props or bindings, and optional injection points.
bindingThe connection that makes a buffer, texture, sampler, or uniform block available to shader code.
The connection that makes a buffer, texture, sampler, or uniform block available to shader code.
hookA named extension point in shader source that modules or plugins may call or implement.
A named extension point in shader source that modules or plugins may call or implement.
injectionShader source inserted at a declared hook or source location during assembly.
Shader source inserted at a declared hook or source location during assembly.
pluginA configurable shader extension that selects modules, bindings, and source changes for a rendering feature.
A configurable shader extension that selects modules, bindings, and source changes for a rendering feature.
pipelineCompiled shader stages plus fixed GPU state used for rendering or compute work.
Compiled shader stages plus fixed GPU state used for rendering or compute work.

The learning spine is: modules and dependencies; uniforms and bindings; hooks and injections; assembly; plugins and passes; portability; then the built-in module and pass catalogs.

Feature card​

Modules and dependenciesPackage shader behavior once and assemble dependencies in deterministic order.
Typed props and bindingsDescribe CPU-facing configuration and shader-visible resources together.
Hooks and injectionsExtend stable shader contracts without copying whole shader programs.
PluginsBundle modules, bindings, and source changes into configurable rendering features.
Shader passesDescribe reusable fullscreen image operations for postprocessing workflows.
WGSL and GLSL pathsShare one feature model while supplying source for WebGPU and WebGL 2.

Workflows​

  1. Learn the workflowBuild the mental model before choosing classes.
  2. Copy a focused recipeStart from a complete, small task.
  3. Check the complete APIConfirm exact types, defaults, and ownership.

The Shadertools cookbook covers authoring modules, exposing props, adding hooks, injecting source, composing dependencies, creating plugins, and defining passes.

API index​

Composable shader modules, dependencies, hooks, injections, plugins, passes, and portable assembly.

  • Modules and dependencies
  • Props and bindings
  • Hooks and injections
  • Assembly
  • Plugins and passes
  • Portability and catalogs

The generated Shadertools API index is the exhaustive, source-linked inventory of every public value and TypeScript export. The curated pages explain how the related families fit together.

Keep the shader module catalog and shader pass catalog separate from the teaching path; use them after choosing the relevant descriptor family.

Limits and compatibility​

  • A module may provide WGSL, GLSL, or both. The selected backend requires a compatible source path.
  • Shadertools assembles text and metadata; Core adapters perform validation and compilation.
  • Dependency order is deterministic, but conflicting hook or binding contracts remain author errors.
  • Plugins should state their source, binding, and backend requirements explicitly.
ShadertoolsEngineCore
  • Use Engine to bind module props and draw a Model.
  • Use Core for the resources and pipelines that compile assembled source.
  • Shader modules can also be consumed by GPU scheduling render and compute nodes.