Three.js Blocks

Home
Documentation
Examples
Tools

traaHD

@three-blocks/coreWebGPUWebGL
traaHD(beautyNode : Node, depthNode : Node, velocityNode : Node, camera : THREE.Camera) : TRAANodeHD

Temporal Reprojection Anti-Aliasing for high-quality edge smoothing with motion.

Algorithm

  • Jitters camera each frame (32-sample Halton sequence)
  • Reprojects previous frame using velocity buffer
  • Clamps history to 3×3 neighborhood min/max (reduces ghosting)
  • Blends current frame with clamped history (adaptive blending)
  • Depth-based rejection for disoccluded pixels

Features

  • Excellent edge quality (rivals MSAA/SSAA)
  • Temporal stability (no flickering)
  • Motion-aware blending (reduces trails)
  • Disocclusion handling (depth-based rejection)
  • Optional super-resolution mode (>1x output resolution)

Requirements

  • Velocity buffer (built-in with Three.js WebGPU)
  • Depth buffer
  • Post-processing pipeline
Parameters
beautyNodeNode
Scene color texture (from pass).
depthNodeNode
Scene depth texture.
velocityNodeNode
Scene velocity texture (motion vectors).
cameraTHREE.Camera
Active camera (receives jitter).
Returns
TRAANodeHD — TRAA effect node with .superResolutionScale property.
See also
  • {@link https://alextardif.com/TAA.html}
  • {@link https://www.elopezr.com/temporal-aa-and-the-quest-for-the-holy-trail/}
Example
import { traaHD } from '@three-blocks/core';
import { velocity, pass } from 'three/tsl';

// Setup post-processing with TRAA
const scenePass = pass(scene, camera);
const scenePassVelocity = scenePass.getTextureNode('velocity');
const scenePassDepth = scenePass.getTextureNode('depth');

const traa = traaHD(
  scenePass,
  scenePassDepth,
  scenePassVelocity,
  camera
);

// Optional: enable super-resolution (experimental)
traa.superResolutionScale = 1.5; // 1.5x output resolution

postProcessing.outputNode = traa;