skills.rest
encounterplus
encounterplusOFFICIAL
Explore all skills by this author →
WebsiteGitHub

pixijs-custom-rendering

Implement custom PixiJS shader rendering with GLSL and WGSL programs.

16|8|Updated May 20, 2020
Search Tags:#filters#shaders#webgpu#webgl2#pixi.js#ubo#uniformgroup
One-click install
npx skills add https://github.com/encounterplus/web-client --skill pixijs-custom-rendering-encounterplus
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-custom-rendering
Source: https://github.com/encounterplus/web-client/tree/main/.agents/skills/pixijs-custom-rendering
Command: npx skills add https://github.com/encounterplus/web-client --skill pixijs-custom-rendering-encounterplus

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill includes references (resource) components.

What problem does it solve?

This Skill helps you replace PixiJS’ default rendering with custom GLSL/WGSL shaders, typed uniform buffers, and advanced filter/batcher workflows, so you can implement bespoke visual effects reliably across WebGL and WebGPU.

Core Features & Use Cases

  • Custom Shader Programs (GLSL + WGSL): Create shader programs using Shader.from with gl and/or gpu sources, enabling the same material to target WebGL and WebGPU.
  • Typed UniformGroup Resources: Define uniforms with explicit value/type pairs, update them at runtime, and optionally pack them into UBOs for WebGPU compatibility and WebGL2+ efficiency.
  • Texture Resources & Filter Pipelines: Bind textures via Shader resources (texture.source and texture.source.style) and author custom fragment filters with Filter.from, including destination sampling using uBackTexture with blendRequired.
  • Custom Batching (Advanced Performance Control): Implement and register a custom Batcher extension to pack vertex/quad attributes for specialized rendering paths.
  • Strict-CSP Friendly UBO Sync: Use pixi.js/unsafe-eval fallback import to avoid failures in environments that block unsafe-eval when UBO-backed shaders are first used.

Quick Start

Use the pixijs-custom-rendering skill to create a Shader.from configuration with GLSL vertex/fragment and a UniformGroup containing typed uniforms, then attach the resulting Mesh to the stage and update uniform values on each tick.

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 GLSL shaders for PixiJS that support both WebGL and WebGPU?▼

To write custom PixiJS shaders for both pipelines, use Shader.from with gl and gpu sources to target WebGL and WebGPU. This allows a single material configuration to bind GLSL and WGSL programs to your scene objects.

How do I define and update typed uniforms in PixiJS for WebGPU compatibility?▼

Define typed UniformGroup resources with explicit value/type pairs to update uniforms at runtime. Pack them into UBOs to ensure WebGPU compatibility and achieve better efficiency in WebGL2+ environments.

Can I create custom fragment filters in PixiJS that sample the destination buffer?▼

Yes, you can author custom fragment filters using Filter.from. Bind textures via shader resources and sample the destination buffer using uBackTexture, which requires setting blendRequired in the filter configuration.

How do I bypass strict CSP unsafe-eval restrictions when using UBO-backed shaders in PixiJS?▼

To bypass strict CSP unsafe-eval restrictions, use the pixi.js/unsafe-eval fallback import. This prevents failures in environments that block unsafe-eval when UBO-backed shaders are first initialized.

How do I implement custom batching for specialized rendering paths in PixiJS?▼

Implement and register a custom Batcher extension to pack vertex and quad attributes. This provides advanced performance control for specialized rendering workflows beyond the default scene object rendering.

What GLSL version is required for custom PixiJS shader programs?▼

Custom PixiJS shader programs require GLSL ES 3.0 conventions for authoring vertex and fragment sources. This standard is necessary to properly bind programs and typed uniform definitions across the pipeline.

Related Skills

Explore More Software Engineering Skills→
alexkaferalexkafer

pixijs-custom-rendering

Compile and bind GLSL and WGSL shaders in PixiJS v8.

Community
Advanced
matthewharwoodmatthewharwood
1

pixijs-custom-rendering

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

Community
Advanced
HKUDSHKUDS
46.8k

cli-anything-renderdoc

Inspect RenderDoc GPU captures and export resources via command-line tools.

Official
Advanced
pixijspixijs
302

pixijs-custom-rendering

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

Official
Advanced