pixijs-custom-rendering
Master shader development for PixiJS v8 by writing custom GLSL and WGSL code with properly typed uniforms. This skill covers the shader pipeline, uniform management, and integration with PixiJS's rendering system to unlock advanced visual effects and performance optimization.
pixijs-custom-rendering teaches you to write GLSL and WGSL shaders for PixiJS v8 using the Shader.from API. You define vertex and fragment shaders with typed UniformGroup objects, then bind them to sprites, meshes, or filters. The skill covers shader syntax, uniform declarations (f32, vec4, mat4), and integration with PixiJS's GlProgram and GpuProgram backends for both WebGL2 and WebGPU rendering paths.
AI-generated summary based on this skill's SKILL.md
Decision gist · record as of 2026-06-04
pixijs-custom-rendering teaches you to write GLSL and WGSL shaders for PixiJS v8 using the Shader.from API. You define vertex and fragment shaders with typed UniformGroup objects, then bind them to sprites, meshes, or filters. The skill covers shader syntax, uniform declarations (f32, vec4, mat4), and integration with PixiJS's GlProgram and GpuProgram backends for both WebGL2 and WebGPU rendering paths.
Use it when
- pixijs-custom-rendering explains Filter.from as the primary method for creating custom filters with fragment shaders in PixiJS v8.
- pixijs-custom-rendering covers UBO management for both WebGL2 and WebGPU.
Verify before relying
Read SKILL.md below before installing (2 files). Open directory: indexed for reading, not audited.
Install
pixijs/pixijs-skills/pixijs-custom-rendering
Open directory. Skills are indexed for reading, not audited. Review a skill's body before installing it.
Frequently asked questions
AI-generated answers based on this skill's SKILL.md and metadata
How do I write GLSL shader pixi custom rendering code for v8?
pixijs-custom-rendering teaches you to write GLSL and WGSL shaders for PixiJS v8 using the Shader.from API. You define vertex and fragment shaders with typed UniformGroup objects, then bind them to sprites, meshes, or filters. The skill covers shader syntax, uniform declarations (f32, vec4, mat4), and integration with PixiJS's GlProgram and GpuProgram backends for both WebGL2 and WebGPU rendering paths.
What is the pixijs-custom-rendering approach to Filter.from?
pixijs-custom-rendering explains Filter.from as the primary method for creating custom filters with fragment shaders in PixiJS v8. You provide a fragment shader string and optional uniforms; the filter automatically handles the rendering pipeline, texture binding, and blend modes. This pattern simplifies custom visual effects without manually managing the full shader compilation and resource lifecycle.
How do I manage UBO (Uniform Buffer Objects) in pixijs-custom-rendering?
pixijs-custom-rendering covers UBO management for both WebGL2 and WebGPU. You create UniformGroup instances with typed uniform data, then pass them to Shader.from or Filter.from. The skill teaches how to structure uniforms (f32, vec4, matrices), update them at runtime, and let PixiJS handle the underlying buffer allocation and synchronization across rendering backends.
Can pixijs-custom-rendering help migrate shaders from v7 to v8?
Yes. pixijs-custom-rendering addresses shader migration from PixiJS v7 to v8, covering API changes in Shader.from, UniformGroup typing, and the unified GLSL/WGSL pipeline. The skill explains how v8's typed uniforms replace v7's looser patterns and how to adapt custom batchers and resource management to the new extension architecture.
How does pixijs-custom-rendering handle shader resources and textures?
pixijs-custom-rendering teaches resource binding via the resources flat map in Shader.from and Filter.from. You declare texture uniforms (samplers) in your shader, then provide them as resources. The skill covers texture-as-resource patterns, uBackTexture for filter input, and how PixiJS automatically manages texture slot allocation for both WebGL2 and WebGPU.
What custom batcher patterns does pixijs-custom-rendering cover?
pixijs-custom-rendering introduces custom batchers via the Batcher extension pattern in PixiJS v8. The skill explains how to extend Batcher for specialized rendering (e.g., custom geometry, instancing), integrate custom shaders, and hook into the rendering pipeline. This unlocks performance optimization for advanced use cases beyond standard sprite and mesh rendering.
SKILL.md
Rendered from the published skill. Quoted content, verbatim.
Custom shaders bind GLSL and WGSL programs to scene objects via Shader.from({ gl, gpu, resources }). Uniforms live in typed UniformGroups, textures are passed as separate resources, and the same shader can target both WebGL and WebGPU.
Quick Start
```ts const uniforms = new UniformGroup({ uTime: { value: 0, type: "f32" }, });
const shader = Shader.from({ gl: { vertex: vertexSrc, fragment: fragmentSrc }, resources: { uniforms }, });
const geometry = new MeshGeometry({ positions: new Float32Array([0, 0, 100,
(truncated - see the full file via the links below)
File tree — 2 files
skills/pixijs-custom-rendering/SKILL.md
skills/pixijs-custom-rendering/references/uniform-types.md
Let your AI agent find skills like this
Example. Real query, live index.
You found this page by searching. An agent finds it by wishing: SkillFed indexes 56,283 agent skills by what they can do, searchable in plain language.
wish › “Write custom GLSL/WGSL shaders for PixiJS v8 with typed uniforms”
Give your agent the search over MCP, or paste the wish link into any chat. No install? Search from any chat →
Related skills
This skill teaches you how to leverage PixiJS v8's powerful filter system to enhance your 2D graphics with visual effects. You'll learn to apply filters to display objects, chain multiple effects together, and optimize performance when working with complex rendering scenarios. Master both built-in filters and custom implementations to bring professional polish to your WebGL and Canvas-based applications.
This skill guides developers through upgrading PixiJS projects from version 7 to version 8, covering all breaking changes and API shifts. It provides a structured migration checklist and explains modern patterns for the fast WebGL-based 2D rendering engine. Perfect for teams maintaining graphics-heavy web applications.
webgl-card-effects brings hardware-accelerated graphics to your React card components through WebGL rendering. Build fluid, visually rich interactions without sacrificing performance, leveraging the GPU to handle complex animations and effects that would otherwise strain the CPU. Perfect for creating polished, modern card-based interfaces.
Webgl enables developers to harness GPU-accelerated graphics rendering within web browsers, unlocking the ability to create immersive 3D scenes and real-time visualizations. This skill covers the fundamentals of WebGL programming, from shader development to geometry manipulation, empowering you to build performant graphics applications that run natively in modern browsers.
Shader-programming teaches the core concepts behind GPU-accelerated graphics that transfer across different game engines and platforms. You'll explore vertex and fragment shaders, lighting models, and visual effects while building a foundation that applies whether you're working in Unity, Unreal, or Godot. Gain hands-on experience writing portable shader code that maximizes your creative control over rendering.
PixiJS is a high-performance 2D rendering engine built for the web. This skill collection guides agents through core PixiJS v8 concepts—from application initialization and scene management to advanced rendering techniques, custom shaders, and optimization strategies. Whether building interactive graphics or migrating from earlier versions, these skills provide structured pathways to solve rendering challenges efficiently.
More skills shader-fundamentals (MIT) · pixijs-2d (MIT) · r3f-materials (MIT) · R3f Shaders (unlicensed) · pixijs-environments (MIT) · Threejs Shaders (AGPL-3.0) · godot-shaders (Apache-2.0)