Real-Time 3D LUT Color Grader & Look Visualizer

Desktop-Grade Color Grading on the Open Web

Color grading is the process of altering and enhancing the color balance, dynamic range, and tonal aesthetic of motion picture footage or still photography. Traditionally, applying standard 3D Look-Up Tables (LUTs) required launching heavyweight nonlinear video editors (NLEs) such as DaVinci Resolve, Adobe Premiere Pro, or Final Cut Pro. QuickCoderHub’s in-browser color grading studio brings real-time 3D lattice color transformations to any modern web browser using hardware-accelerated WebGL 2.0, delivering zero-latency previews, interactive split-screen evaluation, and zero-cloud rendering.

How 3D Look-Up Tables (.CUBE) Function

Unlike a simple 1D LUT or tone curve (which maps individual red, green, and blue values in isolation without cross-channel awareness), a 3D LUT organizes color transformations as a three-dimensional spatial cube lattice. Each dimension corresponds to an axis in RGB space:

• Lattice Dimensions: Standard .cube files define a regular grid of size \(N \times N \times N\), such as \(17 \times 17 \times 17\) (4,913 nodes), \(33 \times 33 \times 33\) (35,937 nodes), or \(65 \times 65 \times 65\) (274,625 nodes).
• Trilinear Interpolation: Because real video pixel colors rarely land exactly on a discretized lattice coordinate, the GPU hardware performs real-time trilinear interpolation across the 8 bounding lattice vertices enclosing the pixel's coordinate, producing smooth continuous gradient transitions with zero contour banding.
• Non-Linear Cross-Channel Remapping: 3D LUTs can compress highlights, expand shadow details, simulate analogue film stock spectral responses (such as Kodak Vision3 5219 or Fuji Velvia 50), and map skin tones into natural warm zones while preserving saturated background greens and blues.

Client-Side WebGL 2.0 Pipeline Architecture

When you drop a 4K video or photo into QuickCoderHub:

1. Lattice Parsing: The browser parses ASCII .cube tokens into a contiguous IEEE 754 float array, ignoring comment markers (#), extracting metadata tags (LUT_3D_SIZE, DOMAIN_MIN, DOMAIN_MAX), and loading RGB triplets in standard b → g → r row-major order.
2. 3D Texture Hardware Upload: In WebGL 2.0, the lattice data is uploaded as a native gl.TEXTURE_3D object with gl.LINEAR filtering enabled. Hardware texture filtering units compute trilinear interpolation in a single GPU cycle.
3. Unified Fragment Shader: A single high-performance fragment shader processes the video or image frame at up to 60+ FPS, blending exposure adjustment, contrast S-curves, Kelvin white balance matrix multiplication, procedural PRNG film grain, and 3D LUT look blending.
4. Split-Screen Fragment Divider: The interactive split slider evaluates pixel coordinates against the draggable divider position: rendering unmodified linear source pixels to the left and color-graded pixels to the right.

Frequently Asked Questions