Three.js Blocks

Home
Documentation
Examples
Tools

filmHD

@three-blocks/coreWebGPUWebGL
filmHD(inputNode : Node, options : FilmHDOptions) : FilmHDNode

Cinematic film grain with blue noise, scanlines, and temporal stability.

Features

  • Temporally stable grain (no flickering) using blue noise + white noise blend
  • Shadow-weighted grain (more visible in darks via grainResponseNode)
  • Animated scanlines for CRT/film look
  • Frame interpolation for smooth temporal evolution
  • Artist-friendly controls for all parameters

Algorithm

  • Blends blue noise (65%) + white noise (35%) for quality grain
  • Per-frame jitter and rotation for temporal variation
  • Luminance-based weighting (darks get more grain)
  • Optional scanline overlay with sine wave
Parameters
inputNodeNode
Source color buffer.
optionsoptionalFilmHDOptions
Optional configuration nodes (defaults: intensity=0.82, grainScale=1.5, grainSpeed=12.0, grainResponse=0.85, grainContrast=1.25, scanlineIntensity=0.075, scanlineFrequency=900.0).
Default is {}.
Returns
FilmHDNode — Film grain effect node.
Type Definitions

FilmHDOptions#

intensityNode:Node, grainScaleNode:Node, grainSpeedNode:Node, grainResponseNode:Node, +6 more
Properties
intensityNodeoptionalNode
Grain intensity [0..1].
grainScaleNodeoptionalNode
Grain density multiplier.
grainSpeedNodeoptionalNode
Temporal evolution speed.
grainResponseNodeoptionalNode
Shadow weighting [0..1] (1=more grain in darks).
grainContrastNodeoptionalNode
Grain contrast multiplier.
scanlineIntensityNodeoptionalNode
Scanline blend amount [0..1].
scanlineFrequencyNodeoptionalNode
Scanline frequency (lines per unit).
blueNoiseLevelNodeoptionalNode
Blue noise recursion level for quality.
timeNodeoptionalNode
Override time input for animation control.
uvNodeoptionalNode
Custom UV coordinates.
Example
import { filmHD } from '@three-blocks/core';
import { pass, uniform } from 'three/tsl';

const scenePass = pass(scene, camera);

const grainEffect = filmHD(scenePass, {
  intensityNode: uniform(0.8),      // Strong grain
  grainScaleNode: uniform(1.5),     // Fine grain
  grainSpeedNode: uniform(12.0),    // Moderate animation
  grainResponseNode: uniform(0.85), // More grain in shadows
  scanlineIntensityNode: uniform(0.075), // Subtle scanlines
  scanlineFrequencyNode: uniform(900.0)
});

postProcessing.outputNode = grainEffect;