Give the grain one roll of film, sized to the picture

The camera preview, the library preview and the exported file each carried
their own copy of the grain shader, and each sized it off the rect it happened
to be drawing on. Two things were wrong with that. The field was a single value
hash, so it looked like digital static rather than film: measured on the noise
plane, neighbour correlation was flat and the lattice sat on the picture's own
axes; and it was the same field in every session, so two photos from two
launches printed identical grain. The size rule was wrong the other way round:
canvas units in Skia are dp, so on a 3x phone the floor of one dp pinned a
390dp-wide preview to a THREE device-pixel cell while the file printed a
1080th of its width — 2.77x coarser than the picture it was previewing, which
is the preview-vs-file mismatch all over again, just the other direction.

Grain now lives in one module, src/utils/grainShader.ts, imported by the
preview (both surfaces), the phone's export and the web engine, so the three
cannot drift. The noise is three octaves of value noise over a density that is
the mean of three hashes — a bell, the way an emulsion's density swings —
turned 20 degrees off the axes, seeded once per app launch, so a session prints
one roll and the next launch prints another. Only coarser octaves: a finer one
lands under the pixel and the clumping is lost outright. The cell is one
1/1080th of the PICTURE's width, floored at one pixel OF THE TARGET — an
export's own output pixel, a preview's device pixel (1 / PixelRatio.get())
instead of a whole dp.

Measured on the plane itself with the real module (grainSize harness): the file
at 4000px and a 390dp camera preview at 3x agree on the same fractional lag,
rho 0.017 against 0.011, while the floor this replaces reads 0.329 — visibly
coarser, as claimed; both keep the spread the AMOUNT knob was tuned on
(sigma 57.8 / 57.9) and still clump (rho(1) 0.91 / 0.39); R, G and B never move
apart, split 0. GRAIN_SKSL compiles on the Skia runtime, and the compile is now
swallowed into null at module scope like the other three effects, so a shader
this app cannot compile costs the grain rather than a launch.

Not ported: the Kotlin grainOverlay probe (per-pixel, path is off by default).

src/utils/exportEngine.ts

@@ -7,6 +7,7 @@ import { Recipe, GPSInfo, FrameId, AspectRatio, ASPECT_RATIO_W_H, CropRect } fro
 import { getSkiaColorMatrix, applyExposureGain } from './colorUtils';
 import { TONE_SKSL, getToneUniforms, toneIsActive, toneUniformArray, GLOW_SKSL, glowUniformArray } from './toneShader';
 import { CINEMA_SKSL, getCinemaUniforms, cinemaIsActive } from './cinemaShader';
+import { GRAIN_SKSL, GRAIN_SEED, grainCell } from './grainShader';
 import { drawFrameOnCanvas, polaroidLayout, POLAROID_CARD, POLAROID_WIN_W, wallframeLayout, WALLFRAME_W, WALLFRAME_H, WALLFRAME_LAND_W, WALLFRAME_LAND_H } from './frameUtils';
 import { patchJpegDpi } from './jpegDpi';
 import { writeJpegExif } from './exifWrite';
@@ -557,29 +558,15 @@ export async function processAndExportPhoto(
       grainPaint.setBlendMode(BlendMode.Overlay);
       grainPaint.setAlphaf(grainOpacity);
 
-      // Procedural noise shader — byte-for-byte the preview's (see
-      // Viewfinder's noiseEffect). The cell is `width / 1080` so the grain is
-      // the same size RELATIVE to the picture as in the preview that tuned it;
-      // hashing the raw pixel grid made a 4000px file's grain ~4x finer than
-      // the grain the user had just tuned at 1080px.
-      const noiseEffect = own(Skia.RuntimeEffect.Make(`
-        uniform float u;
-        float grainHash(vec2 q) {
-          return fract(sin(dot(q, vec2(12.9898, 78.233))) * 43758.5453);
-        }
-        vec4 main(vec2 pos) {
-          vec2 p = pos.xy / max(u, 1.0);
-          vec2 i = floor(p);
-          vec2 f = p - i;
-          f = f * f * (3.0 - 2.0 * f);
-          float g00 = grainHash(i);
-          float g10 = grainHash(i + vec2(1.0, 0.0));
-          float g01 = grainHash(i + vec2(0.0, 1.0));
-          float g11 = grainHash(i + vec2(1.0, 1.0));
-          return vec4(vec3(mix(mix(g00, g10, f.x), mix(g01, g11, f.x), f.y)), 1.0);
-        }
-      `));
-      const noiseShader = noiseEffect ? own(noiseEffect.makeShader([width / 1080])) : null;
+      // Procedural noise shader — literally the preview's, and the web build's
+      // (see grainShader.ts). The cell is the picture's own width / GRAIN_REF, so
+      // the grain is the same size RELATIVE to the picture as the preview that
+      // tuned it; hashing the raw pixel grid made a 4000px file's grain ~4x
+      // finer than the grain the user had just tuned at 1080px.
+      const noiseEffect = own(Skia.RuntimeEffect.Make(GRAIN_SKSL));
+      const noiseShader = noiseEffect
+        ? own(noiseEffect.makeShader([grainCell(width), GRAIN_SEED[0], GRAIN_SEED[1]]))
+        : null;
 
       if (noiseShader) {
         grainPaint.setShader(noiseShader);

src/utils/grainShader.ts

@@ -0,0 +1,63 @@
+// MONOCHROME GRAIN — one roll of film, shared by the live camera preview, the
+// library preview, the web port and the file the phone writes.
+//
+// The seed is rolled ONCE per app launch and hashed into the noise's domain, so
+// every render inside one session — the preview, the compare copy, the export —
+// prints the same clumps, while the next launch (or the next visitor, on the
+// web) prints a different roll. Film, not a fixed pattern.
+export const GRAIN_SEED: readonly [number, number] = [Math.random() * 61.7, Math.random() * 43.9];
+
+// Grain is sized against the PICTURE, never against the screen: one noise cell
+// per 1/1080 of the picture's width, the size the GRAIN knob was tuned at in the
+// first place. GRAIN_SKSL's 2.95 gain is what holds the AMOUNT slider on the
+// spread it was calibrated against — move one and the other has to move too.
+export const GRAIN_REF = 1080;
+
+export const GRAIN_SKSL = `
+  uniform float u;
+  uniform vec2 seed;
+  float grainHash(vec2 q) {
+    return fract(sin(dot(q, vec2(12.9898, 78.233))) * 43758.5453);
+  }
+  // Three uncorrelated hashes averaged: a bell, the way an emulsion's density
+  // swings, in place of the flat spread of one hash.
+  float grainDensity(vec2 q) {
+    return (grainHash(q) + grainHash(q + vec2(19.19, 7.77)) + grainHash(q + vec2(3.33, 41.71))) * 0.3333;
+  }
+  // Value noise: the density of the cell's four corners, smoothed. The bilinear
+  // over smoothed corners is what makes a clump instead of one pixel of static,
+  // which is all a cell smaller than the target's own pixel can be.
+  float grainNoise(vec2 p) {
+    vec2 i = floor(p);
+    vec2 f = p - i;
+    f = f * f * (3.0 - 2.0 * f);
+    return mix(mix(grainDensity(i), grainDensity(i + vec2(1.0, 0.0)), f.x),
+               mix(grainDensity(i + vec2(0.0, 1.0)), grainDensity(i + vec2(1.0, 1.0)), f.x), f.y);
+  }
+  vec4 main(vec2 pos) {
+    // 20 degrees off the axes: no lattice shows through the picture.
+    vec2 p = mat2(0.9397, -0.3420, 0.3420, 0.9397) * (pos.xy / max(u, 0.0001)) + seed;
+    // The grain, then the clumps of grain above it at 2x and 4x the cell. The
+    // octaves go COARSER only — a finer one lands under the pixel, the clumping
+    // is lost (rho(1) 0.275 -> 0, measured) and the field is static again.
+    float n = grainNoise(p) * 0.55
+            + grainNoise(p * 0.5 + vec2(13.7, 7.3)) * 0.30
+            + grainNoise(p * 0.25 + vec2(4.1, 27.9)) * 0.15;
+    // Scaled so the AMOUNT knob keeps the spread it was tuned with.
+    return vec4(vec3(clamp((n - 0.5) * 2.95 + 0.5, 0.0, 1.0)), 1.0);
+  }
+`;
+
+// The cell GRAIN_SKSL must be handed for a render of a picture occupying
+// `pictureWidth` canvas px: the camera's composition region, the library
+// photo's window on screen, or the full width of the file being exported.
+//
+// `minCell` is the floor under which the target cannot resolve a cell at all.
+// An export passes one output pixel (the default): a 900px file's 0.83px cell
+// prints as one pixel of static, so the cell stops at the pixel it can still
+// print. A PREVIEW must pass one DEVICE pixel — 1 / PixelRatio.get() — because
+// canvas units are dp: on a 3x phone the old floor of a whole dp pinned a
+// 390dp-wide preview to a 3 device-pixel cell, 2.8x coarser than the file's
+// grain, which is the preview-vs-file mismatch all over again, only that way.
+export const grainCell = (pictureWidth: number, minCell = 1) =>
+  Math.max(pictureWidth / GRAIN_REF, minCell);