Pixijs Custom Rendering
Look up PixiJS v8 UniformGroup type strings and the JavaScript values to pass when wiring custom shaders and GPU uniforms.
Overview
PixiJS Custom Rendering is an agent skill for the Build phase that documents PixiJS v8 UniformGroup uniform types with WGSL/GLSL equivalents and correct JavaScript value shapes.
Install
npx skills add https://github.com/pixijs/pixijs-skills --skill pixijs-custom-renderingWhat is this skill?
- Maps every supported PixiJS v8 uniform type to WGSL and GLSL equivalents
- Documents JS payloads: numbers, Float32Array, Int32Array, and matrix layouts per type
- Covers scalars (f32, i32), vectors (vec2–vec4 f32/i32), and matrix variants (mat2x2 through mat4x2)
- Intended for UniformGroup definitions via each uniform’s type field
Adoption & trust: 1.3k installs on skills.sh; 206 GitHub stars; 3/3 security scanners passed (skills.sh audits).
What problem does it solve?
You are implementing custom PixiJS rendering but keep guessing uniform type strings and array sizes for GPU buffers.
Who is it for?
Indie game or visualization devs adding custom filters, particles, or shader passes on PixiJS v8 with Claude Code or Cursor.
Skip if: Teams only using stock PixiJS sprites and containers with no custom shaders or UniformGroup usage.
When should I use this skill?
When implementing PixiJS v8 custom rendering with UniformGroup and you need correct uniform type strings and JS value formats.
What do I get? / Deliverables
You assign valid type fields and pass correctly dimensioned numeric or typed-array values into UniformGroup without shader uniform mismatches.
- Correct UniformGroup uniform definitions
- Matching CPU-side uniform value objects or typed arrays
Recommended Skills
Journey fit
Custom WebGL/WebGPU rendering and uniform wiring happen while you implement the interactive canvas or game client. Uniform types map directly to frontend rendering code beside sprites, filters, and custom pipelines—not backend or launch work.
How it compares
Use as a typed uniform cheat sheet—not a full PixiJS scene graph or asset-loading tutorial.
Common Questions / FAQ
Who is pixijs-custom-rendering for?
Solo builders and small teams writing PixiJS v8 custom render paths who need fast, accurate uniform typing at the keyboard.
When should I use pixijs-custom-rendering?
During Build frontend work when defining UniformGroup uniforms, porting GLSL/WGSL snippets, or debugging wrong matrix/vector uploads to the GPU.
Is pixijs-custom-rendering safe to install?
It is reference documentation with no runtime hooks; review the Security Audits panel on this Prism page before installing any skill from the marketplace.
SKILL.md
READMESKILL.md - Pixijs Custom Rendering
# Uniform Types Reference All supported PixiJS v8 uniform types for use with `UniformGroup`. These type strings are passed in the `type` field of each uniform definition. ## Type Table | PixiJS type | WGSL equivalent | GLSL equivalent | JS value | | ------------- | --------------- | --------------- | ----------------------------- | | `f32` | `f32` | `float` | `number` | | `i32` | `i32` | `int` | `number` | | `vec2<f32>` | `vec2<f32>` | `vec2` | `Float32Array(2)` or `[x, y]` | | `vec3<f32>` | `vec3<f32>` | `vec3` | `Float32Array(3)` | | `vec4<f32>` | `vec4<f32>` | `vec4` | `Float32Array(4)` | | `vec2<i32>` | `vec2<i32>` | `ivec2` | `Int32Array(2)` | | `vec3<i32>` | `vec3<i32>` | `ivec3` | `Int32Array(3)` | | `vec4<i32>` | `vec4<i32>` | `ivec4` | `Int32Array(4)` | | `mat2x2<f32>` | `mat2x2<f32>` | `mat2` | `Float32Array(4)` | | `mat3x3<f32>` | `mat3x3<f32>` | `mat3` | `Float32Array(9)` or `Matrix` | | `mat4x4<f32>` | `mat4x4<f32>` | `mat4` | `Float32Array(16)` | | `mat3x2<f32>` | `mat3x2<f32>` | `mat3x2` | `Float32Array(6)` | | `mat4x2<f32>` | `mat4x2<f32>` | `mat4x2` | `Float32Array(8)` | | `mat2x3<f32>` | `mat2x3<f32>` | `mat2x3` | `Float32Array(6)` | | `mat4x3<f32>` | `mat4x3<f32>` | `mat4x3` | `Float32Array(12)` | | `mat2x4<f32>` | `mat2x4<f32>` | `mat2x4` | `Float32Array(8)` | | `mat3x4<f32>` | `mat3x4<f32>` | `mat3x4` | `Float32Array(12)` | ## Array Uniforms For arrays of a type, use the `size` property instead of array syntax in the type: ```ts import { UniformGroup } from "pixi.js"; // Array of 10 vec4 values const uniforms = new UniformGroup({ uColors: { value: new Float32Array(40), type: "vec4<f32>", size: 10 }, }); ``` Using `array<vec4<f32>, 10>` in the type field will throw an error directing you to use the `size` property instead. ## Usage Examples ### Scalars ```ts import { UniformGroup } from "pixi.js"; const uniforms = new UniformGroup({ uTime: { value: 0, type: "f32" }, uIndex: { value: 0, type: "i32" }, }); uniforms.uniforms.uTime = 1.5; uniforms.uniforms.uIndex = 3; ``` ### Vectors ```ts import { UniformGroup } from "pixi.js"; const uniforms = new UniformGroup({ uPosition: { value: new Float32Array([100, 200]), type: "vec2<f32>" }, uDirection: { value: new Float32Array([0, 1, 0]), type: "vec3<f32>" }, uColor: { value: new Float32Array([1, 0, 0, 1]), type: "vec4<f32>" }, uGridSize: { value: new Int32Array([16, 16]), type: "vec2<i32>" }, }); ``` ### Matrices ```ts import { UniformGroup, Matrix } from "pixi.js"; const uniforms = new UniformGroup({ uTransform: { value: new Matrix(), type: "mat3x3<f32>" }, uProjection: { value: new Float32Array(16), type: "mat4x4<f32>" }, uRotation: { value: new Float32Array(4), type: "mat2x2<f32>" }, }); ``` PixiJS `Matrix` (2D affine transform) maps to `mat3x3<f32>`. For 3D projection matrices, use a raw `Float32Array(16)` with `mat4x4<f32>`. ## UBO Constraints When using `{ ubo: true }` on a UniformGroup: - `f32` and `i32` based types are supported (scalars and vectors) - Matrices are float-only (`mat*<f32>`) - `u32` is not in the supported `UniformGroup` type list - Samplers and textures cannot be placed in UBOs - Field names and order must exactly match the shader's uniform block declaration - The resource key in the shader must match the UBO block name --- name: pixijs-custom-rendering description: "Use this skill when writing custom shaders, uniforms, filters, or batchers in PixiJS v8. Covers Shader.from({gl, gpu, resources}), GlProgram/GpuProgram, UniformGroup with typed uniforms (f32