skills.rest
alexkafer
alexkaferCOMMUNITY
Explore all skills by this author →
WebsiteGitHub

pixijs-custom-rendering

Compile and bind GLSL and WGSL shaders in PixiJS v8.

Updated Mar 13, 2022
Search Tags:#wgsl#pixi.js#shader programming#ubo#uniformgroup#glsl es 3.0#custom filters
One-click install
npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-custom-rendering-alexkafer
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-custom-rendering
Source: https://github.com/alexkafer/alexkafer-web/tree/main/.agents/skills/pixijs-custom-rendering
Command: npx skills add https://github.com/alexkafer/alexkafer-web --skill pixijs-custom-rendering-alexkafer

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

It solves the challenge of writing and wiring custom GPU shader logic in PixiJS v8, including uniforms, resources, filters, and batching, in a way that works across both WebGL and WebGPU renderers.

Core Features & Use Cases

  • Dual-renderer Shader.from: Bind GLSL and WGSL programs to a scene object with a single shader definition that targets WebGL and/or WebGPU.
  • Typed UniformGroup + UBO support: Define strongly-typed uniforms (including float-only matrix handling in UBO mode) and update them safely at runtime.
  • Custom Filter.from with target sampling: Create fragment-only filters, follow GLSL ES 3.0 conventions (in/out, finalColor, texture()), and use uBackTexture with blendRequired when you need the render-target copy.
  • Custom Batcher via extensions: Extend PixiJS batching by implementing a Batcher subclass and registering it via extensions for specialized packing logic.

Quick Start

Create a Shader.from definition with gl vertex/fragment and gpu entry points, then attach typed UniformGroup resources and add the resulting Mesh to app.stage.

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 custom shaders in PixiJS v8 that support both WebGL and WebGPU?▼

To write custom shaders in PixiJS v8 for both renderers, use Shader.from with gl and gpu properties to bind GLSL and WGSL programs in a single definition. This allows dual-renderer support without writing separate shader logic.

How do I define and update uniforms for a PixiJS custom shader?▼

To define and update uniforms for a PixiJS custom shader, use a typed UniformGroup with precise uniform type declarations including both value and type. You can safely update these values at runtime, with optional UBO packing for WebGL2 and WebGPU.

Does PixiJS custom filter programming require GLSL ES 3.0 conventions?▼

PixiJS custom filter programming requires GLSL ES 3.0 conventions, including using in/out qualifiers, the finalColor output variable, and the texture() function for sampling. Fragment-only filters can also use uBackTexture with blendRequired pipelines.

How do I handle strict Content Security Policy when compiling WGSL or GLSL shaders in PixiJS?▼

To handle strict Content Security Policy when compiling shaders in PixiJS, import pixi.js/unsafe-eval to mitigate the unsafe-eval restriction. This allows GLSL and WGSL shader compilation to proceed in environments with strict CSP headers.

What is the best way to extend PixiJS batching for custom rendering logic?▼

The best way to extend PixiJS batching for custom rendering is to implement a Batcher subclass with specialized packing logic and register it via extensions. This allows customized batching workflows alongside existing WebGL and WebGPU pipelines.

Can I use texture resources as bindings in a PixiJS Shader.from definition?▼

You can include texture resources as bindings in a PixiJS Shader.from definition by adding them to the resources object alongside UniformGroups. Correct shader resource key matching is required to ensure textures bind properly across WebGL and WebGPU renderers.

Related Skills

Explore More Software Engineering Skills→
pixijspixijs
302

pixijs-custom-rendering

Configure PixiJS v8 shaders from GLSL and WGSL sources for WebGL and WebGPU.

Official
Advanced
encounterplusencounterplus
16

pixijs-custom-rendering

Implement custom PixiJS shader rendering with GLSL and WGSL programs.

Official
Advanced
matthewharwoodmatthewharwood
1

pixijs-custom-rendering

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

Community
Advanced
TeagesTeages

pixijs

Document PixiJS 2D rendering library concepts and usage.

Community
Advanced