Golden Temple

A golden-hour Japanese temple complex built entirely in code with three.js, rendered offline into a 70-second 1080p60 film.

Watch the film

golden-temple-1080p60.mp4 is attached to the latest release: 70 seconds, 1920×1080, 60 fps, H.264, with music. The video is not stored in the repository.

What this is

Everything you see is code. The repository contains no 3D models, no texture files, no HDRIs and no image assets. The buildings, roof tiles, bracket sets, gold fittings, statues, trees, lotus, koi, water, terrain, clouds and sky are all generated by JavaScript when the page loads, and every surface is procedural GLSL injected into three.js's physically based materials. The few textures the scene uses, such as foliage atlases and terrain masks, are computed or drawn onto canvases at load time. The only third-party runtime library is three.js (r186).

• About 31,000 lines of JavaScript build a scene of 24.4 million triangles.
• The world is deterministic. Every random choice comes from a seeded generator, so each load builds exactly the same scene.
• The film has 10 shots of 7 seconds each. Every shot opens on a macro close-up of one detailed object and pulls back to reveal the scene around it.
• The film is rendered one frame at a time in headless Chrome. Each frame averages 8 sub-frames, which gives anti-aliasing, motion blur, soft sun shadows and noise-free ambient occlusion.
• The music is the one element that is not code: "Finding Movement" by Kevin MacLeod, licensed under CC BY 4.0. It is not included in the repository; a script downloads it (see Music).

Gallery

All stills are single frames from the finished film.

Quick start

Requirements:

• Node.js 22 or newer
• A browser with WebGL 2 for the interactive preview. The headless tools need Chrome or Edge; they find it automatically, or you can set the CHROME environment variable to the executable.
• ffmpeg on PATH for contact sheets, the film and the music

git clone https://github.com/Leonxlnx/golden-temple.git
cd golden-temple
npm install
npm run dev

Open http://localhost:5173/. The first load builds the whole world and compiles its shaders, which can take a few minutes on an integrated GPU the first time (shaders are cached afterwards). The status line in the top-left corner shows progress.

The page is controlled by URL parameters:

For example, http://localhost:5173/?shot=0&t=5&w=1920&h=1080&spp=8 renders the frame at the top of this page.

Rendering stills

tools/snap.mjs drives headless Chrome on your GPU. It loads the page once, builds the world once, then renders any number of views and saves each one as a PNG. Keep npm run dev running in another terminal.

# one still
node tools/snap.mjs "shot=0&t=5&w=1920&h=1080&spp=8" out/shot1.png

# several views from one page load
node tools/snap.mjs "w=1920&h=1080&spp=8" --view "shot=3&t=0.5" out/bell.png --view "shot=6&t=6.9" out/sanctum.png

# contact sheet of all 10 shots at three moments each -> out/sheets/review.jpg
node tools/sheet.mjs --t 0.5,3.5,6.5 --tag review

sheet.mjs also takes --shots 0,4,9, --w, --h, --spp and --extra "<query>" for post overrides. A lock file in out/ serialises GPU use, so tools started at the same time wait for each other.

Environment variables for the headless tools: CHROME sets the browser executable, ANGLE sets the ANGLE backend (d3d11 by default on Windows, the browser's default elsewhere), and VITE_PORT sets the dev-server port if you run Vite on a port other than 5173.

Rendering the film

npm run dev                     # terminal 1
node tools/render.mjs --w 1920 --h 1080 --fps 60 --spp 8 --out out/temple.mp4   # terminal 2

The page renders each frame, reads the pixels back and posts them to the Node process, which pipes raw RGBA into ffmpeg (libx264, CRF 14, preset slow, BT.709). Nothing is written to disk between the GPU and the encoder.

Measured on the machine that made the film, a laptop with an AMD Radeon 780M integrated GPU:

• building the world and compiling the shaders takes about 2 minutes with a warm shader cache. The first headless run on a fresh clone has no cache yet and can take about 8 minutes; later runs reuse the cache in out/.chrome-profile;
• a 1080p frame with 8 sub-frames takes about 3.3 seconds;
• the full film (4,200 frames) takes about 4 hours, including cool-down pauses.

The renderer idles 60 ms after every frame and rests for 15 s every 250 frames, so an integrated GPU does not run flat out for hours. These pauses add about 8 minutes to the full film. To change them, pass page parameters through --extra, for example --extra "cool=0&restEvery=0".

Useful options:

• --from N --to M renders only frames N to M−1. tools/splice.mjs puts a re-rendered segment back into a finished film, frame-accurate.
• --spp 2 --w 960 --h 540 makes a quick draft.
• --crf and --preset set the x264 quality.

Music

The track is not redistributed in this repository. Download it, then edit it to the 70-second cut and mux it onto your render:

npm run fetch-music
node tools/score.mjs --video out/temple.mp4 --out out/temple_final.mp4

fetch-music downloads the MP3 from incompetech.com into assets_audio/, which git ignores, and checks it against the file the edit was timed with. score.mjs joins two sections of the track with a crossfade so that the string crescendo lands on the cut at 0:28 and the biggest hit lands on the cut to the Buddha at 0:42. It then normalises loudness to −16 LUFS and muxes the result as AAC. The video stream is copied, not re-encoded.

If you share a film made with this music, credit it as shown in Credits.

The film's 10 shots