{"enrichment":{"faq":[{"a":"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.","q":"How do I write GLSL shader pixi custom rendering code for v8?"},{"a":"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.","q":"What is the pixijs-custom-rendering approach to Filter.from?"},{"a":"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.","q":"How do I manage UBO (Uniform Buffer Objects) in pixijs-custom-rendering?"},{"a":"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.","q":"Can pixijs-custom-rendering help migrate shaders from v7 to v8?"},{"a":"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.","q":"How does pixijs-custom-rendering handle shader resources and textures?"},{"a":"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.","q":"What custom batcher patterns does pixijs-custom-rendering cover?"}],"shadow_tags":["gpu-programming","shader-compilation","uniform-management","cross-renderer","buffer-optimization","fragment-effects","vertex-transformation","texture-sampling","batch-rendering","graphics-api"],"summary_rewrite":"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."},"files":[{"bytes":11233,"path":"skills/pixijs-custom-rendering/SKILL.md","sha256":"ce14bf443118d2b705118d4fa5ac6896c1c657e167acda3588d9b3d134d7a4f3","url":"https://skillfed.io/files/pixijs/pixijs-skills/pixijs-custom-rendering/c6e069de/SKILL.md"}],"id":"pixijs/pixijs-skills/pixijs-custom-rendering","links":{"html":"https://skillfed.io/pixijs/pixijs-skills/pixijs-custom-rendering","md":"https://skillfed.io/pixijs/pixijs-skills/pixijs-custom-rendering.md","repo":"https://github.com/pixijs/pixijs-skills"},"meta":{"agents_supported":[],"first_seen":"2026-07-28","forks":16,"language":null,"last_updated":"2026-06-04","license":"MIT","name":"pixijs-custom-rendering","publisher":"pixijs","stars":293},"relations":{"similar":[{"id":"pixijs/pixijs-skills/pixijs-filters"},{"id":"pixijs/pixijs-skills/pixijs-migration-v8"},{"id":"pixijs/pixijs-skills/pixijs"},{"id":"Bbeierle12/Skill-MCP-Claude/shader-fundamentals"},{"id":"freshtechbro/claudedesignskills/pixijs-2d"},{"id":"Bbeierle12/Skill-MCP-Claude/r3f-materials"},{"id":"EnzeD/r3f-skills/r3f-shaders"},{"id":"calesthio/OpenMontage/threejs-shaders"},{"id":"CloudAI-X/threejs-skills/threejs-shaders"},{"id":"gamedev-skills/awesome-gamedev-agent-skills/godot-shaders"}]},"slug":{"owner":"pixijs","repo":"pixijs-skills","skill":"pixijs-custom-rendering"},"version":"c6e069de"}