Shader

The Shader class holds a compiled shader.

• It takes shader source code and compiles it during construction.
• Shaders are used as inputs when creating RenderPipeline and ComputePipeline objects.
• A Shader is immutable and the same compiled shader can safely be referenced by many pipelines.

Shader

Creation

Device.createShader() with source, language, stage information, and debug policy

Ownership

Application- or factory-owned immutable resource; share it across pipelines

Languages

WGSL on WebGPU; GLSL on WebGL 2; portable applications provide both paths

Validation

Compilation diagnostics depend on backend, stage, entry point, and enabled features

Lifecycle

Compile once, reuse across compatible pipelines, then destroy with its owner

Cost

Compilation can be expensive and unpredictable; never rebuild unchanged shaders per frame

:::warning Common mistake Shadertools assembles source, but the active Core adapter still compiles it. Supplying only WGSL does not create a WebGL fallback, and supplying only GLSL does not create a WebGPU path. :::

Usage

Create a pair of shaders

const vs = device.createShader({stage: 'vertex', source});
const fs = device.createShader({stage: 'fragment', source});

Types

ShaderProps

Properties for a Shader

Field	Type	Description
id	string	name/identifier (for debugging)
stage	'vertex' | 'fragment' | 'compute'	Required by WebGL
source	string	Shader source code
sourceMap?	string	WebGPU only
language?	'glsl' | 'wgsl'	wgsl in WebGPU only
entryPoint?	string	WGSL only, name of main function
debug	'error' (default) 'never' | 'warnings' | 'always	Will show a popup in the canvas with error log

Members

• device: Device - holds a reference to the
• handle: unknown - holds the underlying WebGL or WebGPU shader object
• props: ShaderProps - holds a copy of the ShaderProps used to create this Shader.

Methods

constructor(props: ShaderProps)

Shader is an abstract class and cannot be instantiated directly. Create with device.createShader(...).

destroy(): void

Free up any GPU resources associated with this shader immediately (instead of waiting for garbage collection).

getInfoLog(): Promise<CompilerMessage[]>

Returns an array of CompilerMessage entries containing errors and warnings from the compilation.

getTranslatedSource(): string | null

On some WebGL 2 systems, it is possible to query the translated shader source in the host platform's native language (HLSL, GLSL, and even GLSL ES).

debugShader(trigger?: 'error' | 'never' | 'warnings' | 'always'): void

Shows the shader log in a popup in the canvas if the debug condition is met 'error' |\ 'never' \| 'warnings' \| 'always'. Shows errors inline with the source code. If translated source is available (getTranslatedSource()), shows the translated source after the original source. Note that translated source is only available if shader compilation succeeds.

Performance

Compiling shaders is usually cheaper than creating complete pipelines, but applications that repeatedly request the same shader source should still prefer ShaderFactory over calling device.createShader() directly.

Remarks

• Shader compilation is fairly fast, in particular compared to Pipeline linking.
• In WebGL, checking for shader compile status and pipeline link status is expensive as it forces a GPU sync.
• Therefore checking is not done unless luma.log.level > 0. If your program fails to render, please increase the level.
• If the shader-async-status-webgl feature is available, WebGL will use async shader compilation and pipeline linking.