Use this skill when writing custom shaders, uniforms, filters, or batchers in PixiJS v8. Covers Shader.from({gl, gpu, resources}), GlProgram/GpuProgram, UniformGroup with typed uniforms (f32, vec2, mat4x4), UBO mode, textures as resources, custom Filter via Filter.from, GLSL ES 3.0 conventions (in/o

Custom shaders bind GLSL and WGSL programs to scene objects via Shader.from({ gl, gpu, resources }) . Uniforms live in typed UniformGroup s, textures are passed as separate resources, and the same shader can target both WebGL and WebGPU. Quick Start Related skills: pixijs filters (built in filters), pixijs scene mesh (custom geometry), pixijs performance (batch optimization), pixijs migration v8 (shader API migration from v7). Core Patterns Dual renderer shader (WebGL + WebGPU) If only gl is provided, the shader works with WebGL only. If only gpu is provided, it works with WebGPU only. The compatibleRenderers bitmask is set automatically. GlProgram does not auto inject version 300 es . If you write version 300 es yourself, PixiJS preserves it and treats the shader as GLSL ES 3.0; otherwise it injects WebGL1 compat macros ( define in varying , define texture texture2D ) and runs the shader as WebGL1 style GLSL. GlProgram always injects a default precision ( highp vertex, mediump fragment) and the program name. For GLSL ES 3.0, use in / out instead of attribute / varying , texture() instead of texture2D() , and an out vec4 instead of gl FragColor . Textures as resources Textures are resources, not uniforms. Pass the texture's source and style separately: Resources are a flat key value map. The key must match the uniform/binding name in the shader source. Resources can also be plain objects (auto wrapped into UniformGroup ): UBO mode (Uniform Buffer Objects) UBO mode packs uniforms into a single GPU buffer. Required for WebGPU; optional (WebGL2+) for WebGL. UBO rules: Only f32 and i32 based types are supported (no u32 ). Matrices are float only. Samplers/textures cannot go in a UBO. The UniformGroup name in resources must exactly match the UBO block name in the shader. Structure and order must exactly match the shader layout. UBO sync uses new Function under the hood. In strict CSP environments (no unsafe eval ), import pixi.js/unsafe eval once at startup to swap in the fallback sync path; without it, UBO backed shaders (and therefore WebGPU) will throw on first use. Custom filter Filter.from({ gl, resources }) is the shorthand. Pass only a fragment shader; PixiJS supplies a default vertex shader that handles output frame positioning. For a custom vertex shader, use new Filter({ glProgram: new GlProgram({ vertex, fragment }), resources }) . Filter shader conventions (GLSL ES 3.0) in vec2 vTextureCoord; instead of varying vec2 vTextureCoord; out vec4 finalColor; instead of gl FragColor texture(uTexture, uv) instead of texture2D(uTexture, uv) The default vertex shader exposes uInputSize , uOutputFrame , uOutputTexture and helpers filterVertexPosition() / filterTextureCoord() Sampling the render target behind the filter Set blendRequired: true and sample uBackTexture in the fragment shader. PixiJS copies the destination pixels into that uniform before running the filter: Only enable blendRequired when you need it; it forces an extra GPU copy every frame. Updating uniforms at runtime Uniform type reference See [references/uniform types.md](references/uniform types.md) for the complete table of supported types, their WGSL/GLSL equivalents, and value formats. Custom Batcher (extension based) The Batcher abstract class enables custom batching for specialized rendering. Subclass it and register via extensions: Elements reference the batcher by batcherName . The BatchableElement interface requires: batcherName , texture , blendMode , indexSize , attributeSize , topology , and packAsQuad . Common Mistakes [CRITICAL] Old Shader.from(vertex, fragment, uniforms) constructor Wrong: Correct: v8 requires an options object with gl / gpu programs and resources . The positional API was removed. [CRITICAL] UniformGroup without type annotation Wrong: Correct: Every uniform requires an explicit { value, type } pair. Omitting the type causes a runtime error: "Uniform type undefined is not supported." [HIGH] UBO with unsupported types or wrong structure UBO mode supports f32 and i32 based types (scalars and vectors). u32 is not in the supported UniformGroup type list and will throw. Matrices are float only ( mat <f32 ). Samplers cannot be placed in UBOs. The struct name and field order must exactly match the shader's UBO declaration. Mismatches produce garbled rendering with no error. [HIGH] Putting textures in UniformGroup Wrong: Correct: Textures are resources, not uniforms. Pass texture.source (TextureSource) and texture.source.style (TextureStyle) as top level resource entries. API Reference [Shader](https://pixijs.download/release/docs/rendering.Shader.html.md) [GlProgram](https://pixijs.download/release/docs/rendering.GlProgram.html.md) [GpuProgram](https://pixijs.download/release/docs/rendering.GpuProgram.html.md) [UniformGroup](https://pixijs.download/release/docs/rendering.UniformGroup.html.md) [Filter](https://pixijs.download/release/docs/filters.Filter.html.md) [Batcher](https://pixijs.download/release/docs/rendering.Batcher.html.md) [BatcherPipe](https://pixijs.download/release/docs/rendering.BatcherPipe.html.md)

pixijs-custom-rendering