skills.rest
matthewharwood
matthewharwoodCOMMUNITY
Explore all skills by this author →
GitHub

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
One-click install
npx skills add https://github.com/matthewharwood/dean-stack --skill pixijs-custom-rendering-matthewharwood
Or copy as Structured Prompt for Agent▼
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.

Related Skills

Explore More Software Engineering Skills→
encounterplusencounterplus
16

pixijs-scene-mesh

Construct PixiJS v8 MeshGeometry meshes with positions, UVs, indices, and topology.

Official
Intermediate
pixijspixijs
302

pixijs-filters

Apply PixiJS v8 visual filters to containers and sprites.

Official
Advanced
encounterplusencounterplus
16

pixijs-custom-rendering

Implement custom PixiJS shader rendering with GLSL and WGSL programs.

Official
Advanced
TeagesTeages

pixijs

Document PixiJS 2D rendering library concepts and usage.

Community
Advanced