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).
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState, forwardRef, useImperativeHandle, type ComponentProps } from 'react';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions, AppState } from 'react-native';
|
||||
import { View, Text, StyleSheet, TouchableOpacity, useWindowDimensions, AppState, PixelRatio } from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
import { activateKeepAwake, deactivateKeepAwake } from 'expo-keep-awake';
|
||||
import { useCameraDevice, type CameraPhotoOutput } from 'react-native-vision-camera';
|
||||
@@ -33,6 +33,7 @@ import { Recipe, GPSInfo, FrameId, AspectRatio, ColorAdjustments, ASPECT_RATIO_W
|
||||
import { getSkiaColorMatrix, applyExposureGain } from '../utils/colorUtils';
|
||||
import { TONE_SKSL, getToneUniforms, toneUniformArray, GLOW_SKSL, glowUniformArray, GLOW_UNIFORMS, CLARITY_SKSL, clarityUniforms } from '../utils/toneShader';
|
||||
import { CINEMA_SKSL, getCinemaUniforms, cinemaOffFlat } from '../utils/cinemaShader';
|
||||
import { GRAIN_SKSL, GRAIN_SEED, grainCell } from '../utils/grainShader';
|
||||
import { polaroidLayout, wallframeLayout, WALLFRAME_PNG_W, WALLFRAME_PNG_H } from '../utils/frameUtils';
|
||||
import { applyPhotoRotation } from '../utils/skiaImage';
|
||||
import { detectTilt } from '../utils/horizon';
|
||||
@@ -194,14 +195,6 @@ export interface ViewfinderHandle {
|
||||
detectHorizon(): number | null;
|
||||
}
|
||||
|
||||
// Grain: value noise on a CELL of `u` canvas px rather than on the raw pixel
|
||||
// grid. A per-pixel hash gave the preview (a ~1080px rect) and the export (a
|
||||
// 4000px image) two different grains — the file's came out ~4x finer than
|
||||
// what was tuned on screen. Callers pass the rect's width / GRAIN_REF so both
|
||||
// hash at the same size relative to the picture; u = 1 (the preview) is exactly
|
||||
// the old per-pixel hash, since the smoothed cell fraction is 0 there. The
|
||||
// bilinear over the four cell corners is what makes a clump instead of a pixel
|
||||
// of static — at cell 1 it collapses back to the plain hash.
|
||||
// Every Skia object the per-frame worklet builds (paint, filter, shader) is a
|
||||
// native allocation; the UI runtime's GC does not reach them promptly, so a
|
||||
// preview left open piles up ~24 MB/minute that the device pays back as swap.
|
||||
@@ -219,23 +212,20 @@ const disposeTrash = (trash: SkTrash[]) => {
|
||||
}
|
||||
}
|
||||
};
|
||||
const noiseEffect = Skia.RuntimeEffect.Make(`
|
||||
uniform float u;
|
||||
float grainHash(vec2 q) {
|
||||
return fract(sin(dot(q, vec2(12.9898, 78.233))) * 43758.5453);
|
||||
// Monochrome grain — the shader and the roll of film live in
|
||||
// utils/grainShader.ts, shared with the export and the web build. All this file
|
||||
// decides is the CELL: canvas units here are dp, so a preview floors the cell at
|
||||
// one DEVICE pixel (GRAIN_MIN_CELL) rather than one dp — the old one-dp floor
|
||||
// pinned a 390dp-wide preview to a 3 device-pixel cell, i.e. grain 2.8x coarser
|
||||
// than the file's, which is the preview-vs-file mismatch in the other direction.
|
||||
const noiseEffect = (() => {
|
||||
try {
|
||||
return Skia.RuntimeEffect.Make(GRAIN_SKSL);
|
||||
} catch (e) {
|
||||
console.error('GRAIN_SKSL compile failed: ' + e);
|
||||
return null;
|
||||
}
|
||||
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);
|
||||
}
|
||||
`);
|
||||
})();
|
||||
|
||||
// Tone runtime effect (DR/Highlight/Shadow) for the live camera preview worklet.
|
||||
// Hoisted at module scope so the worklet runtime can capture it — same pattern
|
||||
@@ -1507,12 +1497,13 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
const grainOpacity =
|
||||
Math.min(10, Math.max(0, adjustments.grain) + Math.max(0, -(adjustments.denoise ?? 0))) / 20;
|
||||
|
||||
// Grain cell size: the noise hashes one cell per `rect.w / GRAIN_REF` canvas
|
||||
// px, so a ~1080px preview rect hashes per pixel and a 4000px export per ~4px
|
||||
// cell — the same grain at the same size relative to the picture (see
|
||||
// noiseEffect). Without this the exported grain was ~4x finer than the grain
|
||||
// the user had just tuned on screen.
|
||||
const GRAIN_REF = 1080;
|
||||
// Grain cell: one cell per 1/1080 of the PICTURE's width (grainShader.ts), so
|
||||
// the camera region, the library window and the file all show the same grain
|
||||
// at the same size relative to the picture — the export used to come out ~4x
|
||||
// finer, and the old one-dp floor made these previews ~3x coarser than the
|
||||
// file on a 3x screen. The floor is one DEVICE pixel: the finest a cell can
|
||||
// actually be drawn, past which the noise is sub-pixel and reads as static.
|
||||
const GRAIN_MIN_CELL = 1 / PixelRatio.get();
|
||||
|
||||
// Library-still viewer: pinch-zoom (2 fingers) + double-tap zoom at the tap
|
||||
// point / double-tap again to reset to 100%. Transform is a Skia matrix
|
||||
@@ -2799,7 +2790,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
>
|
||||
<Shader
|
||||
source={noiseEffect}
|
||||
uniforms={{ u: (framedWin ? framedWin.w : region.w) / GRAIN_REF }}
|
||||
uniforms={{ u: grainCell(framedWin ? framedWin.w : region.w, GRAIN_MIN_CELL), seed: GRAIN_SEED }}
|
||||
/>
|
||||
</Rect>
|
||||
</Group>
|
||||
@@ -3129,7 +3120,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
{grainOpacity > 0 && noiseEffect && (
|
||||
<Group blendMode="overlay">
|
||||
<Rect x={win.x} y={win.y} width={win.w} height={win.h} opacity={grainOpacity}>
|
||||
<Shader source={noiseEffect} uniforms={{ u: win.w / GRAIN_REF }} />
|
||||
<Shader source={noiseEffect} uniforms={{ u: grainCell(win.w, GRAIN_MIN_CELL), seed: GRAIN_SEED }} />
|
||||
</Rect>
|
||||
</Group>
|
||||
)}
|
||||
@@ -3187,7 +3178,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
{grainOpacity > 0 && noiseEffect && (
|
||||
<Group blendMode="overlay">
|
||||
<Rect x={win.x} y={win.y} width={win.w} height={win.h} opacity={grainOpacity}>
|
||||
<Shader source={noiseEffect} uniforms={{ u: win.w / GRAIN_REF }} />
|
||||
<Shader source={noiseEffect} uniforms={{ u: grainCell(win.w, GRAIN_MIN_CELL), seed: GRAIN_SEED }} />
|
||||
</Rect>
|
||||
</Group>
|
||||
)}
|
||||
@@ -3237,7 +3228,7 @@ const Viewfinder = forwardRef<ViewfinderHandle, ViewfinderProps>(function Viewfi
|
||||
{/* Grain covers the whole photo area — the contain rect of the
|
||||
library photo, the ratio band on the camera. */}
|
||||
<Rect x={frameRect.x} y={frameRect.y} width={frameRect.w} height={frameRect.h} opacity={grainOpacity}>
|
||||
<Shader source={noiseEffect} uniforms={{ u: frameRect.w / GRAIN_REF }} />
|
||||
<Shader source={noiseEffect} uniforms={{ u: grainCell(frameRect.w, GRAIN_MIN_CELL), seed: GRAIN_SEED }} />
|
||||
</Rect>
|
||||
</Group>
|
||||
)}
|
||||
|
||||
Reference in New Issue
Block a user