Let a shader move the corners of the picture it wears (#79)

A shader could only say what colour a pixel has. Where the picture
is drawn was fixed to the four corners of its rectangle, so nothing
could wave, bend or wobble.

- The new node Vertex output takes x and y, in pixels of the
  picture, and moves every corner of the wearer's grid by them. The
  UVs stay with the corners, so the picture bends along.
- Subdivisions on that node says how fine the grid is: cells per
  axis, 1 to 64, 8 by default. 1 is the plain quad. A shader without
  the node keeps the quad every sprite shares.
- A graph holds one Vertex output at most. UV, Time, Property,
  Number and the math nodes may feed it, and one node may feed both
  outputs.
- Texture color, Texture alpha, Sample texture, Texture size and
  Color cannot feed it. The node says "Not available per corner"
  and the shader does not compile.
- Sprites, texts and the preview in the shader tab wear the grid.
  A nine-slice sprite and particles draw as if the node were not
  there.
- Picking, the selection frame, the size and colliders stay with
  the rectangle. A wearer with a Vertex output is never culled, as
  with Padding, and with Padding the grid covers the room around
  the picture too.
- tools/perf-shaders.mjs takes GM_PERF_SUBDIVISIONS to measure a
  grid against the plain quad.

Measured on stein2 (Intel HD 630), frames per second, one run per
row: at 800 sprites 58 with a shader on the quad, 46 with 8 cells,
41 with 32. Up to 400 sprites a grid hardly shows. Every sprite
holds its own grid.

Tests:
- Gate on melektaus-atx: 220 files, 3416 tests, CHECK EXIT 0.
- 15 new unit tests for the compiler and the grid.
- Four new e2e checks in modules 28 and 30: a fixed offset moves
  the picture, 8 cells bend only the lower half where 1 cell shears
  it all, Texture alpha is refused at the node, a text moves.
- e2e 28,30 on melektaus-atx: 110 checks, all pass.
- The e2e total of 1699 is counted (1695 + 4), the full suite did
  not run.
- No counter-probe, no screenshot. Not looked at: the preview, Time
  in the browser, flipped sprites, Padding together with the grid.

Co-Authored-By: Claude Opus 5.5 <noreply@anthropic.com>

src/core/shader/compile.ts

@@ -1,5 +1,5 @@
 import { graphEmitter } from '../graph/emitGraph';
-import { edgesInto, type Graph } from '../graph/Graph';
+import { edgesInto, type Graph, type GraphNode } from '../graph/Graph';
 import { nodeDef } from '../graph/NodeRegistry';
 import { colorOf } from '../model/Properties';
 import { isSpriteProp, isValidFieldName } from '../properties/PropertySchema';
@@ -16,9 +16,11 @@ import {
   SHADER_OUTPUT,
   SHADER_SAMPLE,
   SHADER_TIME,
+  SHADER_VERTEX_OUTPUT,
   type ShaderNodeDef,
   SHEET_EDGE,
   STRAIGHT_FN,
+  subdivisionsOf,
   TEXEL_ALPHA,
   TEXEL_AT,
   TEXEL_COLOR,
@@ -33,10 +35,25 @@ export interface ShaderUniform {
   default: number;
 }
 
+/**
+ * What a Vertex output node adds to the wearer's vertex stage (#79). It reads the corner's
+ * `vTextureCoord` and the same uniforms the fragment does.
+ */
+export interface ShaderVertex {
+  /** Declarations ahead of `main`: the uniforms, at the fragment's precision, and the helpers. */
+  head: string;
+  /** Statements inside `main`, ending in `vec2 offset`: the corner's move in pixels of the picture. */
+  body: string;
+  /** Cells per axis of the wearer's grid; 1 is the plain quad. */
+  subdivisions: number;
+}
+
 export interface CompiledShader {
   fragment: string;
+  /** Null without a Vertex output node: the wearer then draws on the quad every sprite shares. */
+  vertex: ShaderVertex | null;
   uniforms: ShaderUniform[];
-  /** A Time node feeds the Output: the fragment takes `uTime`, and a sprite wearing it redraws every tick. */
+  /** A Time node feeds an output: the program takes `uTime`, and a sprite wearing it redraws every tick. */
   time: boolean;
   /**
    * The texture variant the sprite's mesh draws with – the Output's Edge where the graph samples
@@ -59,6 +76,7 @@ export interface ShaderBuild {
 }
 
 export const PADDING_CLAMP_HINT = 'Padding with Clamp smears the border';
+export const perCornerProblem = (what: string) => `Not available per corner: ${what}`;
 
 /**
  * A shader graph to the fragment of the sprite's own draw: every node reachable from the Output
@@ -67,38 +85,9 @@ export const PADDING_CLAMP_HINT = 'Padding with Clamp smears the border';
  */
 export function compileShader(graph: Graph): ShaderBuild {
   const lines: string[] = [];
-  let count = 0;
-
-  const walk = graphEmitter<ShaderNodeDef, Expr>(graph, {
-    isDef: isShaderNodeDef,
-    noun: 'shader',
-    emit: (def, inputs, node) => {
-      const outputs: Record<string, Expr> = {};
-      for (const [key, expr] of Object.entries(def.emit(inputs, node.params))) {
-        const local = `n${count++}_${key}`;
-        lines.push(`${expr.type} ${local} = ${expr.code};`);
-        outputs[key] = { code: local, type: expr.type };
-      }
-      return outputs;
-    },
-    // With nothing to type and nothing the node says, an input is the texel: its colour for a
-    // colour port, its alpha for a number.
-    unfed: (node, port, def) => {
-      const typed = node.params[port.key] ?? port.default;
-      if (port.field?.kind === 'color')
-        return { code: vec3Literal(colorOf(typed ?? 0xffffff, 0xffffff)), type: 'vec3' };
-      if (port.field) return { code: floatLiteral(Number(typed ?? 0)), type: 'float' };
-      return def?.unfed?.[port.key] ?? (port.type === 'number' ? TEXEL_ALPHA : TEXEL_COLOR);
-    },
-    conform: (node, port, expr) => {
-      if (port.type === 'number' && expr.type === 'vec3') {
-        walk.problem(node, `"${port.key}" needs a number, not a color`);
-        return null;
-      }
-      if (port.type === 'vec3' && expr.type === 'float') return { code: asVec3(expr), type: 'vec3' };
-      return expr;
-    },
-  });
+  /** What the vertex walk met that only a pixel has; the Vertex output node reports the first. */
+  const perPixel: string[] = [];
+  const walk = walker(graph, lines, 'n', null);
   const { problems } = walk;
 
   walk.checkNames(graph.nodes.filter(isPropertyNode), propertyName, (name) =>
@@ -119,12 +108,40 @@ export function compileShader(graph: Graph): ShaderBuild {
   const color = walk.input(output, outputDef.inputs[0]!);
   const alpha = walk.input(output, outputDef.inputs[1]!);
 
-  const failed = walk.firstProblem();
-  if (failed !== null || !color || !alpha)
+  const uniforms = shaderParamDefs(graph).map((row) => ({ name: row.key, default: row.default }));
+
+  // The per-corner part is a walk of its own from the Vertex output: a node feeding both outputs is
+  // emitted once for each stage.
+  const corner = graph.nodes.find((n) => n.type === SHADER_VERTEX_OUTPUT);
+  const cornerLines: string[] = [];
+  const cornerWalk = walker(graph, cornerLines, 'c', perPixel);
+  let vertex: ShaderVertex | null = null;
+  if (corner) {
+    const cornerDef = nodeDef(SHADER_VERTEX_OUTPUT)!;
+    const x = cornerWalk.input(corner, cornerDef.inputs[0]!);
+    const y = cornerWalk.input(corner, cornerDef.inputs[1]!);
+    if (perPixel.length > 0) cornerWalk.problem(corner, perCornerProblem(perPixel[0]!));
+    for (const [id, text] of Object.entries(cornerWalk.problems)) if (!(id in problems)) problems[id] = text;
+    const reachesTime = graph.nodes.some((n) => n.type === SHADER_TIME && cornerWalk.reached(n));
+    if (x && y)
+      vertex = {
+        // A uniform both stages declare has to have one precision; the fragment's default is mediump.
+        head: [
+          ...(reachesTime ? [`uniform mediump float ${TIME_UNIFORM};`] : []),
+          ...uniforms.map((u) => `uniform mediump float ${uniformName(u.name)};`),
+          DIVIDE_FN,
+        ].join('\n'),
+        body: [...cornerLines, `vec2 offset = vec2(${x.code}, ${y.code});`].join('\n'),
+        subdivisions: subdivisionsOf(corner.params),
+      };
+  }
+
+  const failed = firstProblem(graph, problems);
+  if (failed !== null || !color || !alpha || (corner && !vertex))
     return { compiled: null, problems, hints, reason: failed ?? 'Cannot compile' };
 
-  const uniforms = shaderParamDefs(graph).map((row) => ({ name: row.key, default: row.default }));
-  const time = graph.nodes.some((n) => n.type === SHADER_TIME && walk.reached(n));
+  const time = graph.nodes.some((n) => n.type === SHADER_TIME && (walk.reached(n) || cornerWalk.reached(n)));
+  const fragmentTime = graph.nodes.some((n) => n.type === SHADER_TIME && walk.reached(n));
   // The fragment runs in the sprite's own draw (#77). `vColor` is the tint, premultiplied like the
   // texel; it goes in before the graph, so `Texture color` is the sprite as it draws without a shader.
   // The version line is what makes Pixi compile the program as GLSL ES 3.00 (`GlProgram` looks for
@@ -135,7 +152,7 @@ export function compileShader(graph: Graph): ShaderBuild {
     'in vec4 vColor;',
     'out vec4 finalColor;',
     'uniform sampler2D uTexture;',
-    ...(time ? [`uniform float ${TIME_UNIFORM};`] : []),
+    ...(fragmentTime ? [`uniform float ${TIME_UNIFORM};`] : []),
     ...uniforms.map((u) => `uniform float ${uniformName(u.name)};`),
     STRAIGHT_FN,
     DIVIDE_FN,
@@ -161,5 +178,53 @@ export function compileShader(graph: Graph): ShaderBuild {
       (edgesInto(graph, n.id, 'u').length > 0 || edgesInto(graph, n.id, 'v').length > 0),
   );
   const edge = (shifted || padding > 0) && mode !== 'transparent' ? mode : SHEET_EDGE;
-  return { compiled: { fragment, uniforms, time, edge, padding }, problems, hints, reason: '' };
+  return { compiled: { fragment, vertex, uniforms, time, edge, padding }, problems, hints, reason: '' };
+}
+
+function firstProblem(graph: Graph, problems: Record<string, string>): string | null {
+  const first = graph.nodes.find((n) => n.id in problems);
+  return first ? problems[first.id]! : null;
+}
+
+/**
+ * One walk of the graph into `lines`, a local per node output. `perPixel` is the list a per-corner
+ * walk notes in what it met that only a pixel has; the fragment's walk hands in null.
+ */
+function walker(graph: Graph, lines: string[], prefix: string, perPixel: string[] | null) {
+  let count = 0;
+  const walk = graphEmitter<ShaderNodeDef, Expr>(graph, {
+    isDef: isShaderNodeDef,
+    noun: 'shader',
+    emit: (def, inputs, node) => {
+      if (def.perPixel) perPixel?.push(def.label);
+      const outputs: Record<string, Expr> = {};
+      for (const [key, expr] of Object.entries(def.emit(inputs, node.params))) {
+        const local = `${prefix}${count++}_${key}`;
+        lines.push(`${expr.type} ${local} = ${expr.code};`);
+        outputs[key] = { code: local, type: expr.type };
+      }
+      return outputs;
+    },
+    // With nothing to type and nothing the node says, an input is the texel: its colour for a
+    // colour port, its alpha for a number.
+    unfed: (node, port, def) => {
+      const typed = node.params[port.key] ?? port.default;
+      if (port.field?.kind === 'color')
+        return { code: vec3Literal(colorOf(typed ?? 0xffffff, 0xffffff)), type: 'vec3' };
+      if (port.field) return { code: floatLiteral(Number(typed ?? 0)), type: 'float' };
+      const said = def?.unfed?.[port.key];
+      if (said) return said;
+      perPixel?.push('the picture');
+      return port.type === 'number' ? TEXEL_ALPHA : TEXEL_COLOR;
+    },
+    conform: (node: GraphNode, port, expr) => {
+      if (port.type === 'number' && expr.type === 'vec3') {
+        walk.problem(node, `"${port.key}" needs a number, not a color`);
+        return null;
+      }
+      if (port.type === 'vec3' && expr.type === 'float') return { code: asVec3(expr), type: 'vec3' };
+      return expr;
+    },
+  });
+  return walk;
 }

src/core/shader/nodes.ts

@@ -24,6 +24,8 @@ export interface ShaderNodeDef extends NodeDef {
   emit(inputs: Record<string, Expr>, params: PropertyBag): Record<string, Expr>;
   /** What an input with nothing to type on reads while unconnected; without it, the texel. */
   unfed?: Record<string, Expr>;
+  /** Reads the picture or is a colour: there is none per corner, so it cannot feed the Vertex output (#79). */
+  perPixel?: boolean;
 }
 
 export function isShaderNodeDef(def: NodeDef): def is ShaderNodeDef {
@@ -33,6 +35,7 @@ export function isShaderNodeDef(def: NodeDef): def is ShaderNodeDef {
 export const SHADER_TEXTURE_COLOR = 'ShaderTextureColor';
 export const SHADER_TEXTURE_ALPHA = 'ShaderTextureAlpha';
 export const SHADER_OUTPUT = 'ShaderOutput';
+export const SHADER_VERTEX_OUTPUT = 'ShaderVertexOutput';
 export const SHADER_COLOR = 'ShaderColor';
 export const SHADER_NUMBER = 'ShaderNumber';
 export const SHADER_UV = 'ShaderUV';
@@ -87,6 +90,19 @@ export function paddingOf(params: PropertyBag): number {
   return Number.isFinite(value) ? Math.min(MAX_PADDING, Math.max(0, value)) : 0;
 }
 
+/**
+ * How many cells per axis the wearer's quad is cut into (#79) – a setting of the Vertex output node,
+ * because how fine the grid has to be is the effect's to say. 1 is the plain quad.
+ */
+export const SUBDIVISIONS_PARAM = 'subdivisions';
+export const DEFAULT_SUBDIVISIONS = 8;
+export const MAX_SUBDIVISIONS = 64;
+
+export function subdivisionsOf(params: PropertyBag): number {
+  const value = Math.round(Number(params[SUBDIVISIONS_PARAM] ?? DEFAULT_SUBDIVISIONS));
+  return Number.isFinite(value) ? Math.min(MAX_SUBDIVISIONS, Math.max(1, value)) : DEFAULT_SUBDIVISIONS;
+}
+
 /**
  * Reads the picture at a UV. No sampler state makes the outside empty, so *Transparent* is cut
  * here, and with it needs no copy of the picture with an address mode of its own.
@@ -185,6 +201,7 @@ export const ShaderTextureColor: ShaderNodeDef = {
   inputs: [],
   outputs: [vec3Port('color')],
   params: [],
+  perPixel: true,
   emit: () => ({ color: TEXEL_COLOR }),
 };
 
@@ -196,6 +213,7 @@ export const ShaderTextureAlpha: ShaderNodeDef = {
   inputs: [],
   outputs: [{ key: 'value', label: 'value', type: 'number' }],
   params: [],
+  perPixel: true,
   emit: () => ({ value: TEXEL_ALPHA }),
 };
 
@@ -216,6 +234,36 @@ export const ShaderOutput: ShaderNodeDef = {
   emit: () => ({}),
 };
 
+/**
+ * The second node the compiler starts from (#79): what feeds it runs once per corner of the
+ * wearer's grid and moves that corner. Without it the wearer keeps the quad every sprite shares.
+ */
+export const ShaderVertexOutput: ShaderNodeDef = {
+  type: SHADER_VERTEX_OUTPUT,
+  label: 'Vertex output',
+  category: 'shader',
+  description:
+    'Moves the corners of the grid the picture is drawn on: x to the right and y down, in pixels of the picture. The picture bends with them. Subdivisions is how many cells the grid has each way; 1 is the plain rectangle.',
+  inputs: [
+    { key: 'x', label: 'x', type: 'number', inline: false },
+    { key: 'y', label: 'y', type: 'number', inline: false },
+  ],
+  outputs: [],
+  params: [
+    {
+      key: SUBDIVISIONS_PARAM,
+      label: 'Subdivisions',
+      kind: 'number',
+      default: DEFAULT_SUBDIVISIONS,
+      min: 1,
+      max: MAX_SUBDIVISIONS,
+      step: 1,
+    },
+  ],
+  unfed: { x: { code: '0.0', type: 'float' }, y: { code: '0.0', type: 'float' } },
+  emit: () => ({}),
+};
+
 export const ShaderUV: ShaderNodeDef = {
   type: SHADER_UV,
   label: 'UV',
@@ -240,6 +288,7 @@ export const ShaderSample: ShaderNodeDef = {
   ],
   outputs: [vec3Port('color'), numberOut('alpha')],
   params: [],
+  perPixel: true,
   unfed: { u: OWN_U, v: OWN_V },
   emit: ({ u, v }) => {
     const sample = `${TEXEL_AT}(vec2(${u!.code}, ${v!.code})) * vColor`;
@@ -258,6 +307,7 @@ export const ShaderTextureSize: ShaderNodeDef = {
   inputs: [],
   outputs: [numberOut('width'), numberOut('height')],
   params: [],
+  perPixel: true,
   emit: () => ({
     width: { code: 'float(textureSize(uTexture, 0).x)', type: 'float' },
     height: { code: 'float(textureSize(uTexture, 0).y)', type: 'float' },
@@ -303,6 +353,7 @@ export const ShaderColor: ShaderNodeDef = {
   inputs: [],
   outputs: [vec3Port('color')],
   params: [flatDef('value', 'color', { label: 'Value', value: 0xffffff })],
+  perPixel: true,
   emit: (_inputs, params) => ({
     color: { code: vec3Literal(Number(params.value ?? 0xffffff)), type: 'vec3' },
   }),
@@ -497,6 +548,7 @@ export const SHADER_NODES: readonly ShaderNodeDef[] = [
   ShaderTextureSize,
   ShaderTime,
   ShaderOutput,
+  ShaderVertexOutput,
   ShaderProperty,
   ShaderColor,
   ShaderNumber,

src/editor/graph/paletteEntries.ts

@@ -29,7 +29,7 @@ import {
 } from '../../core/properties/particles';
 import { nextPropertyName, PROPERTY_NAME_PARAM, SHADER_PROPERTY } from '../../core/properties/shaders';
 import { nextParticlePropertyName, PARTICLE_NODES, PARTICLE_OUTPUT } from '../../core/particles/nodes';
-import { SHADER_NODES, SHADER_OUTPUT } from '../../core/shader/nodes';
+import { SHADER_NODES, SHADER_OUTPUT, SHADER_VERTEX_OUTPUT } from '../../core/shader/nodes';
 
 /**
  * One row of the palette. `def` is the definition the node would actually have once placed, so the
@@ -95,8 +95,9 @@ export function paletteEntries(project: Project, asset: GraphAsset): PaletteEntr
     return [{ id: State.type, hint: State.category, def: State, params }];
   }
   if (asset.type === 'shader') {
-    const hasOutput = asset.graph.nodes.some((n) => n.type === SHADER_OUTPUT);
-    return SHADER_NODES.filter((def) => def.type !== SHADER_OUTPUT || !hasOutput).map((def) => {
+    const placed = new Set(asset.graph.nodes.map((n) => n.type));
+    const once = [SHADER_OUTPUT, SHADER_VERTEX_OUTPUT];
+    return SHADER_NODES.filter((def) => !once.includes(def.type) || !placed.has(def.type)).map((def) => {
       const params: PropertyBag =
         def.type === SHADER_PROPERTY ? { [PROPERTY_NAME_PARAM]: nextPropertyName(asset.graph) } : {};
       return { id: def.type, hint: def.category, def, params };

src/editor/shader/ShaderPreview.ts

@@ -114,10 +114,11 @@ export class ShaderPreview extends Widget {
     );
     this.mesh.position.set(Math.round(this.w / 2), Math.round(this.h / 2));
     this.mesh.scale.set(w * zoom, h * zoom);
-    syncQuadPadding(this.mesh, worn?.padding ?? 0, texture?.width ?? w, texture?.height ?? h);
+    const counted = { w: texture?.width ?? w, h: texture?.height ?? h };
+    syncQuadPadding(this.mesh, worn?.padding ?? 0, counted.w, counted.h, worn?.vertex?.subdivisions ?? 1);
     this.mesh.texture = texture ?? Texture.WHITE;
     this.mesh.tint = picture?.tint ?? 0xffffff;
-    syncShader(this.mesh, { ...this.values, [SHADER_KEY]: this.shader.id }, source);
+    syncShader(this.mesh, { ...this.values, [SHADER_KEY]: this.shader.id }, source, counted);
   }
 
   override destroy(): void {

src/viewport/WorldViewport.ts

@@ -330,8 +330,9 @@ export abstract class WorldViewport<S extends ViewSource = ViewSource> extends W
       // A switched-off object is not drawn at all, in the scene view as in the game; it is
       // selected and switched back on from the hierarchy panel. A source is never culled by its
       // own little square: its particles may be anywhere on screen while it is not. Nor is a wearer
-      // of a padded shader, which draws past its rectangle (#69).
-      const unbound = item.type === 'particles' || (wornShader(item.props, shaders)?.padding ?? 0) > 0;
+      // of a shader that pads it (#69) or moves its corners (#79): both draw past its rectangle.
+      const worn = wornShader(item.props, shaders);
+      const unbound = item.type === 'particles' || (worn?.padding ?? 0) > 0 || Boolean(worn?.vertex);
       const onScreen = item.enabled && (unbound || rectsIntersect(extent, bounds));
       let node = this.nodes.get(item.id);
       if (!node) {

src/viewport/quadPadding.ts

@@ -33,6 +33,35 @@ export function paddedQuad(pad: QuadPadding): {
   };
 }
 
+/**
+ * The same rectangle cut into `cells` by `cells` (#79), so a shader's Vertex output has corners to
+ * move inside it. Positions and UVs stay one and the same, as on the quad.
+ */
+export function gridQuad(
+  pad: QuadPadding | null,
+  cells: number,
+): { positions: Float32Array; uvs: Float32Array; indices: Uint32Array } {
+  const n = Math.max(1, Math.round(cells));
+  const [u, v] = [pad?.u ?? 0, pad?.v ?? 0];
+  const corners = new Float32Array((n + 1) * (n + 1) * 2);
+  for (let row = 0; row <= n; row++) {
+    for (let column = 0; column <= n; column++) {
+      const at = (row * (n + 1) + column) * 2;
+      corners[at] = -u + ((1 + 2 * u) * column) / n;
+      corners[at + 1] = -v + ((1 + 2 * v) * row) / n;
+    }
+  }
+  const indices = new Uint32Array(n * n * 6);
+  for (let row = 0; row < n; row++) {
+    for (let column = 0; column < n; column++) {
+      const corner = row * (n + 1) + column;
+      const below = corner + n + 1;
+      indices.set([corner, corner + 1, below + 1, corner, below + 1, below], (row * n + column) * 6);
+    }
+  }
+  return { positions: corners, uvs: new Float32Array(corners), indices };
+}
+
 export function paddingKey(pad: QuadPadding | null): string {
   return pad ? `${pad.u},${pad.v}` : '';
 }

src/viewport/shaders.ts

@@ -11,7 +11,7 @@ import {
 } from 'pixi.js';
 import type { PropertyBag } from '../core/model/Properties';
 import { shaderOf } from '../core/properties/shaders';
-import type { CompiledShader } from '../core/shader/compile';
+import type { CompiledShader, ShaderVertex } from '../core/shader/compile';
 import { TIME_UNIFORM, uniformName } from '../core/shader/nodes';
 import { type QuadPadding, quadPadding } from './quadPadding';
 
@@ -52,6 +52,35 @@ void main()
 }
 `;
 
+/**
+ * The same stage with a graph's Vertex output in it (#79): the corner's UV is known before the
+ * graph runs, and what it says in pixels of the picture moves the corner in the quad's own 0..1.
+ * `uPerPixel` is one such pixel there – zero on a wearer whose corners are not a grid.
+ */
+function cornerVertex(vertex: ShaderVertex): string {
+  return `
+in vec2 aPosition;
+in vec2 aUV;
+out vec2 vTextureCoord;
+out vec4 vColor;
+uniform mat3 uProjectionMatrix;
+uniform mat3 uWorldTransformMatrix;
+uniform vec4 uWorldColorAlpha;
+uniform mat3 uTransformMatrix;
+uniform vec4 uColor;
+uniform vec2 uPerPixel;
+${vertex.head}
+void main()
+{
+    vTextureCoord = aUV;
+    ${vertex.body.split('\n').join('\n    ')}
+    mat3 m = uProjectionMatrix * uWorldTransformMatrix * uTransformMatrix;
+    gl_Position = vec4((m * vec3(aPosition + offset * uPerPixel, 1.0)).xy, 0.0, 1.0);
+    vColor = uColor * uWorldColorAlpha;
+}
+`;
+}
+
 /**
  * Pixi's own particle vertex stage in GLSL ES 3.00, which is what the compiled fragment is written
  * in: `attribute`/`varying` become `in`/`out` and `vUV` takes the name the fragment reads. The
@@ -125,6 +154,8 @@ abstract class CompiledGraphShader extends Shader {
   private readonly uniforms: Record<string, number> | null;
   private readonly compiled: CompiledShader;
   readonly fragment: string;
+  /** The vertex stage this was built with; a particle field's never comes from the graph. */
+  private readonly vertex: string;
 
   constructor(
     readonly assetId: string,
@@ -138,13 +169,21 @@ abstract class CompiledGraphShader extends Shader {
       resources: { ...resources, ...(group ? { shaderUniforms: group } : {}) },
     });
     this.fragment = compiled.fragment;
+    this.vertex = program.vertex;
     this.compiled = compiled;
     this.uniforms = group ? group.uniforms : null;
   }
 
   /** True while this is still the shader `props` ask for, so it can be updated instead of rebuilt. */
   wears(id: string, compiled: CompiledShader): boolean {
-    return this.assetId === id && this.fragment === compiled.fragment;
+    return (
+      this.assetId === id && this.fragment === compiled.fragment && this.vertex === this.vertexFor(compiled)
+    );
+  }
+
+  /** The vertex stage this kind of wearer draws `compiled` with. */
+  protected vertexFor(_compiled: CompiledShader): string {
+    return this.vertex;
   }
 
   read(props: PropertyBag, now: number): void {
@@ -159,14 +198,34 @@ abstract class CompiledGraphShader extends Shader {
 class GraphShader extends CompiledGraphShader {
   /** What `Mesh.shader` asks of a shader; kept in step with the mesh's own by `wear`. */
   texture: Texture = Texture.WHITE;
+  private readonly perPixel: Float32Array | null;
 
   constructor(assetId: string, compiled: CompiledShader) {
+    const corner = compiled.vertex
+      ? new UniformGroup({ uPerPixel: { value: new Float32Array(2), type: 'vec2<f32>' } })
+      : null;
     super(
       assetId,
       compiled,
-      { vertex: SPRITE_VERTEX, name: `shader-${assetId}` },
-      { uTexture: Texture.WHITE.source, uSampler: Texture.WHITE.source.style },
+      { vertex: spriteVertexOf(compiled), name: `shader-${assetId}` },
+      {
+        uTexture: Texture.WHITE.source,
+        uSampler: Texture.WHITE.source.style,
+        ...(corner ? { corner } : {}),
+      },
     );
+    this.perPixel = corner ? corner.uniforms.uPerPixel : null;
+  }
+
+  protected override vertexFor(compiled: CompiledShader): string {
+    return spriteVertexOf(compiled);
+  }
+
+  /** The picture the Vertex output's pixels are counted in; null holds every corner in place. */
+  count(picture: { w: number; h: number } | null): void {
+    if (!this.perPixel) return;
+    this.perPixel[0] = picture && picture.w > 0 ? 1 / picture.w : 0;
+    this.perPixel[1] = picture && picture.h > 0 ? 1 / picture.h : 0;
   }
 
   /** Pixi binds a mesh's texture only for its own shader, so a custom one takes it here. */
@@ -177,6 +236,10 @@ class GraphShader extends CompiledGraphShader {
   }
 }
 
+function spriteVertexOf(compiled: CompiledShader): string {
+  return compiled.vertex ? cornerVertex(compiled.vertex) : SPRITE_VERTEX;
+}
+
 function wornBy(mesh: Mesh): GraphShader | null {
   return mesh.shader instanceof GraphShader ? mesh.shader : null;
 }
@@ -191,13 +254,19 @@ export function wornShaderId(mesh: Mesh): string {
  * rebuilt when either changed, dropped for no shader – and for one that does not compile, which
  * leaves the mesh on Pixi's batched draw.
  */
-export function syncShader(mesh: Mesh, props: PropertyBag, shaders: ShaderSource): void {
+export function syncShader(
+  mesh: Mesh,
+  props: PropertyBag,
+  shaders: ShaderSource,
+  picture: { w: number; h: number } | null = null,
+): void {
   const id = shaderOf(props);
   const compiled = id ? shaders.compiled(id) : null;
   const worn = wornBy(mesh);
   if (worn && compiled && worn.wears(id, compiled)) {
     worn.read(props, shaders.now);
     worn.wear(mesh.texture);
+    worn.count(picture);
     return;
   }
   disposeShader(mesh);
@@ -205,6 +274,7 @@ export function syncShader(mesh: Mesh, props: PropertyBag, shaders: ShaderSource
     const shader = new GraphShader(id, compiled);
     shader.read(props, shaders.now);
     shader.wear(mesh.texture);
+    shader.count(picture);
     mesh.shader = shader;
   }
   // Pixi caches whether a mesh batches (MeshPipe's meshData) and re-checks it only in

src/viewport/symbols.ts

@@ -17,7 +17,7 @@ import { closestOnSegment } from '../core/util/vec';
 import { Theme } from '../ui';
 import type { DrawItem } from './items';
 import { sliceGeometry, sliceKey } from './nineSlice';
-import { paddedQuad, paddingKey, quadPadding } from './quadPadding';
+import { gridQuad, paddedQuad, paddingKey, quadPadding } from './quadPadding';
 import { disposeShader, type ShaderSource, syncShader, wornShader } from './shaders';
 import type { TextureLibrary } from './TextureLibrary';
 
@@ -78,16 +78,13 @@ export function syncSpriteMesh(
   const texture = item.texture ? textures.get(item.texture, worn?.edge ?? SHEET_EDGE) : null;
   placeNode(mesh, item.m, size.w, size.h);
   // Only once there is a picture: slicing a placeholder would cut up the plain colour for nothing.
-  syncGeometry(
-    mesh,
-    texture ? (item.texture?.slice ?? null) : null,
-    size,
-    worn?.padding ?? 0,
-    texture ? { w: texture.width, h: texture.height } : size,
-  );
+  const slice = texture ? (item.texture?.slice ?? null) : null;
+  const picture = texture ? { w: texture.width, h: texture.height } : size;
+  syncGeometry(mesh, slice, size, worn?.padding ?? 0, picture, worn?.vertex?.subdivisions ?? 1);
   mesh.texture = texture ?? Texture.WHITE;
   mesh.tint = Number(item.props.color ?? 0xffffff);
-  syncShader(mesh, item.props, shaders);
+  // A sliced sprite keeps its nine parts where they are: its corners are not the grid's (#79).
+  syncShader(mesh, item.props, shaders, slice ? null : picture);
 }
 
 /**
@@ -107,27 +104,33 @@ function syncGeometry(
   size: { w: number; h: number },
   padding: number,
   picture: { w: number; h: number },
+  subdivisions = 1,
 ): void {
   const pad = slice ? null : quadPadding(padding, picture.w, picture.h);
-  const key = slice ? `${sliceKey(slice, size.w, size.h)}|+${padding}` : paddingKey(pad);
+  const cells = slice ? 1 : subdivisions;
+  const key = slice
+    ? `${sliceKey(slice, size.w, size.h)}|+${padding}`
+    : paddingKey(pad) + (cells > 1 ? `#${cells}` : '');
   if ((geometryKeys.get(mesh) ?? '') === key) return;
   const previous = mesh.geometry;
   mesh.geometry = slice
     ? new MeshGeometry(sliceGeometry(slice, size.w, size.h, padding))
-    : pad
-      ? new MeshGeometry(paddedQuad(pad))
-      : UNIT_QUAD;
+    : cells > 1
+      ? new MeshGeometry(gridQuad(pad, cells))
+      : pad
+        ? new MeshGeometry(paddedQuad(pad))
+        : UNIT_QUAD;
   if (previous !== UNIT_QUAD) previous.destroy();
   if (key) geometryKeys.set(mesh, key);
   else geometryKeys.delete(mesh);
 }
 
 /**
- * The room a shader's Padding asks for around a plain quad: what a text and the shader tab's
- * preview wear, which have no frame to slice.
+ * The room a shader's Padding asks for around a plain quad, and the grid its Vertex output asks
+ * for: what a text and the shader tab's preview wear, which have no frame to slice.
  */
-export function syncQuadPadding(mesh: Mesh, padding: number, w: number, h: number): void {
-  syncGeometry(mesh, null, { w, h }, padding, { w, h });
+export function syncQuadPadding(mesh: Mesh, padding: number, w: number, h: number, subdivisions = 1): void {
+  syncGeometry(mesh, null, { w, h }, padding, { w, h }, subdivisions);
 }
 
 /**

src/viewport/textPicture.ts

@@ -112,10 +112,10 @@ export class TextPicture {
     this.sample(texture, item.fontSmooth, worn?.edge ?? SHEET_EDGE);
     placeNode(this.mesh, item.m, this.w, this.h);
     // A text's pixel is a world unit, whatever resolution the zoom had it rastered at.
-    syncQuadPadding(this.mesh, worn?.padding ?? 0, this.w, this.h);
+    syncQuadPadding(this.mesh, worn?.padding ?? 0, this.w, this.h, worn?.vertex?.subdivisions ?? 1);
     this.mesh.pivot.set(textAnchor(item.props), 0.5);
     this.mesh.texture = texture;
-    syncShader(this.mesh, item.props, shaders);
+    syncShader(this.mesh, item.props, shaders, { w: this.w, h: this.h });
     // Only now: until the shader took the new picture, the old one was still bound to it.
     previous?.destroy(true);
   }