Project LUMA — WebGL2 procedural video synthesis.

Real-time GLSL fragment shader engine exploring mathematical video generation, uniform-driven motion timelines, and deterministic frame capture.

Project LUMA WebGL2 shader synthesis viewport on desktop

Real-Time WebGL2 Shader Viewport

Synthesizes organic light fields and motion graphics at 60fps directly on the GPU without pre-rendered video files.

Live GLSL Fragment Evaluation

Continuous temporal uniform modulation driving procedural refraction and color grading.

Project LUMA orbital shader study

Orbital Distance Fields

Signed-distance field primitives blended with smooth minimum operators and rim lighting.

Project LUMA procedural phase T4 still

Uniform Timeline Modulation

Deterministic phase keyframes allow any timestamp to be reproduced with pixel accuracy.

Project LUMA frame export and encoding study

Frame Capture & Export

Captures high-bit-depth WebGL2 frames directly into master video sequences for product launches.

Product architecture and deliverables

How we structured the product, interface system, and engineering workflow.

Procedural Video via Fragment Shaders

Replaces heavy pre-rendered video files with real-time mathematical fragment evaluation in WebGL2.

  • Custom GLSL signed-distance and orbital light fields
  • Resolution-independent rendering at 60fps
  • Zero video compression artifacts in live viewports

Uniform-Driven Keyframe Choreography

Drives camera orbits, chromatic dispersion, and surface tension through deterministic uniform curves.

  • Scrubbable temporal uniform buffers (u_time, u_phase)
  • Smooth spring and bezier parameter interpolation
  • Live shader inspector and preset switching

Deterministic Frame Capture & Encoding

Steps the WebGL2 render loop frame-by-frame to export crisp motion sequences for launch films and keynotes.

  • Non-realtime deterministic frame buffer capture
  • Pan-DCT and bitrate tier benchmarking
  • Seamless handoff between web canvas and video master

Lightweight GPU Memory & Mobile Scaling

Caps device pixel ratio and manages shader precision so complex procedural scenes run smoothly across devices.

  • Adaptive pixel ratio scaling on mobile GPUs
  • Single-pass fragment pipeline with minimal draw calls
  • Clean fallback poster states for low-power mode

Start a project

Get started on your next product, website, or launch with our team.