중력 렌즈 블랙홀
webgl
- WebGL2
- GLSL
- 셰이더
- 레이마칭
- 시뮬레이션
코드
1<!DOCTYPE html>
2<html lang="ko">
3 <head>
4 <meta charset="UTF-8" />
5 <meta name="viewport" content="width=device-width, initial-scale=1.0" />
6 <title>중력 렌즈 블랙홀</title>
7 <link rel="stylesheet" href="./style.css" />
8 </head>
9 <body>
10 <canvas id="gl">중력 렌즈 블랙홀 데모</canvas>
11 <p id="fallback" hidden></p>
12 <div id="hint">드래그로 궤도 회전 · 휠로 거리 조절</div>
13 <script src="./script.js"></script>
14 </body>
15</html>
16아이디어
블랙홀 근처에서는 빛조차 직진하지 못한다. 화면의 모든 픽셀에서 광자 하나를 쏘고, 그 경로를 측지선(geodesic)으로 수치 적분한다. 광자는 질량에 끌려 휘고, 사건의 지평선에 닿으면 영영 빠져나오지 못한다.
핵심 코드
각운동량 h²를 보존량으로 두고, 매 스텝 광자 속도에 곡률 가속도를
더한다. r⁻⁵ 항이 광자구(photon sphere) 주변의 급격한 휘어짐을 만든다.
1vec3 h = cross(pos, vel); 2float h2 = dot(h, h); 3// 매 스텝: 4vec3 accel = -1.5 * h2 * pos / pow(dot(pos, pos), 2.5); 5vel += accel * dt; 6pos += vel * dt;
광자가 적도면을 가로지르면 강착원반을 샘플링하고, 지평선 안으로 들어가면 검게 칠한다. 빠져나간 광자는 휘어진 방향으로 별빛을 본다.
인터랙션
드래그로 카메라가 블랙홀 궤도를 돈다. 휠로 거리를 조절한다. 가만히 두면 천천히 자동 공전한다.