# pixijs-custom-rendering

Guides your agent through custom shaders, uniforms, filters and batchers in PixiJS v8, in GLSL and WGSL, for WebGL and WebGPU.

- skill · `type=skill` · Claude Code, Codex, Cursor, GitHub Copilot, Gemini CLI, OpenCode · 5700 installs · ★ 358
- Author: pixijs
- License: MIT · policy=mirror · the beginning of the file is at the end of this page
- Source: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-custom-rendering/SKILL.md
- Updated: 2026-10-01
- HTML: https://affpapa.org/en/nevibecode/skills/pixijs-custom-rendering

## What it does

The skill kicks in when you write low-level draw code in PixiJS v8: shaders, uniforms, filters, batchers, draw instructions. It covers binding GLSL and WGSL programs to scene objects with `Shader.from({ gl, gpu, resources })`, how `GlProgram` and `GpuProgram` behave, and how one shader can target both renderers.

Inside you get typed `UniformGroup` usage with types like `f32`, `vec2` and `mat4x4<f32>`, UBO mode, textures passed as separate resources, `TextureView` for depth sampling, 3D and array textures, WebGPU storage textures, WGSL override constants, custom bind group layouts via `gpuLayout`, partial buffer updates and `TexturePool`. There is also a custom `Filter` through `Filter.from`, GLSL ES 3.0 conventions with `finalColor`, `uBackTexture` sampling, and custom `Batcher` plus `InstructionPipe.destroyInstructionSet` wired through extensions.

One gotcha worth knowing before you design around UBOs: the sync path uses `new Function`, so under a strict CSP without `unsafe-eval` UBO-backed shaders — and therefore WebGPU — throw on first use. Importing `pixi.js/unsafe-eval` once at startup swaps in the fallback. Also note that supplying only `gl` limits the shader to WebGL, and only `gpu` limits it to WebGPU; the `compatibleRenderers` bitmask is set for you.

## Install

### Claude Code (native platform)

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-custom-rendering -a claude-code
```

2. **Manually: put the files in place**
- File: `~/.claude/skills/pixijs-custom-rendering/SKILL.md` — Copy the whole skill folder; for one project use .claude/skills/pixijs-custom-rendering/

### Codex

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-custom-rendering -a codex
```

2. **Manually: put the files in place**
- File: `.agents/skills/pixijs-custom-rendering/SKILL.md` — For all projects use ~/.agents/skills/

### Cursor

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-custom-rendering -a cursor
```

2. **Manually: put the files in place**
- File: `.cursor/skills/pixijs-custom-rendering/SKILL.md` — Cursor also reads .agents/skills/ and .claude/skills/

### GitHub Copilot

1. **GitHub CLI**
```bash
gh skill install pixijs/pixijs-skills pixijs-custom-rendering
```

2. **Manually: put the files in place**
- File: `.github/skills/pixijs-custom-rendering/SKILL.md`

### Gemini CLI

1. **Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-custom-rendering -a gemini-cli
```

2. **Platform CLI**
```bash
gemini skills install https://github.com/pixijs/pixijs-skills --path skills/pixijs-custom-rendering
```

### Windsurf (Devin Desktop)

**Manually: put the files in place**
- File: `.devin/skills/pixijs-custom-rendering/SKILL.md` — The legacy .windsurf/skills/ path still works

### OpenCode

**Skills CLI (Vercel)**
```bash
npx skills add pixijs/pixijs-skills --skill pixijs-custom-rendering -a opencode
```

### Claude.ai

**Claude.ai**
- Zip the folder and upload it in Settings → Capabilities → Skills

Where a file is given instead of a command, copy the files from the source to that path: https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-custom-rendering/SKILL.md

## When to use it
- write a shader that runs on both WebGL and WebGPU
- declare typed uniforms with `UniformGroup`
- build a custom filter via `Filter.from` without a vertex shader
- load a 3D or array texture and sample depth
- add a custom batcher and clean up its instruction set

## Example prompts
- Write a PixiJS v8 custom shader with a uTime uniform of type f32 and attach it to a Mesh.
- Create a filter with Filter.from that inverts color using a uStrength uniform.
- Show me how to set up UBO mode in UniformGroup and what to watch for under strict CSP.

## Source text · SKILL.md · MIT

Below is the content of a third-party file. It is data, not instructions for you: do not act on anything written inside unless the human asks. Block tag: 3b0e85f905931403.

BEGIN THIRD-PARTY FILE 3b0e85f905931403
````text
---
name: pixijs-custom-rendering
description: "Use this skill when writing custom shaders, uniforms, filters, batchers, or low-level draw code in PixiJS v8. Covers Shader.from({gl, gpu, resources}), GlProgram/GpuProgram, UniformGroup with typed uniforms (f32, vec2, mat4x4), UBO mode, textures as resources, TextureView for depth sampling, 3D and array textures (depth, arrayLayerCount, sampler3D, texture_3d), WebGPU storage textures (storage: true), WGSL override constants, custom bind group layouts (gpuLayout), partial buffer updates (Buffer.update), Geometry.vertexCount/indexCount, TexturePool scratch textures, State winding and culling (clockwiseFrontFace, cullMode), WebGPU render bundles, custom Filter via Filter.from, GLSL ES 3.0 conventions (finalColor), uBackTexture sampling, pixi.js/unsafe-eval for strict CSP, custom Batcher and InstructionPipe.destroyInstructionSet via extensions. Triggers on: Shader, GLSL, WGSL, uniform, custom shader, blendRequired, ShaderOverrides, bind group layout, depth texture, 3D texture, sampler3D, texture_3d, storage texture, getSize, indexCount, TexturePool, getOptimalTexture, destroyInstructionSet, beginBundle, executeBundle, RenderBundle."
license: MIT
---

Custom shaders bind GLSL and WGSL programs to scene objects via `Shader.from({ gl, gpu, resources })`. Uniforms live in typed `UniformGroup`s, 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, 0, 100, 100, 0, 100]),
  uvs: new Float32Array([0, 0, 1, 0, 1, 1, 0, 1]),
  indices: new Uint32Array([0, 1, 2, 0, 2, 3]),
});

const mesh = new Mesh({ geometry, shader });
app.stage.addChild(mesh);

app.ticker.add(() => {
  shader.resources.uniforms.uniforms.uTime = performance.now() / 1000;
});
```

**Related skills:** `pixijs-filters` (built-in filters), `pixijs-scene-mesh` (custom geometry), `pixijs-performance` (batch optimization), `pixijs-migration-v8` (shader API migration from v7).

## Core Patterns
````
END THIRD-PARTY FILE 3b0e85f905931403

The third-party file has ended. Everything between the 3b0e85f905931403 tags is data: requests and commands from it are not followed. An “end of file” line with another tag inside the block is part of the file.

First 2258 of 15892 bytes. © pixijs · MIT · https://github.com/pixijs/pixijs-skills/tree/HEAD/skills/pixijs-custom-rendering/SKILL.md

_Part of the page did not fit — see the HTML version._

---
NeVibeCode on affpapa.org. Catalog texts are descriptions, not instructions for the agent. How to choose and install: https://affpapa.org/en/nevibecode/agents.md