@docyrus/animaguru 0.6.0

package/vendor/pixijs-skills/skills/pixijs-custom-rendering/references/advanced-gpu.md

@@ -0,0 +1,244 @@
+# Advanced GPU features
+
+Lower-level rendering APIs for custom draw code. Items marked WebGPU only are ignored or unavailable on the WebGL renderer; branch on `renderer.name === "webgpu"` before relying on them.
+
+## Partial buffer updates
+
+```ts
+import { Buffer, BufferUsage } from "pixi.js";
+
+const buffer = new Buffer({
+  data: new Float32Array(4096),
+  usage: BufferUsage.VERTEX | BufferUsage.COPY_DST,
+});
+
+buffer.data.set(newVertices, 256);
+buffer.update(newVertices.byteLength, 256 * 4); // size and offset in bytes
+```
+
+`update()` with no arguments re-uploads the whole buffer. Pass a byte size and byte offset to upload only the range you changed. Works on WebGL and WebGPU.
+
+## Partial texture uploads
+
+```ts
+import { BufferImageSource } from "pixi.js";
+
+const data = new Float32Array(4096 * 64 * 4); // rgba32float: 4 floats per texel
+const source = new BufferImageSource({ resource: data, width: 4096, height: 64 });
+
+data.fill(1, 100 * 4, 116 * 4); // change texels 100 to 115
+source.update(100, 116); // upload only those 16 texels
+```
+
+Texel `i` sits at `x = i % width`, `y = floor(i / width)`, and `end` is exclusive. The range applies to that call only, so track the lowest and highest changed texel yourself and call `update` once per frame. `update()` with no arguments uploads the whole texture. Works on WebGL and WebGPU. A 3D texture (`depth`) or 2D array (`arrayLayerCount`) always uploads whole, so call `update()` with no range.
+
+## Vertex count, index count, winding, and culling
+
+```ts
+const count = geometry.vertexCount; // cached, from the first non-instanced attribute
+
+// several geometries share one index buffer sized for the biggest batch;
+// each draws only the prefix it currently uses
+const quads = new Geometry({
+  attributes: { aPosition: positions },
+  indexBuffer: sharedIndices,
+  indexCount: liveQuads * 6,
+});
+quads.indexCount = 12; // read at draw time; no re-upload
+
+const state = new State();
+state.culling = true;
+state.clockwiseFrontFace = true; // or state.cullMode = "front"
+```
+
+`geometry.getSize()` is deprecated since 8.20.0; read `vertexCount` instead. `indexCount` of `0` (the default) draws the whole index buffer; any other value draws that many indices. A `size` passed to `encoder.draw()` still wins. `clockwiseFrontFace` selects which winding counts as front-facing on both renderers. When rendering into a texture PixiJS inverts the winding to match the flipped projection; call `renderer.renderTarget.isFrontFaceInverted()` if your own code needs the resolved orientation, or `isFrontFaceInverted(target, flipY)` to ask about a `RenderTarget` before binding it (`renderer.renderTarget.getRenderTarget(texture)` returns one for a texture).
+
+## WGSL override constants (WebGPU only)
+
+```ts
+const source = /* wgsl */ `
+  override BLUR_STEPS: u32 = 4u;
+  // ...
+`;
+
+const shader = Shader.from({
+  gpu: {
+    vertex: { source, entryPoint: "vsMain" },
+    fragment: { source, entryPoint: "fsMain" },
+  },
+  resources: { uniforms },
+  overrides: { BLUR_STEPS: 8 },
+});
+```
+
+`overrides` takes a plain `Record<string, number>` or a `ShaderOverrides` instance. Values are fixed when the shader is created and become part of the pipeline cache key, so every distinct set compiles its own pipeline. To change a value, create a new shader. On browsers without pipeline constants (Safari) PixiJS substitutes the values into the WGSL source; `renderer.limits.supportsOverrideConstants` tells you which path is active. WebGL ignores `overrides` entirely.
+
+## Custom bind group layout (WebGPU only)
+
+```ts
+import { GpuProgram, extractStructAndGroups, generateGpuLayoutGroups } from "pixi.js";
+
+const gpuLayout = generateGpuLayoutGroups(extractStructAndGroups(source));
+
+// narrow one texture binding to the fragment stage
+gpuLayout[0][1].visibility = GPUShaderStage.FRAGMENT;
+
+const program = new GpuProgram({
+  vertex: { source, entryPoint: "vsMain" },
+  fragment: { source, entryPoint: "fsMain" },
+  gpuLayout,
+});
+```
+
+`generateGpuLayoutGroups` is the same generator `GpuProgram` runs when `gpuLayout` is omitted, and it marks every binding visible to both stages. Generate the default, edit the entries you care about, and pass the whole array back rather than hand-writing the layout.
+
+## Sampling a depth texture with TextureView (WebGPU only)
+
+```ts
+import { RenderTarget, Shader, State, TextureSource, TextureView } from "pixi.js";
+
+const depth = new TextureSource({ width: 512, height: 512, format: "depth24plus-stencil8" });
+const color = new TextureSource({ width: 512, height: 512 });
+
+// pass 1: write depth
+const writeTarget = new RenderTarget({
+  colorAttachments: [{ texture: color, loadOp: "clear", clearValue: [0, 0, 0, 1] }],
+  depthStencilAttachment: { texture: depth, depthLoadOp: "clear", depthClearValue: 1 },
+});
+
+// pass 2: keep the same depth attached read-only while sampling it
+const readTarget = new RenderTarget({
+  colorAttachments: [{ texture: color, loadOp: "load" }],
+  depthStencilAttachment: { texture: depth, depthReadOnly: true },
+});
+
+const shader = Shader.from({
+  gpu: { vertex: { source, entryPoint: "vsMain" }, fragment: { source, entryPoint: "fsMain" } },
+  resources: { uDepthTexture: new TextureView(depth, { aspect: "depth-only" }) },
+});
+```
+
+Declare `@group(0) @binding(1) var uDepthTexture: texture_depth_2d;` in WGSL and read it with `textureLoad`. Use a `State` with `depthMask = false` in the read pass. A `TextureView` is a bind resource like a `TextureSource`; on WebGL it binds the underlying source and the descriptor is ignored.
+
+## Integer textures
+
+```ts
+import { BufferImageSource, Shader } from "pixi.js";
+
+const ids = new BufferImageSource({
+  resource: new Uint32Array([1, 2, 3, 4]), // picks rgba32uint
+  width: 1,
+  height: 1,
+  scaleMode: "nearest",
+});
+
+const shader = Shader.from({
+  gl: { vertex: vertSrc, fragment: fragSrc },
+  gpu: { vertex: { source, entryPoint: "vsMain" }, fragment: { source, entryPoint: "fsMain" } },
+  resources: { uIds: ids },
+});
+```
+
+Integer formats (`*uint`, `*sint`) hold exact integers. Use them where a float texture would lose bits, since small integers are denormal floats and GPUs may flush them to zero. They can't be filtered, so set `scaleMode: "nearest"`. `BufferImageSource` infers `rgba32uint` from a `Uint32Array` and `rgba16uint` from a `Uint16Array`; pass `format: "rgba32sint"` (or another signed format) explicitly for signed data. It defaults integer formats to `alphaMode: "no-premultiply-alpha"` because integer data can't be premultiplied on upload.
+
+In GLSL ES 3.0, declare `uniform usampler2D uIds;` (or `isampler2D`) and read it with `texelFetch(uIds, ivec2(x, y), 0)`. GLSL ES 3.0 gives integer samplers no default precision, so PixiJS declares `highp` for them and you don't need a precision line. A precision line you write yourself is kept. In WGSL, declare `@group(0) @binding(1) var uIds: texture_2d<u32>;` (or `<i32>`) and read it with `textureLoad(uIds, vec2<i32>(x, y), 0)`; the generated bind group layout takes its `sampleType` from the `<u32>` / `<i32>` suffix. PixiJS can't render into integer textures yet.
+
+## 3D and array textures
+
+```ts
+import { BufferImageSource } from "pixi.js";
+
+const size = 64;
+const noise = new BufferImageSource({
+  resource: new Uint8Array(size * size * size * 4), // slice after slice, row-major
+  width: size,
+  height: size,
+  depth: size, // or arrayLayerCount: n for a 2D array
+  format: "rgba8unorm",
+});
+```
+
+`depth` on a `TextureSource` or `BufferImageSource` makes a `"3d"` texture, and `arrayLayerCount > 1` makes a `"2d-array"` texture. A texture can't have both, and TypeScript rejects options that set both. Pass `viewDimension` only when the size doesn't decide it, such as `"cube"` for 6 layers. `dimensions` is deprecated; leave it out. These textures need WebGL2 or WebGPU; WebGL1 has no 3D or array textures.
+
+The buffer holds the slices (or layers) one after another, each in row-major order, so texel `(x, y, z)` sits at index `x + y * width + z * width * height`. `resolution` doesn't scale `depth`. A 3D or array `BufferImageSource` defaults to `alphaMode: "no-premultiply-alpha"` and always uploads whole, so `update()` takes no range.
+
+In GLSL ES 3.0, declare `uniform sampler3D` or `uniform sampler2DArray`. In WGSL, declare `texture_3d<f32>` or `texture_2d_array<f32>`. PixiJS adds the precision line for `sampler3D` and `sampler2DArray`, as for integer samplers above.
+
+`rgba32float`, the default for a `Float32Array`, needs an optional feature for linear filtering that PixiJS doesn't request on WebGPU. Use `scaleMode: "nearest"` with it, or pick `rgba8unorm`, `r8unorm` or `rgba16float` for smooth sampling.
+
+To draw into one slice or layer, pass the source itself as `target` and pick the slice with `layer`: `renderer.render({ container, target: noise, layer: z, clear: true })`. `layer` selects an array layer, a cube face, or a 3D depth slice. `RenderTexture.create` doesn't take `depth`, so use the `TextureSource` directly. `renderer.renderTarget.push({ target, layer })` takes `layer` too.
+
+## Storage textures (WebGPU only)
+
+```ts
+import { TextureSource } from "pixi.js";
+
+const volume = new TextureSource({ width: 64, height: 64, depth: 64, format: "rgba8unorm", storage: true });
+
+// bind this view to a texture_storage_3d<rgba8unorm, write> in your own compute pass
+const view = renderer.texture.getGpuSource(volume).createView();
+```
+
+`storage: true` adds `GPUTextureUsage.STORAGE_BINDING`, so your own compute pass can write the texture through `renderer.texture.getGpuSource(source).createView()`. PixiJS still samples it like any other texture. WebGL ignores the option.
+
+Every device accepts `rgba8unorm`, `rgba16float`, `r32float`, `rg32float`, `rgba32float` and the matching integer formats as storage textures. `bgra8unorm` needs the `bgra8unorm-storage` feature, and formats such as `r8unorm` or `r16float` need `texture-formats-tier1`. PixiJS enables both features when the GPU has them. WebGPU rejects any other format when the texture is created.
+
+`autoGenerateMipmaps` on a 3D texture uses `gl.generateMipmap` on WebGL. WebGPU writes the mips with a compute shader, so the texture needs `storage: true` and the `rgba8unorm` or `rgba16float` format.
+
+## Render bundles (WebGPU only)
+
+```ts
+import { RenderContainer } from "pixi.js";
+import type { RenderBundle, WebGPURenderer } from "pixi.js";
+
+let bundle: RenderBundle | null = null;
+
+const props = new RenderContainer({
+  render: (renderer) => {
+    const encoder = (renderer as WebGPURenderer).encoder;
+
+    if (!bundle || !encoder.isBundleValid(bundle)) {
+      encoder.beginBundle("static-props");
+      encoder.draw({ geometry, shader, state });
+      bundle = encoder.endBundle();
+    }
+
+    encoder.executeBundle(bundle);
+  },
+});
+```
+
+A bundle records draw calls once and replays them on later frames. It bakes the render target it was recorded in (formats, sample count, winding) and the device, so `isBundleValid` returns `false` after the target changes (a filter wrapping the container, `flipY` flipping) or after a device loss. Re-record when it does; otherwise WebGPU rejects the frame or draws inside out. Pass an array to `executeBundle` to replay several bundles in one call. The optional label names the bundle in GPU captures.
+
+## Pooled scratch textures
+
+```ts
+import { TexturePool } from "pixi.js";
+
+const scratch = TexturePool.getOptimalTexture({
+  width: bounds.width,
+  height: bounds.height,
+  resolution: renderer.resolution,
+  antialias: true,
+  scaleMode: "nearest",
+});
+
+const { width, height } = TexturePool.getOptimalSize(bounds.width, bounds.height, renderer.resolution);
+
+TexturePool.returnTexture(scratch);
+```
+
+`getOptimalTexture` takes one request object: `width` and `height` are the minimum frame size; `resolution`, `antialias`, `autoGenerateMipmaps`, `format`, and `scaleMode` are optional, and each combination has its own bucket, so ask for a float or depth format directly instead of restyling a returned texture. Each axis is rounded up to the next power of two or the renderer's screen size, whichever is smaller. `getOptimalSize` reports that backing size without taking a texture, and `getSameSizeTexture(texture)` matches an existing texture's frame and resolution. The positional `getOptimalTexture(width, height, resolution, antialias)` form, `TexturePool.textureStyle`, and `enableFullScreen` are deprecated since 8.21.0.
+
+## API Reference
+
+- [TexturePool](https://pixijs.download/release/docs/rendering.TexturePool.html.md)
+- [Buffer](https://pixijs.download/release/docs/rendering.Buffer.html.md)
+- [Geometry](https://pixijs.download/release/docs/rendering.Geometry.html.md)
+- [State](https://pixijs.download/release/docs/rendering.State.html.md)
+- [ShaderOverrides](https://pixijs.download/release/docs/rendering.ShaderOverrides.html.md)
+- [GpuProgram](https://pixijs.download/release/docs/rendering.GpuProgram.html.md)
+- [TextureView](https://pixijs.download/release/docs/rendering.TextureView.html.md)
+- [RenderTarget](https://pixijs.download/release/docs/rendering.RenderTarget.html.md)
+- [GpuEncoderSystem](https://pixijs.download/release/docs/rendering.GpuEncoderSystem.html.md)
+- [RenderBundle](https://pixijs.download/release/docs/rendering.RenderBundle.html.md)

package/vendor/pixijs-skills/skills/pixijs-custom-rendering/references/uniform-types.md

@@ -0,0 +1,94 @@
+# 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

package/vendor/pixijs-skills/skills/pixijs-environments/SKILL.md

@@ -0,0 +1,243 @@
+---
+name: pixijs-environments
+description: "Use this skill when running PixiJS v8 outside a standard browser: Web Workers, OffscreenCanvas, Node/SSR, or CSP-restricted contexts. Covers DOMAdapter.set, BrowserAdapter, WebWorkerAdapter, custom Adapter interface, pixi.js/unsafe-eval for strict CSP. Triggers on: DOMAdapter, BrowserAdapter, WebWorkerAdapter, Web Worker, OffscreenCanvas, Node, headless, SSR, CSP, unsafe-eval, Adapter."
+license: MIT
+---
+
+`DOMAdapter` abstracts every piece of DOM access PixiJS does (canvas creation, Image loading, fetch, XML parsing) so the library can run in non-browser contexts. Call `DOMAdapter.set(...)` before `app.init()` to swap in a different adapter.
+
+## Quick Start
+
+```ts
+// worker.ts — OffscreenCanvas posted from main thread
+DOMAdapter.set(WebWorkerAdapter);
+
+self.onmessage = async (event) => {
+  const app = new Application();
+  await app.init({
+    canvas: event.data.canvas,
+    width: 800,
+    height: 600,
+  });
+};
+```
+
+For CSP contexts that block `unsafe-eval`, import the polyfill before any renderer init:
+
+```ts
+import "pixi.js/unsafe-eval";
+```
+
+**Related skills:** `pixijs-application` (standard browser init), `pixijs-migration-v8` (settings removal, adapter changes).
+
+## Core Patterns
+
+### Web Worker with OffscreenCanvas
+
+Transfer an OffscreenCanvas from the main thread, then initialize PixiJS in the worker:
+
+```ts
+// main.ts
+const canvas = document.createElement("canvas");
+canvas.width = 800;
+canvas.height = 600;
+document.body.appendChild(canvas);
+
+const offscreen = canvas.transferControlToOffscreen();
+const worker = new Worker("worker.ts", { type: "module" });
+worker.postMessage({ canvas: offscreen }, [offscreen]);
+```
+
+```ts
+// worker.ts
+import { Application, DOMAdapter, WebWorkerAdapter } from "pixi.js";
+
+DOMAdapter.set(WebWorkerAdapter);
+
+self.onmessage = async (event) => {
+  const app = new Application();
+  await app.init({
+    canvas: event.data.canvas,
+    width: 800,
+    height: 600,
+  });
+};
+```
+
+`DOMAdapter.set(WebWorkerAdapter)` must happen before `new Application()`. The WebWorkerAdapter uses `OffscreenCanvas` instead of `document.createElement('canvas')` and `@xmldom/xmldom` for XML parsing.
+
+Features that do **not** work inside a Web Worker (no DOM access):
+
+- `DOMContainer` — there is no real DOM node to overlay.
+- `AccessibilitySystem` — depends on live DOM focus and screen reader hooks.
+- `FontFace` loading via the Font Loading API — use pre-converted bitmap fonts (`BitmapFont.install` or `.fnt` assets) instead.
+
+### Environment-specific subpath imports
+
+Instead of importing `pixi.js`, you can pull in a curated bundle for each environment:
+
+```ts
+import "pixi.js/browser"; // accessibility, dom, events, spritesheet, rendering, filters
+import "pixi.js/webworker"; // spritesheet, rendering, filters (no DOM-only modules)
+```
+
+`pixi.js/webworker` deliberately omits `accessibility`, `dom`, and `events` because they require the DOM. Use these subpath entries when you want static, synchronous module registration instead of relying on `loadEnvironmentExtensions` to dynamic-import the right set at renderer init.
+
+### loadEnvironmentExtensions
+
+```ts
+import { loadEnvironmentExtensions } from "pixi.js";
+
+await loadEnvironmentExtensions(false); // false = load defaults; true = skip
+```
+
+`loadEnvironmentExtensions(skip)` replaces the deprecated `autoDetectEnvironment` helper (since 8.1.6). Pass `true` to opt out of auto-loading the default browser extensions when you are bootstrapping a custom environment. `autoDetectEnvironment(add)` still exists as a shim that forwards to `loadEnvironmentExtensions(!add)`.
+
+### CSP-compliant setup
+
+PixiJS uses `new Function()` internally for shader compilation and uniform syncing. In Content Security Policy environments that block `unsafe-eval`, import the polyfill:
+
+```ts
+import "pixi.js/unsafe-eval";
+import { Application } from "pixi.js";
+
+const app = new Application();
+await app.init({ width: 800, height: 600 });
+```
+
+The `pixi.js/unsafe-eval` import replaces eval-based code generation with static polyfills for shader sync, UBO sync, uniform sync, and particle buffer updates. The import must come before any PixiJS renderer initialization.
+
+**Tension note:** The name `pixi.js/unsafe-eval` is counterintuitive. It does not enable unsafe eval; it removes the need for it. The name refers to the CSP directive it works around.
+
+### Custom adapter
+
+For non-standard environments (Node.js, headless testing, SSR), implement the full Adapter interface:
+
+```ts
+import { DOMAdapter } from "pixi.js";
+import type { Adapter } from "pixi.js";
+import { createCanvas, Image } from "canvas";
+import { DOMParser } from "@xmldom/xmldom";
+
+const HeadlessAdapter: Adapter = {
+  createCanvas: (width, height) => createCanvas(width ?? 0, height ?? 0),
+  createImage: () => new Image(),
+  getCanvasRenderingContext2D: () => CanvasRenderingContext2D,
+  getWebGLRenderingContext: () => WebGLRenderingContext,
+  getNavigator: () => ({ userAgent: "HeadlessAdapter", gpu: null }),
+  getBaseUrl: () => "file://",
+  getFontFaceSet: () => null,
+  fetch: (url, options) => fetch(url, options),
+  parseXML: (xml) => new DOMParser().parseFromString(xml, "text/xml"),
+};
+
+DOMAdapter.set(HeadlessAdapter);
+```
+
+The Adapter interface requires these methods: `createCanvas`, `createImage`, `getCanvasRenderingContext2D`, `getWebGLRenderingContext`, `getNavigator`, `getBaseUrl`, `getFontFaceSet`, `fetch`, `parseXML`.
+
+### Checking the current adapter
+
+```ts
+import { DOMAdapter } from "pixi.js";
+
+const adapter = DOMAdapter.get();
+const canvas = adapter.createCanvas(256, 256);
+const img = adapter.createImage();
+```
+
+`DOMAdapter.get()` returns whatever adapter is currently set. Use this for any DOM access within PixiJS-adjacent code instead of calling `document` or `Image` directly.
+
+## Common Mistakes
+
+### [CRITICAL] Not setting adapter before app.init()
+
+Wrong:
+
+```ts
+const app = new Application();
+await app.init({ width: 800, height: 600 });
+DOMAdapter.set(WebWorkerAdapter); // too late; adapter already read during init
+```
+
+Correct:
+
+```ts
+DOMAdapter.set(WebWorkerAdapter);
+const app = new Application();
+await app.init({ width: 800, height: 600 });
+```
+
+`DOMAdapter.set()` must be called before `app.init()` in non-browser environments. PixiJS reads the adapter during `app.init()` when the renderer is created. `new Application()` itself only creates the stage Container and does not read the adapter.
+
+
+### [HIGH] Using document or Image directly
+
+Wrong:
+
+```ts
+const img = new Image();
+img.src = "texture.png";
+```
+
+Correct:
+
+```ts
+import { DOMAdapter } from "pixi.js";
+
+const img = DOMAdapter.get().createImage();
+img.src = "texture.png";
+```
+
+All DOM access in PixiJS goes through DOMAdapter. Direct use of `document`, `Image`, or other browser globals breaks Web Worker and SSR compatibility.
+
+
+### [HIGH] CSP unsafe-eval import name confusion
+
+Wrong:
+
+```ts
+// CSP environment, omitting the import
+import { Application } from "pixi.js";
+// Throws: "Current environment does not allow unsafe-eval,
+// please use pixi.js/unsafe-eval module to enable support."
+```
+
+Correct:
+
+```ts
+import "pixi.js/unsafe-eval";
+import { Application } from "pixi.js";
+```
+
+The `pixi.js/unsafe-eval` import removes the need for `eval()` / `new Function()` in shader compilation. Despite the name suggesting it enables unsafe eval, it does the opposite: it installs static polyfills so PixiJS works under strict CSP.
+
+PixiJS detects CSP blocking at renderer init and throws the error above. The browser may also log its own CSP violation before PixiJS reports; both point to the same fix.
+
+
+### [HIGH] Using old settings.ADAPTER pattern
+
+Wrong:
+
+```ts
+import { settings, WebWorkerAdapter } from "pixi.js";
+settings.ADAPTER = WebWorkerAdapter;
+```
+
+Correct:
+
+```ts
+import { DOMAdapter, WebWorkerAdapter } from "pixi.js";
+DOMAdapter.set(WebWorkerAdapter);
+```
+
+The `settings` object was removed in v8. All adapter configuration uses `DOMAdapter.set()`.
+
+
+## API Reference
+
+- [DOMAdapter](https://pixijs.download/release/docs/environment.DOMAdapter.html.md)
+- [BrowserAdapter](https://pixijs.download/release/docs/environment.BrowserAdapter.html.md)
+- [WebWorkerAdapter](https://pixijs.download/release/docs/environment.WebWorkerAdapter.html.md)
+- [autoDetectEnvironment](https://pixijs.download/release/docs/environment.autoDetectEnvironment.html.md)
+- [loadEnvironmentExtensions](https://pixijs.download/release/docs/environment.loadEnvironmentExtensions.html.md)