Interactive 3D Moon with real NASA data and WebGPU

Name: Interactive 3D Moon with real NASA data and WebGPU
Availability: InStock
Author: oddurs

by oddurs·Feb 24, 2026·3 points·0 comments

Visit Project View on HN

AI Analysis

●●●BangerWizardryEye CandyNiche Gem

Oren-Nayar BRDF solves opposition surge correctly where standard PBR fails completely.

Strengths

•Correct regolith shading model (opposition surge backscatter) beats standard PBR approaches
•Geodetic quadtree LOD with screen-space error metrics matches CesiumJS production quality
•NASA data + accurate sun position astronomy-engine (±1 arcminute) creates scientifically grounded visualization

Weaknesses

•Narrow audience: mostly interesting to graphics nerds and astronomy buffs
•Quadtree only goes 7 levels deep (~4km/pixel max zoom), incomplete coverage at highest detail

Post Description

A photorealistic Moon viewer running entirely in the browser. WebGPU primary renderer with WebGL 2 fallback.

- NASA CGI Moon Kit textures served via a quadtree LOD tile system - Oren-Nayar BRDF (lunar regolith is non-Lambertian with strong backscatter) - Sun position calculated from astronomy-engine (±1 arcminute) - Scrub through the full lunation cycle or watch in real time - Earth and Tycho-2 starfield in the background

Tech: Three.js with TSL shaders (compile to both WGSL and GLSL), React Three Fiber, Vite. The shading model was the most interesting part — standard PBR looks completely wrong for the Moon because regolith doesn't have a specular lobe; it actually gets brighter at opposition (the "opposition surge"). Oren-Nayar gets close enough for a web visualization.

Tile system is a geodetic quadtree similar to CesiumJS's approach. Zoom level picks based on screen-space error. Currently 7 levels deep which gets you to ~4 km/pixel at max zoom.

Would love feedback, especially from anyone who's worked with lunar data or WebGPU in production.