pixijs-custom-rendering

This skill covers writing custom shaders, uniforms, filters, and batchers in PixiJS v8. Custom shaders bind GLSL and WGSL programs to scene objects via Shader.from({ gl, gpu, resources }), with uniforms held in typed UniformGroups, textures passed as separate resources, and a single shader able to target both WebGL and WebGPU. It triggers on terms including Shader, GlProgram, GpuProgram, UniformGroup, Batcher, Filter.from, GLSL, WGSL, UBO, finalColor, uBackTexture, blendRequired, and unsafe-eval. A typical quick start pairs a UniformGroup (for example a uTime f32 uniform) with a MeshGeometry and a Mesh, updating the uniform each frame through shader.resources.uniforms.uniforms.

For dual-renderer shaders, providing gl alone targets WebGL only, gpu alone targets WebGPU only, and the compatibleRenderers bitmask is set automatically; WGSL entry-point names are arbitrary but must match the @vertex and @fragment function names. GlProgram does not auto-inject #version 300 es: if you write it yourself PixiJS preserves it and treats the source as GLSL ES 3.0, otherwise it injects WebGL1 compatibility macros. GlProgram always injects a default precision (highp vertex, mediump fragment) and the program name. GLSL ES 3.0 conventions use in/out instead of attribute/varying, texture() instead of texture2D(), and an out vec4 instead of gl_FragColor. Textures are resources rather than uniforms, with the texture's source and style passed separately under keys that match the shader binding names, and resources may also be plain objects that are auto-wrapped into UniformGroups.

UBO mode packs uniforms into a single GPU buffer (required for WebGPU, optional on WebGL2+) and supports only f32 and i32 based types with no samplers, requires an exact name and layout match with the shader, and uses new Function internally, so strict-CSP environments must import pixi.js/unsafe-eval once at startup or UBO-backed shaders will throw. Custom filters use Filter.from({ gl, resources }) as shorthand, taking only a fragment shader while PixiJS supplies a default vertex shader exposing uInputSize, uOutputFrame, uOutputTexture and the filterVertexPosition/filterTextureCoord helpers; a custom vertex shader requires the full Filter constructor with a GlProgram. Sampling the render target behind a filter requires blendRequired: true and reading uBackTexture, which forces an extra GPU copy each frame and should be enabled only when needed. The skill also introduces extending the abstract Batcher class and registering it via extensions for specialized batching, and points to references/uniform-types.md for the complete supported-type table.