Zohaib Nawaz
Abstract visualization of light rays and prism refraction in a dark minimal environment

WebGL Engine2024

Prism Trace

A WebGL path tracing engine running directly in the browser with real-time global illumination and physically-based rendering.

south

The Brief

Cinematic rendering in real-time.

Path tracing has traditionally been the domain of offline rendering farms. Prism Trace brings this technology to the browser, enabling real-time global illumination, soft shadows, and accurate material representation.

The engine uses progressive rendering techniques, starting with a noisy image that converges to photorealistic quality over time, all while maintaining interactive frame rates.

Technical Architecture

view_in_ar

Three.js

Scene management and camera controls providing a familiar API for 3D developers.

code

GLSL

Custom shaders implementing Monte Carlo path tracing with bidirectional rendering and importance sampling.

graphic_eq

WebGPU

Next-generation graphics API for compute-heavy ray tracing operations with explicit GPU control.

Photorealistic 3D render showing global illumination effects with soft shadows and reflections

Design for Immersion

Prism Trace demonstrates the potential of browser-based rendering for architectural visualization, product design, and interactive art. The engine handles complex lighting scenarios that previously required dedicated workstations.

Performance

60 FPS Interactive

Rays/Pixel

1024 Samples

Real-time path tracing demonstration with complex materials and dynamic lighting
Role

Graphics Engineer

Client

Research Project

Date

Q2 2024

Collaborators

Graphics Research Group WebGPU Community

Next Project

Aether Core

View Case Study east