WebGI ยท real-time rendering

Realistic lighting, live in the browser

WebGI adds screen-space global illumination (SSGI) and reflections (SSR) to three.js scenes. Light bounces off walls, floors and objects on every frame, so a scene looks lit without lightmaps baked in Blender. Every image and video on this page comes from a browser tab.

Videos

Recorded frame by frame from the live demos, one rendered frame per video frame, temporal filters included.

SSGI + SSR vs standard lighting

Split screen: standard lighting on the left, WebGI SSGI + SSR on the right, same camera, same frame.

Procedural miniature worlds

A kit of diorama tiles on a studio backdrop, each one generated in code at load time and lit live with SSGI.

Peaks: a hill-climb game

Real-time realistic lighting in WebGI means fast prototyping: no Blender, no baking. A backflip on the alpine stage, the kicker and coins of Meadow Run, the plank bridge and the autumn forest. Play it in the browser.

Drag to compare

Same camera, same frame. Left: standard lighting (direct light, shadows and environment light). Right: WebGI SSGI + SSR. Drag the line.

Barcelona Pavilion with WebGI SSGI and SSR Barcelona Pavilion with standard lighting Standard lightingWebGI SSGI + SSR

Barcelona Pavilion

The roof underside goes from flat grey to warm white with the light off the sunlit travertine. Live: 29 ms per frame at 1920x1080 on an Apple M4 Pro.

Open live
Temple on the sand with WebGI SSGI and SSR Temple on the sand with standard lighting Standard lightingWebGI SSGI + SSR

Temple on the sand

Golden hour. The columns and the cella wall warm up with the bounce off the sand. Live: 27 ms per frame at 1920x1080 on an Apple M4 Pro.

Open live
Sun Temple, hall with WebGI SSGI and SSR Sun Temple, hall with standard lighting Standard lightingWebGI SSGI + SSR

Sun Temple, hall

Sun on the floor of the hall lights the walls, the columns and the far end. Live: 30 ms per frame at 1920x1080 on an Apple M4 Pro.

Open live
Vehicle studio with WebGI SSGI and SSR Vehicle studio with standard lighting Standard lightingWebGI SSGI + SSR

Vehicle studio

The red wall bounces onto the car and the floor. SSR adds the reflections in the glossy floor. Live: 22 ms per frame at 1920x1080 on an Apple M4 Pro.

Open live
Gothic cathedral with WebGI SSGI and SSR Gothic cathedral with standard lighting Standard lightingWebGI SSGI + SSR

Gothic cathedral

Procedural nave. Sun through the stained glass reaches the piers and the vaults. Live: 39 ms per frame at 1920x1080 on an Apple M4 Pro.

Open live
Classroom with WebGI SSGI and SSR Classroom with standard lighting Standard lightingWebGI SSGI + SSR

Classroom

Sun through the windows. GI fills the ceiling and the far wall with bounce light. Live: 34 ms per frame at 1920x1080 on an Apple M4 Pro.

Open live
Moroccan riad, salon with WebGI SSGI and SSR Moroccan riad, salon with standard lighting Standard lightingWebGI SSGI + SSR

Moroccan riad, salon

Light from the courtyard comes in through the arch and warms the plaster. Live: 60 ms per frame at 1920x1080 on an Apple M4 Pro.

Open live
Golden Temple, sanctum with WebGI SSGI and SSR Golden Temple, sanctum with standard lighting Standard lightingWebGI SSGI + SSR

Golden Temple, sanctum

The gilded altar, lit by sun shafts and lanterns. Live: 64 ms per frame at 1920x1080 on an Apple M4 Pro.

Open live

Each live demo has a "Compare split" slider in its panel, so you can make the same comparison while the camera moves.

Miniature-world tiles

Each tile is generated in code when it loads: terrain, strata, water, roads and the layout of the props. Scanned rocks, plants and props come from Poly Haven (CC0). Frame times: 1920x1080 on an Apple M4 Pro, camera orbiting.

Desert mesa34 ms per frame Alpine pass29 ms per frame Autumn forest road33 ms per frame Glacier crevasse30 ms per frame Moon outpost25 ms per frame Neon night town21 ms per frame Volcano rim32 ms per frame Spring falls30 ms per frame Farm41 ms per frame Oil field and docks56 ms per frame Switchback savanna50 ms per frame Rice terraces40 ms per frame Backwater bayou51 ms per frame Open-pit mine35 ms per frame Beach89 ms per frame Canyon53 ms per frame

Open the live demos

Each link opens the scene live in your browser. A desktop GPU gives the best frame rate; large scenes take a few seconds to build.

PeaksHill-climb game Vehicle interfaceCar configurator UI GalleryEvery scene, GI off and on Gothic cathedralProcedural Golden TempleProcedural Moroccan riadProcedural Temple on the sandGolden hour Cyclades villageProcedural ClassroomInterior, sun Palace atriumSponza with curtains Times SquareCity at night Barcelona PavilionArchitecture Sun TempleFire and sun slits Fireplace roomInterior, sun