학습 데모: 2D 가우시안 피팅. 3DGS와 같은 앞→뒤 알파 합성으로 그리고, 손으로 유도한 역전파 + Adam으로 이미지 한 장에 맞춤. 밀도 제어(복제·분할·제거)는 Kerbl 외(2023) 방식
3D 장면: WebGL2 인스턴스 렌더링. 셰이더에서 Σ′ = J W Σ Wᵀ Jᵀ 투영(EWA), 화면 공분산에 0.3 더함, 3σ 사각형, CPU 카운팅 정렬(16비트) 후 앞→뒤 합성
학습 설정(정한 값): 이미지 96×96, 시작 64개, 최대 500개(100·250 선택 가능), 2,000단계, 손실 MSE, 배경 검정, 깊이 순서는 가우시안마다 고정 난수. 학습률: 위치 0.4 → 0.032 px(지수 감소), 크기·회전 0.03, 불투명도 0.05, 색 0.04. 100단계마다 밀도 제어(200~1,400단계), 위치 기울기 평균 문턱 1×10⁻⁶, 큰 쪽 표준편차 1.92 px 넘으면 분할(크기 ÷1.6), 아니면 복제, 불투명도 1% 미만 제거. 3σ 밖과 α 1/255 미만은 건너뜀, α 최대 0.99, 투과율 10⁻⁴에서 멈춤, 타일 16×16 px
학습 여부: 직접 학습(방문자 브라우저의 Web Worker에서 매번 처음부터) · 사전 학습 없음 · 시드 1 고정이라 같은 그림이면 같은 결과
3D 장면 데이터: 코드로 배치한 가우시안 13,350개(행성 7,000 · 고리 5,000 · 달 650 · 별 700), 시드 20261025. 학습한 장면 아님
글꼴: Gowun Batang, IBM Plex Sans KR, IBM Plex Mono · SIL OFL 1.1 · Google Fonts
■ 이력
2026-10-25 · v1.0 · 공개
How it's built — Splat School · v1.0 · 2026-10-25
gaussian.aileelab.com
■ Method
Training demo: 2D Gaussian fitting. Rendered with the same front-to-back alpha blending as 3DGS and fitted to one image with hand-derived backpropagation + Adam. Densification (clone, split, prune) follows Kerbl et al. (2023)
3D scene: WebGL2 instanced rendering. The shader projects with Σ′ = J W Σ Wᵀ Jᵀ (EWA), adds 0.3 to the screen covariance, draws a 3σ quad; CPU counting sort (16-bit) then front-to-back blending
Training settings (chosen values): 96×96 image, 64 Gaussians at start, max 500 (100 or 250 selectable), 2,000 steps, MSE loss, black background, a fixed random depth per Gaussian. Learning rates: position 0.4 → 0.032 px (exponential decay), scale and rotation 0.03, opacity 0.05, color 0.04. Densify every 100 steps (steps 200–1,400) at a mean position-gradient threshold of 1×10⁻⁶; split (scale ÷1.6) if the larger standard deviation exceeds 1.92 px, else clone; prune below 1% opacity. Skip beyond 3σ and α under 1/255, cap α at 0.99, stop at transmittance 10⁻⁴, 16×16 px tiles
Training: trained directly, from scratch every time, in a Web Worker in the visitor's browser · no pretraining · seed fixed at 1, so the same image gives the same result
3D scene data: 13,350 Gaussians placed by code (planet 7,000 · ring 5,000 · moons 650 · stars 700), seed 20261025. Not a trained scene
Software: browser JavaScript (no libraries) · measured with Node.js v22.23.4 and Playwright 1.63.0 (headless Chromium) · run 20261024T172917Z
No LLM. Text written by hand; every number is computed by code
■ Data
Three example images (sunset, shapes, striped ball): drawn by code (samples.js), 4×4 supersampling, 96×96
Nature: hand-made (synthetic)
Paper figures (table in lesson 1): copied from the Mip-NeRF360 columns of Kerbl et al. (2023), Table 1
No user input is stored. An uploaded photo is downscaled to 96×96 inside the browser and sent nowhere
■ Validation
Gradient check: 32×32, 12 Gaussians, 96 of 108 parameters compared. With the 3σ and 1/255 cutoffs disabled, the maximum relative error between analytic gradients and central differences is 0.19%. With cutoffs on, up to 8.8% (the same approximation as the original, which ignores terms crossing the cutoff)
Conditions: Node.js, 96×96, 2,000 steps, max 500, seeds 1, 2, 3. Baselines = a square mosaic with the same count (√N×√N cells of average color) and one flat average color
Sunset: Gaussians 50.99–52.88 dB (348–383) / mosaic 27.23–27.50 dB / average color 15.83 dB / densification off (64) 35.66–36.27 dB
Shapes: 54.76–55.81 dB (500) / 23.42 dB / 11.75 dB / 28.17–28.69 dB
Striped ball: 51.45–52.63 dB (500) / 21.24 dB / 12.43 dB / 31.40–32.79 dB
Real photos (scikit-image samples astronaut, coffee, chelsea; center square at 96×96; seed 1; test only): 29.28 / 34.73 / 34.00 dB (500) · mosaic 17.31 / 19.61 / 23.39 dB · average color 10.41 / 12.21 / 18.09 dB
Speed: about 16–60 ms per step in Node (depends on count). About 26–28 ms per step in headless Chromium (1280×900), about 700 steps in 9 seconds
Train/test split: not applicable (the demo fits one image, so the training image is the evaluation image)
Screens: no horizontal scroll at 1280×900 and 390×844, zero console errors. Zero untranslated strings in the English version (#en)
■ Scope
One 96×96 RGB image, 64–500 Gaussians, 2,000 steps. No 3D reconstruction, camera estimation or SH degrees 1–3
3D viewer: 13,350 Gaussians, camera distance 2.4–12
■ Sources
Kerbl, Kopanas, Leimkühler & Drettakis (2023). 3D Gaussian Splatting for Real-Time Radiance Field Rendering. ACM Transactions on Graphics 42(4).