skills.rest
pixijs
pixijsOFFICIAL
Explore all skills by this author →
Website𝕏@PixiJSGitHub

pixijs-custom-rendering

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

302|15|Updated Apr 1, 2026
Search Tags:#glsl#webgl#webgpu#wgsl#shader#pixijs#custom-rendering
One-click install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-custom-rendering
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: pixijs-custom-rendering
Source: https://github.com/pixijs/pixijs-skills/tree/main/skills/pixijs-custom-rendering
Command: npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-custom-rendering

SYSTEM DOCUMENTATION & REQUIREMENTS

What problem does it solve?

Pixel-perfect, cross-renderer shader workflows for PixiJS v8, enabling developers to author, configure, and re-use custom shaders, uniforms, filters, and batchers that run on WebGL and WebGPU with typed UniformGroups and resource-based textures.

Core Features & Use Cases

  • Cross-renderer shader creation using Shader.from({ gl, gpu, resources }) that work with both WebGL and WebGPU.
  • Typed uniforms via UniformGroup (f32, vec2, mat4x4) and textures passed as separate resources.
  • Support for GLSL ES 3.0 conventions, WGSL, UBO mode, custom Filter via Filter.from, and Custom Batcher extensions for advanced rendering.
  • Use cases include writing color-manipulation shaders, post-process filters, and custom mesh rendering pipelines with reusable shader logic.

Quick Start

Create a simple animated shader by defining a UniformGroup with a time uniform, then build a Shader.from call with GLSL sources and apply it 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 create a custom shader in PixiJS that works with both WebGL and WebGPU?▼

Cross-renderer shaders in PixiJS v8 are created using Shader.from with separate gl and gpu source properties, allowing a single configuration to target both WebGL and WebGPU pipelines.

How do I pass uniforms and textures to a PixiJS v8 shader?▼

Uniforms are passed using typed UniformGroup objects containing f32, vec2, or mat4x4 values, while textures are provided as separate resources within the shader configuration object.

Does PixiJS v8 support GLSL ES 3.0 and WGSL for custom rendering?▼

PixiJS v8 supports GLSL ES 3.0 conventions for WebGL workflows and WGSL for WebGPU workflows, enabling developers to author native shader code for both renderer backends.

What is the best way to write post-process filters and custom batchers in PixiJS v8?▼

Custom filters are defined using Filter.from and batcher extensions are configured to create advanced rendering pipelines, supporting reusable shader logic for color manipulation and mesh rendering.

Why do I need pixi.js/unsafe-eval for custom shaders in PixiJS?▼

The pixi.js/unsafe-eval module enforces safe Content Security Policy usage by managing shader compilation, ensuring that custom GLSL or WGSL sources are evaluated securely at runtime.

Related Skills

Explore More Software Engineering Skills→
alexkaferalexkafer

pixijs-custom-rendering

Compile and bind GLSL and WGSL shaders in PixiJS v8.

Community
Advanced
fanguyunfanguyun

threejs-shaders

Creates custom ShaderMaterials and RawShaderMaterials for Three.js 3D scenes using GLSL.

Community
Advanced
matthewharwoodmatthewharwood
1

pixijs-custom-rendering

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

Community
Advanced
adamhjkadamhjk
2

pixijs-custom-rendering

Create custom shaders and filters for PixiJS v8 with WebGL and WebGPU.

Community
Intermediate