3dtours/RecipesCam
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: give each stock its own grain, and a halo where it belongs

Browse Source 
The landing card sells "35mm & 120 Film Grain — authentic grain structures plus
halation bloom, tuned per stock rather than one global overlay", and the engine
printed one field for everything: a width/1080 cell, one spread, no bleed.
`shared/utils/grainShader.ts` (new, the web fork of the phone's
src/utils/grainShader.ts) now carries the stock table — format, cell, spread,
octave mix, halation, halo radius, halo tint — and `grainStockFor(
recipe.baseFilter)` picks the one this recipe prints.

FORMAT. 35mm cells are the 1.0 reference the knob was tuned at (classic-negative
1.15, B&W high contrast 1.25); the 120 emulsions sit at 0.55-0.72 and open their
base octave (mix 0.55/0.30/0.15 -> 0.62/0.26/0.12), so the same knob prints a
finer, smoother texture on the bigger negative. Measured on a flat 128 grey at a
3200px preview (cells 3.41px vs 1.63px), GRAIN 10, luma residual against a 17px
box:

  35mm  CLASSIC NEGIPES   r1 0.793   keeps 0.976
  35mm  CLASSIC CHRIPES   r1 0.744   keeps 0.931
  35mm  B&W HIGH CONTRAST r1 0.812   keeps 1.002
  120   PROVIPES          r1 0.423   keeps 0.728
  120   VELVIPES          r1 0.313   keeps 0.672
  120   ACRIPES           r1 0.543   keeps 0.794

r1 is the lag-1 autocorrelation of the residual — how coarse the clumps are —
and "keeps" is the residual sd after a 2x box downscale over the sd before, i.e.
how much of its texture a print at half size holds on to. Every 35mm stock beats
every 120 stock on both, and VELVIPES (0.55 cell) is finer than PROVIPES (0.62)
inside 120, so the format is a look and not a label. Raw sd is NOT the measure:
the knob drives one alpha for every stock, so a stock's amount follows its cell
and mix rather than the order anyone assumed.

HALATION. A new pass 6b thresholds the print (T0 0.62, T1 0.92), tints what is
left the stock's halo colour — red, because red is the light the emulsion passes
and the backing returns — blurs it at the stock's own radius and screens it back
at `halation * grain/10 * 0.6`. Riding the GRAIN knob keeps today's contract:
OFF is still a clean frame, the OFF/WEAK/STRONG chips still mean 0/3/6, and a
sensor stock carries none at any amount. Measured R-B of the ring around a white
block on black, GRAIN 6 minus GRAIN 0 (mean, and the ring's reddest pixel):

  CLASSIC NEGIPES    7.87  (peak 0 -> 14)    VELVIPES   3.71  (0 -> 13)
  CLASSIC CHRIPES    2.91  (0 -> 10)         PROVIPES   2.01  (0 -> 7)
  B&W HIGH CONTRAST  0.61  (0 -> 5)          ACRIPES    0.24  (0 -> 3)
  LC STREETLIFE CLASSIC 0.09 (0 -> 0)

which is the table's own halation column (0.45 > 0.30 > 0.25 > 0.18 > 0.15 >
0.12) in order: the colour negative halates hardest, the B&W emulsions barely,
Acros — no colour layer to bleed — least of all, and the sensor not at all. The
colour negative's own grade leaves its ring blue at GRAIN 0 (-5.96 there), so
the statistic is the change and not the absolute channel; in a crop of the block
the bloom itself is unmistakable at GRAIN 6 and 10 and absent at 0.

GRAIN_SEED moves here from exportEngine.ts so the roll is still one per page
load, and still shared by the preview, the compare copy and the file.

Checked: tsc --noEmit clean; grain-stock-test 53 PASS / 0 FAIL; sims-test 31/0,
fx-mono-test 15/0, grain-size-test 12/0, grain-analog-test 7/0, wm-font-test
green.

ponytail: halation rides the GRAIN knob instead of a control of its own, since
the card promises no more than "tuned per stock". Add a HALATION chip when the
phone grows one.
ponytail: `grainCell`'s 1px floor is the aliasing guard, and it also hides the
format ratio under a ~1600px preview. Nothing to add: the exported file is
always wide enough, and the harness renders at 3200 to see it.
This commit is contained in:
3dtours
2026-09-23 11:46:45 +07:00
parent 7a8c0aa2b5
commit 4795a2a0ee
2 changed files with 318 additions and 45 deletions
Download Patch File Download Diff File Expand all files Collapse all files
docker/frontend/src/engine/exportEngine.ts
+43 -45
View File
@@ -33,6 +33,16 @@ import {
glowUniformArray,
} from '../../shared/utils/toneShader';
import { CINEMA_SKSL, getCinemaUniforms, cinemaIsActive } from '../../shared/utils/cinemaShader';
import {
GRAIN_SKSL,
HALATION_SKSL,
HALATION_MAX,
grainCell,
grainStockFor,
grainUniformArray,
halationSigma,
halationUniformArray,
} from '../../shared/utils/grainShader';
import {
drawFrameOnCanvas,
polaroidLayout,
@@ -111,11 +121,6 @@ function release(owned: SkDisposable[], item: SkDisposable | null): void {
disposeAll([item]);
}
// The grain's roll of film: one seed per page load, hashed into the noise's
// domain so two runs never print the same clumps, while every render inside one
// session — the preview, the compare copy and the file — prints the same one.
const GRAIN_SEED = [Math.random() * 61.7, Math.random() * 43.9] as const;
function createSurface(width: number, height: number) {
return Skia.Surface.MakeOffscreen(width, height) ?? Skia.Surface.Make(width, height);
}
@@ -132,13 +137,15 @@ let sharpenEffect: any = null;
let toneEffect: any = null;
let cinemaEffect: any = null;
let glowEffect: any = null;
let halationEffect: any = null;
function effects() {
if (!sharpenEffect) sharpenEffect = Skia.RuntimeEffect.Make(CLARITY_SKSL);
if (!toneEffect) toneEffect = Skia.RuntimeEffect.Make(TONE_SKSL);
if (!cinemaEffect) cinemaEffect = Skia.RuntimeEffect.Make(CINEMA_SKSL);
if (!glowEffect) glowEffect = Skia.RuntimeEffect.Make(GLOW_SKSL);
return { sharpenEffect, toneEffect, cinemaEffect, glowEffect };
if (!halationEffect) halationEffect = Skia.RuntimeEffect.Make(HALATION_SKSL);
return { sharpenEffect, toneEffect, cinemaEffect, glowEffect, halationEffect };
}
// CLARITY_SKSL uniforms are (a, px.x, px.y); px = one source pixel = 1 unit on
@@ -509,59 +516,50 @@ export async function renderPhoto(input: RenderInput): Promise<RenderResult | nu
}
}
// 6. Monochrome grain overlay (negative NR re-grains, same ceiling as GRAIN).
// Analog in character, not digital: clumps rather than one pixel of static,
// a bell distribution rather than a flat one, a turned lattice, and this
// session's own seed. Cell = width / 1080, so its size stays the same
// RELATIVE to the picture as in the preview that tuned it, and a small
// frame clamps to the single pixel it can still resolve.
// 6. Film grain (negative NR re-grains, same ceiling as GRAIN). The field
// itself is the STOCK's — its format's cell, its emulsion's clump and
// spread (grainShader.ts) — and not one global overlay: a 120 negative
// prints finer and smoother than a 35mm one at the same picture width, and
// a colour negative clumps harder than a slide.
const grainAmount = Math.min(
10,
Math.max(0, adjustments.grain) + Math.max(0, -(adjustments.denoise ?? 0))
);
const stock = grainStockFor(recipe.baseFilter);
if (grainAmount > 0) {
const grainPaint = own(Skia.Paint());
grainPaint.setBlendMode(Skia.BlendMode.Overlay);
grainPaint.setAlphaf(grainAmount / 20);
const noiseEffect = own(Skia.RuntimeEffect.Make(`
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;
}
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, 1.0)) + seed;
// The grain, then the clumps of grain above it (2x and 4x the cell —
// sub-cells would alias instead of clumping). One cell alone reads as
// static; three scales read as an emulsion.
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);
}
`));
const noiseShader = noiseEffect ? own(noiseEffect.makeShader([width / 1080, GRAIN_SEED[0], GRAIN_SEED[1]])) : null;
const noiseEffect = own(Skia.RuntimeEffect.Make(GRAIN_SKSL));
const cell = grainCell(width, stock);
const noiseShader = noiseEffect ? own(noiseEffect.makeShader(grainUniformArray(cell, stock))) : null;
if (noiseShader) {
grainPaint.setShader(noiseShader);
canvas.drawRect(Skia.XYWHRect(0, 0, width, height), grainPaint);
}
}
// 6b. Vignette.
// 6b. Halation — the stock's own highlight bleed (see HALATION_SKSL): the
// highlights above the threshold, tinted the emulsion's halo colour and
// blurred wide, screened back over the frame. It rides the GRAIN knob like
// the grain does, so GRAIN 0 is still a clean frame and the OFF/WEAK/STRONG
// chips still mean 0/3/6; a sensor stock carries none at any amount.
if (grainAmount > 0 && stock.halation > 0 && stock.halo > 0) {
const { halationEffect: effect } = effects();
const srcShader = paintShader ?? imageShaderOf();
const haloShader = effect ? own(effect.makeShaderWithChildren(halationUniformArray(stock), [srcShader])) : null;
if (haloShader) {
const haloPaint = own(Skia.Paint());
haloPaint.setBlendMode(Skia.BlendMode.Screen);
haloPaint.setAlphaf(stock.halation * (grainAmount / 10) * HALATION_MAX);
haloPaint.setShader(haloShader);
const sigma = halationSigma(width, stock);
haloPaint.setImageFilter(own(Skia.ImageFilter.MakeBlur(sigma, sigma, Skia.TileMode.Clamp, null)));
canvas.drawRect(Skia.XYWHRect(0, 0, width, height), haloPaint);
}
}
// 6c. Vignette.
if ((adjustments.vignette ?? 0) > 0) {
const v = Math.min(10, adjustments.vignette ?? 0) / 10;
const vignetteShader = own(Skia.Shader.MakeRadialGradient(