pixijs-custom-rendering

Author cross-renderer PixiJS v8 shaders with GLSL and WGSL pipelines.

1|Updated Apr 26, 2026

Search Tags:#textures #glsl #wgsl #shader #pixijs #uniform #ubo

Ready to run

npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-custom-rendering-matthewharwood

💬 Prompt for ChatGPT / Claude Chat▼

Please help me install this Agent Skill.
Skill: pixijs-custom-rendering
Source: https://github.com/matthewharwood/dean-stack/tree/main/.claude/skills/pixijs-custom-rendering
Command: npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-custom-rendering-matthewharwood

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

Writing and wiring custom shaders, uniforms, filters, and batching in PixiJS v8 is verbose and error-prone; this skill provides a guided approach to bind GLSL and WGSL programs, coordinate typed uniforms, textures, and rendering pipelines across WebGL and WebGPU.

Core Features & Use Cases

Dual-renderer shader support (WebGL + WebGPU) via Shader.from({ gl, gpu, resources }).
Typed UniformGroups for f32, vec2, mat4x4, and support for Uniform Buffer Objects (UBO) in WebGPU.
Textures and resources as inputs; GLSL ES 3.0 conventions; Filter.from and custom Batcher via extensions.
Use cases include creating custom materials, post-processing filters, and bespoke render pipelines in PixiJS apps.

Quick Start

Instantiate a Shader.from with both GL and GPU sources, a UniformGroup of typed uniforms, and textures, then apply to a mesh.

Frequently Asked Questions about pixijs-custom-rendering

High-intent search queries and answers about installing and using this skill.

FAQPage Schema

How do I write cross-renderer shaders in PixiJS v8 for both WebGL and WebGPU?▼

PixiJS v8 cross-renderer shaders use Shader.from({ gl, gpu, resources }) to pass GLSL and WGSL program sources simultaneously, enabling a single pipeline to execute across WebGL and WebGPU.

What is the best way to manage typed uniforms and UBOs in a PixiJS WebGPU pipeline?▼

The best way to manage typed uniforms and UBOs in PixiJS is by using UniformGroup, which supports f32, vec2, and mat4x4 types and allows configuration of Uniform Buffer Objects for WebGPU rendering pipelines.

How do I create custom post-processing filters and apply textures in PixiJS?▼

Custom post-processing filters in PixiJS are created using Filter.from alongside texture resources and GLSL ES 3.0 conventions, allowing you to sample uBackTexture and bind inputs for bespoke rendering effects.

Does PixiJS v8 support writing custom Batcher extensions for bespoke render pipelines?▼

Yes, PixiJS v8 supports optional Batcher extensions, allowing developers to build bespoke render pipelines that integrate custom materials and specialized batching logic alongside custom shaders.

Why do my custom GLSL shaders break when switching from WebGL to WebGPU in PixiJS?▼

Custom GLSL shaders break during renderer switching because WebGL and WebGPU require different shader languages; PixiJS v8 solves this by requiring both GLSL and WGSL sources in GlProgram and GpuProgram definitions.