THREE.js-PathTracing-Renderer

Three.js WebGL 프레임워크 위에서 전역 조명(global illumination)과 점진적 렌더링을 이용한 실시간 경로 추적(PathTracing) 구현.
<br> <br>

<h4>빠른 사용 가이드 (Quick Controls Notes)</h4>

• 데스크톱: 아무 곳이나 마우스 클릭하여 커서를 포착한 후, 일반적인 마우스 이동 및 WASD/QZ 키로 1인칭 카메라를 제어합니다. 마우스 휠은 확대/축소에 사용합니다. O와 P 키는 직교(Orthographic) 및 원근(Perspective) 카메라 모드를 전환합니다. 왼쪽/오른쪽 화살표 키는 카메라의 조리개 크기(심도 효과 블러, depth of field blur effect)를 제어하며, 위/아래 화살표 키는 카메라로부터 초점 거리(Focal point distance)를 제어합니다. ESC 키는 종료하고 마우스 포인터를 복구합니다.

• 모바일: 스와이프하여 1인칭 카메라를 회전시킵니다. 네 개의 큰 화살표 버튼은 카메라 이동을 제어합니다. 가로 방향으로 두 손가락을 오므리면(pinch) 확대/축소됩니다. 세로 방향으로 두 손가락을 오므리는 것은 카메라의 조리개 크기(심도 효과 블러, depth of field blur effect)를 제어합니다. 두 개의 작은 위/아래 화살표 버튼은 카메라로부터 초점 거리(Focal point distance)를 제어합니다. 직교 카메라 모드는 GUI 체크박스를 통해 켜고 끌 수 있습니다.

<h2 >실시간 데모 (LIVE DEMOS)</h2 >

• Geometry Showcase Demo는 광선 추적(ray tracing)을 위한 기본 도형들을 시연하며, 렌더러의 기능들—전역 조명, 실제 반사/굴절(true reflections/refractions), 바운스 조명(bounce lighting), 소프트 그림자(soft shadows), 코스틱(caustics), 그리고 모든 장치에서 30-60fps로 거의 즉각적인 이미지 수렴(near-instant image convergence)—을 보여줍니다!

• Ocean and Sky Demo는 광선 추적과 광선 전진(ray marching)을 혼합하여 현실적인 물리 하늘 아래의 거대한 잔잔한 바다를 모델링합니다. 이제 더 사진처럼 사실적인 절차적 구름(photo-realistic procedural clouds)이 추가되었습니다!

• Billiard Table Demo는 이미지 텍스처(.jpg, .png 등)를 로드하여 재질로 사용하는 지원을 보여줍니다. 당구대 천과 두 가지 유형의 나무 질감이 시연되었습니다.

• Cornell Box Demo: 이 데모는 유명한 구(舊) 코넬 박스(Cornell Box)를 렌더링하지만, 모바일에서도 30~60 FPS로 작동합니다!

비교를 위해, 원본 코넬 박스의 실제 사진과 three.js PathTracer로 렌더링한 결과물을 비교했습니다:

<br>

• Volumetric Rendering Demo: 먼지/안개 등의 부피(volume) 내부의 물체를 렌더링합니다. 왼쪽 유리 구체에서 나오는 멋진 부피 캐스틱(volumetric caustics)을 보세요. 거의 즉시 렌더링됩니다!

• Water Rendering Demo: 사진처럼 사실적인 물을 렌더링하고 파도를 30~60 FPS로 시뮬레이션합니다. 다른 전통적인 엔진/렌더러와 달리 삼각형 메시(triangle meshes)가 필요하지 않습니다. 코넬 박스는 표준 경로 추적(standard path tracing)을 사용하여 렌더링하는 반면, 물 표면은 레이 마칭(ray marching)을 통해 구현되었습니다.

• Light Shaft Demo: 부피 광선(volumetric light shafts), 즉 '신광(God rays)'이 발생하는 것을 시연합니다. 이는 광원(light sources)이 빛을 받는 영역(빛 샤프트, light shaft)을 제외한 모든 곳에서 차단될 때 발생합니다. 이러한 빛나는 부피와 주변 그림자 부피를 구분하여 보려면 연기, 안개, 대기 가스 등 매질(participating media)이 필요합니다. 이 장면에는 얇고 푸른 안개가 포함되어 있습니다.

<h3 id="natural-environment-ray-marching-demos">자연 환경 레이 마칭 데모</h3>

• Terrain Demo: 전통적인 레이 트레이싱(raytracing)과 레이 마칭을 결합하여 놀라운 실시간 야외 환경을 렌더링합니다! 지형은 절차적으로 생성되며 간단한 파라미터로 변경할 수 있습니다. 이 세계들에 대해 처리된 총 삼각형 수는 단지 2개입니다! (화면 크기 사각형(screen size quad) 기준) :-)

• Arctic Circle Demo 저는 레이 마칭 엔진으로 실험을 진행하며, 단순히 몇 가지 매개변수를 변경하여 어떤 종류의 환경을 구현할 수 있는지 알아보고 있었습니다. 장면이 처음 열릴 때 마치 북극 지방의 아주 먼 곳으로 이동한 듯합니다! 이 데모의 계절은 여름이며, 해가 지평선 아래로 완전히 지지 않는 것을 확인할 수 있습니다.

• Planet Demo (W.I.P.)는 레이 마칭(raymarching)과 레이 트레이싱(raytracing)을 극한으로 끌어올려 물리 기반 대기(physically-based atmosphere)를 가진 지구와 같은 행성 전체를 렌더링합니다! 아직 작업 중인 부분이 많지만, 지형은 절차적(procedurely generated)으로 생성됩니다. 산/호수가 너무 반복적이긴 하지만 (W.I.P.), 이 시뮬레이션은 패스 트레이싱(path tracing)의 강력함을 보여줍니다: 높은 궤도(5000 Km 고도)에서 행성 위를 떠 있다가, 아주 낮은 곳까지 내려와 단 하나의 바위나 호수 물결 위에 카메라를 착륙시킬 수 있습니다 (1 미터). 모든 행성/대기 측정은 실제 크기에 맞춰져 있습니다. 레이 트레이싱으로 가능한 디테일의 수준은 놀랍습니다!

<h3 id="bvh-acceleration-structure-demos">BVH 가속 구조 데모</h3>

• BVH Point Light Source Demo은 포인트 라이트(point light)를 사용하여 유명한 스탠포드 버니(Stanford Bunny, 30,000개 이상의 삼각형!)를 비추는 것을 시연합니다. 일반적으로 이렇게 어두운 장면에 매우 밝고 작은 광원이 있으면 노이즈가 심할 수 있지만, 무작위 직접광 타겟팅 덕분에 이미지가 거의 즉시 수렴합니다!

• BVH Spot Light Source Demo는 비슷한 장면이지만, 이번에는 공중에 있는 밝은 스포트라이트(spotlight)가 스탠포드 버니를 비추어 그를 장면에 주인공으로 만듭니다! 이 스포트라이트는 외부가 어두운 금속이고 내부는 반사되는 금속으로 만들어졌습니다. 체크무늬 바닥의 빛 감소(light falloff)에 주목하세요.

• Animated BVH Model Demo는 15,000개 이상의 삼각형을 가진 GLTF 모델과 정확한 PBR 재질(알베도, 에미시브, 메탈릭러프니스, 노멀 맵)을 로드하고 렌더링할 뿐만 아니라, 전체 모델과 그 BVH 구조를 실시간으로 변환하고 회전시킵니다! 리깅된 모델의 본 애니메이션을 로딩하고 레이 트레이싱하는 것은 아직 연구 중이지만, 강체(rigid) 모델이 임의로 움직이고, 회전하고, 크기가 조정되도록 만든 것은 패스 트레이싱 게임 엔진에 있어 엄청난 진전입니다!

• HDRI Environment Demo는 에퀴-직사각형(equi-rectangular) HDRI 맵을 로드하여 장면의 주변 환경으로 사용하는 방법을 보여줍니다. 이 데모에서는 또한 최적화된 BVH 가속기를 사용하여 100,000개의 삼각형으로 구성된 유명한 스탠퍼드 드래곤 모델을 로드하고 실시간으로 장면을 렌더링합니다! 저는 또한 재질과 색상 선택기를 추가하여 드래곤의 재질 유형(유리, 금속, 세라믹)뿐만 아니라 재질 색상도 끊김 없이 즉시 변경할 수 있도록 했습니다! 참고: 대용량 HDR 이미지를 다운로드하는 데 5~10초가 걸릴 수 있습니다

• BVH Visualizer Demo는 BVH 가속 구조의 내부를 들여다보고, 어떻게 다양한 축 정렬 경계 상자(axis-aligned bounding boxes)가 큰 주변 루트 노드 박스(레벨 0)부터 작은 리프 노드 박스(레벨 14+)까지, 그리고 그 리프 노드 박스 안에 포함된 모델의 개별 삼각형에 이르기까지 구축되는지 확인할 수 있게 해줍니다. 이 데모는 유명한 스탠퍼드 드래곤(100,000개 삼각형!)을 로드하고, BVH의 노란색 유리 경계 상자 안에 보라색 광원으로 렌더링합니다.<br>

• GLTF Model Viewer 이 멋진 뷰어는 glTF 형식의 모델을 로드할 뿐만 아니라, three.js의 RGBE.Loader를 사용하여 배경 및 전역 조명(global lighting)으로 등방직사각형 HDR 이미지를 로드합니다. 이 뷰어에 대한 n2k3 사용자님의 놀라운 기여에 깊이 감사드립니다! 그는 매끄러운 로딩 애니메이션뿐만 아니라 태양 각도, 태양 강도, 태양 색상, hdr 강도 및 hdr 노출을 변경할 수 있는 GUI 패널도 구현했습니다. <br>

• BVH Model Instancing Demo 이 데모는 glTF 모델을 로드하지만, 삼각형(triangle)으로 렌더링하는 대신 각 삼각형을 해당 모델의 완전히 새로운 작은 인스턴스로 대체합니다! 예를 들어, 데모는 약 1,000개의 삼각형 면을 포함하는 유명한 유타 티포트(Utah Teapot) 모델로 시작하며, 이 면들 각각이 자체적인 1,000개 삼각형을 가진 또 다른 작은 티포포트로 대체됩니다. 즉, 1,000개의 삼각형 * 1,000개의 메시 = 약 1백만 개의 폴리곤으로 구성되며, 이 모든 것이 브라우저에서 실시간으로 완전한 경로 추적(path traced)됩니다! 더 무거운 스탠퍼드 드래곤 모델은 100,000개의 삼각형을 가지고 있어, 100,000개의 삼각형 * 100,000개의 메시 = 셀폰에서도 브라우저에서 100억 개의 폴리곤이 됩니다! 이 광기에 더하여, 작은 인스턴스 각각은 자체적인 고유한 변환 행렬(transform matrix)을 작은 AABB 경계 상자 내에 가집니다. 이는 우리가 수천 개의 회전되고 위치가 지정되며 크기가 조정된 모델을 실시간으로 각자의 활동을 하도록 할 수 있다는 것을 의미합니다! 이것은 WebGL2의 힘에 대한 또 다른 증거입니다. 정말 저의 보잘것없는 BVH 시스템의 한계를 최대치로 밀어붙입니다. ;-)<br>

<h3>광선 추적 도형 데모 (Raytraced Shapes Demos)</h3>

위 이미지는 제가 브라우저 내에서 실시간으로 렌더링할 수 있는 분석적으로 광선 추적된(analytically ray-traced) 수학 도형들의 전체 라이브러리를 구현하기 위한 오랜 기간(그리고 여전히 진행 중인!) 여정의 영감원이었습니다. 이 이미지는 오래된 영화 잡지 기사에서 가져온 컴퓨터 화면 캡처본으로, 빈티지 CG 회사 MAGI가 1982년 영화 '트론(TRON)'을 위해 상징적인 이미지를 어떻게 만들었는지 보여줍니다. 저는 영화 개봉 당시 극장에서 이 영화를 봤습니다(저는 9살이었어요, 하하). 처음에는 디즈니 영화였기 때문에 그들의 아티스트들이 모든 멋진 장면과 공상과학 차량들을 손으로 그린 것이라고 생각했습니다. 하지만 엔딩 크레딧이 올라갈 때 '컴퓨터 이미지 및 애니메이션은 MAGI가 담당'이라고 적혀 있는 것을 봤습니다. 충격! 1980년대 초반 9살이었던 저는 영화에서 그런 것을 본 적이 없었습니다. 그들이 어떻게 모든 멋진 장면/차량들을 컴퓨터 안에서 만들었는지 이해조차 할 수 없었어요! 이 영화는 제게 컴퓨터 그래픽에 대한 깊은 흥미를 불러일으켰고, 거의 40년 후 제가 MAGI가 구현할 수 있었던 모든 도형들을 렌더링하는 여정의 목표를 달성하게 되어 기쁩니다! 수학에 관심 있는 분들을 위해 말씀드리자면, 이들은 모두 이차 곡선(quadric shapes)입니다. 즉, 암시적으로 정의될 수 있는 도형들(예: 단위 구: x² + y² + z² - 1 = 0)이며, 광선의 't' 값에 대한 이차 방정식으로 축소되어 컴퓨터가 쉽게 근을 찾아 빠르게 해(t₀, t₁)를 구할 수 있습니다. 이러한 수학적 기본 요소들을 사용하여 MAGI는 영화에 등장하는 모든 멋진 차량들을 구성할 수 있었습니다. 흥미로운 부연 설명이 하나 있습니다: 그들은 오늘날 CG 산업에서 사용하는 삼각형/폴리곤 모델링을 사용하지 않았습니다. 주로 픽셀 단위로 완벽하게 연속적인 곡선처럼 보이는 수학 도형들이었습니다. 또한 주목할 만한 점은 최종 애니메이션을 렌더링하는 데 광선 추적(ray tracing)을 사용했다는 것입니다. 각 프레임에 30분에서 수 시간이 걸렸습니다. 뭐, 이제는 이미지를 보기 위해 그렇게 오래 기다릴 필요가 없다는 것을 기쁘게 말씀드릴 수 있습니다. 제 도형들은 모바일에서도 브라우저 내에서 30~60 FPS로 렌더링됩니다.

😉

• Quadric Geometry Demo에서 다양한 이차 곡면(quadric) 수학적 레이 트레이싱 형태를 보여줍니다. 3D 이차 곡면 형태군은 가장 익숙한 수학적 3D 모양들인 구(ellipsoids), 원통(Cylinders), 원뿔(Cones)을 포함하며, 또한 파라볼로이드(Paraboloids), 쌍곡면(Hyperboloids), 쌍곡 포물면(Hyperbolic Paraboloids) 등 잘 알려지지 않은 형태들도 포함합니다.