Insights
AI가 자동으로 큐레이션·번역·정리하는 기술 동향 피드입니다.
THREE.js 기반으로 브라우저에서 실시간 클래식 레이 트레이싱 기능을 구현한 렌더러입니다. 실제 반사, 굴절, 심도 효과 등을 WebGL 프레임워크 위에 성공적으로 적용했습니다. 데모를 통해 다양한 기하학적 모양과 재질에 대한 고성능 광선 추적 및 조명 처리를 보여줍니다.
AI 자동 생성 콘텐츠
본 콘텐츠는 GitHub GameDev의 원문을 AI가 자동으로 요약·번역·분석한 것입니다. 원 저작권은 원저작자에게 있으며, 정확한 내용은 반드시 원문을 확인해 주세요.
원문 바로가기브라우저에서 모든 장치에 실시간 클래식 레이 트레이싱을 구현했습니다. 실제 반사, 굴절, 심도 효과(depth of field)를 모두 Three.js WebGL 프레임워크 위에 구현했습니다. <br> <br>
<h4>빠른 사용법 안내</h4>데스크톱: 아무 곳이나 마우스 클릭하여 마우스를 포착한 후, 일반적인 마우스 이동 및 WASD/QZ 키로 1인칭 카메라를 제어합니다. 마우스 휠은 확대/축소에 사용합니다. O와 P 키는 직교(Orthographic) 및 원근(Perspective) 카메라 모드를 전환합니다. 왼쪽/오른쪽 화살표 키는 카메라의 조리개 크기(심도 효과 블러 효과)를 제어하며, 위/아래 화살표 키는 카메라로부터 초점 거리(Focal point distance)를 제어합니다. ESC 키로 종료하고 마우스 포인터를 반환합니다.
모바일: 스와이프하여 1인칭 카메라를 회전시킵니다. 네 개의 큰 화살표 버튼은 카메라 이동을 제어합니다. 가로 핀치(pinch)는 확대/축소에 사용합니다. 세로 핀치는 카메라의 조리개 크기(심도 효과 블러 효과)를 제어합니다. 두 개의 작은 위/아래 화살표 버튼은 카메라로부터 초점 거리를 제어합니다. 직교 카메라 모드는 GUI 체크박스를 통해 켜고 끌 수 있습니다.
Classic Geometry Showcase Demo는 클래식 레이 트레이싱 도형(구체, 평면 등)을 보여주면서 RayTracing Renderer의 주요 기능을 선보입니다: 실제 반사, 굴절, 픽셀 단위 그림자(pixel-perfect shadows), 그림자 코스틱(shadow caustics), 그리고 네 가지 다른 재질 유형(Phong, Metal, ClearCoat, Transparent)이 모두 작동합니다. 이 모든 것이 셀폰에서도 60fps로 구동됩니다! <br>
Quadric Shapes Demo는 방향성 광원(태양과 같은)을 포함하며, Quadric Shapes 계열의 모든 모양(구체, 원통, 원뿔, 포물면, 쌍곡면 등)을 시연합니다. 모든 객체는 간편한 Three.js 라이브러리 유형 호출로 인스턴스화됩니다. 각 모양은 자체 변환(크기 조정, 위치, 회전, 전단)뿐만 아니라 자체 재질 및 UV 좌표를 가집니다. 이 모든 정보가 유니폼을 통해 GPU에 공급됩니다. 마지막으로, 레이 트레이싱 프래그먼트 셰이더(GPU에서 실행됨)는 이 모든 데이터를 받아 각 Quadric 모양에 대해 광선 추적(raycasts)을 수행하고, 모든 반사, 굴절 및 방향성 광원으로부터의 직접 조명(및 그림자)을 처리한 다음, 엄청나게 빠른 속도로 아름다운 레이 트레이스 이미지를 화면에 전송합니다! <br>
Instance Mapping Demo 이전에 범프 매핑(bump mapping)에 대해 들어보셨을 수 있지만, 제가 개발한 이 새로운 기술은 한 단계 더 나아가 부모 객체의 표면을 따라 실제로 새 인스턴스화된 지오메트리를 생성합니다. 예를 들어, 큰 구체 부모 객체로 시작할 수 있으며, 광선이 해당 부모 구체를 교차할 때 교차점의 UV 좌표가 기록됩니다. 그런 다음 더 작은 모양(예: 아주 작은 구체)이 그 정확한 UV 좌표에서 표면 밖으로 생성됩니다. 부동 소수점 UV 좌표를 위아래로 크기 조정/반올림함으로써, 부모 표면 전체에 걸쳐 많거나 적은 수의 작은 자식 모양을 나타나게 할 수 있습니다. 이제 일반 맵이나 범프 매핑처럼, 카메라를 부모 모양의 실루엣 가장자리를 따라 이동할 때 착시 현상이 깨지지만(결국 부드러운 구체일 뿐!), 우리는 현실적인 조명을 가진 레이 트레이싱의 힘을 사용하기 때문에 나타나는 모든 작은 모양은 반사, 굴절 및 그림자를 갖춘 실제 레이 트레이스 객체처럼 작동합니다!
이것은 일반 맵(normal maps)이나 전통적인 범프 매핑(bump mapping)으로는 얻을 수 없는 결과입니다. 가장 좋은 점은 카메라 광선(camera rays)이 GPU에서 이 작은 모양들(tiny shapes) 전체를 병렬로 생성하기 때문에, 표면을 따라 수천 개 또는 수백만 개의 추가 모양이 나타나는 비용을 지불할 필요가 없다는 것입니다. 단지 옆면의 모양에 그림자를 드리우는 데 도움이 되는 몇 개의 인접한 작은 모양만 더하면 됩니다. 저는 이 독특한 광선 추적(raytracing) 방법을 무엇이라고 불러야 할지 확신이 서지 않아, 일단 이 기술을 '인스턴스 매핑(Instance Mapping)'이라고 이름 붙였습니다. 이 이름이 부모 모양의 표면을 따라 일어나고 있는 현상을 간결하게 설명한다고 생각합니다. 즐겁게 사용해 보세요! <br><br>RayTracerChallenge
Intro_To_Ray_Tracing
위 이미지는 고전 서적 『An Introduction To Ray Tracing』의 표지입니다(저도 소장하고 있습니다!). 이 상징적인 표지 이미지가 저에게 영감을 주어, Three.js RayTracing Renderer 내에서 이 클래식 장면을 재현해보고자 했습니다. 저는 단순히 이 이미지의 모습과 느낌을 되살리는 것뿐만 아니라, 어떤 장치에서도 실시간(60 fps)으로 카메라를 움직이고 장면을 돌아다닐 수 있기를 바랐습니다—심지어 휴대폰에서도요! 이 클래식 장면과 그 출처가 된 훌륭한 책에 대한 저의 오마주를 기쁘게 선보입니다:
Whitted_1979
1970년대 후반 Bell Labs에서 근무하며 이제는 유명해진 논문 An Improved Illumination Model for Shaded Display를 작성하던 J. Turner Whitted은 재귀 광선 추적(recursive ray tracing, 일명 'Whitted 스타일' 광선 추적)이라는 완전히 새로운 기법을 개발했습니다. 반사 법칙(The Law of Reflection), 스넬의 굴절 법칙(Snell's Refraction Law), 그리고 램버트 코사인 법칙(Lambert's Cosine Law)(확산 조명용)과 같은 광학 법칙들을 따라, Whitted은 체커보드 평면과 구체들이 사진처럼 사실적인 반사, 굴절, 그리고 픽셀 단위의 그림자를 특징으로 하는 몇 가지 상징적인 이미지를 만들 수 있었습니다. 그가 새로운 재귀 광선 추적 기법으로 달성한 현실감의 수준은 전체 CG 커뮤니티를 충격에 빠뜨렸습니다. 아무도 컴퓨터로 생성된 이미지에서 이 정도의 사실감을 본 적이 없었기 때문입니다! Whitted은 이 광선 추적 이미지를 자신의 논문에 포함시킨 후(나중에 1980년 6월에 출판됨), 컴퓨터 세계에서 빠르게 유명해졌습니다. 이후 다가올 SIGGRAPH 컨퍼런스 제출을 위해, Whitted은 개별적인 광선 추적 이미지들의 애니메이션 시퀀스를 만들기로 결정했습니다. 그리하여 최초의 광선 추적 애니메이션이 탄생하게 된 것입니다!
Vintage 1979 Video: 'The Compleat Angler' by J. Turner Whitted
비록 이 영화는 부드러운 애니메이션처럼 보이지만, 1979년에는 개별 프레임 하나를 렌더링하는 데 약 45분이 걸렸습니다! 오늘날로 시간을 빠르게 돌려 WebGL 2.0과 GPU의 병렬 처리 능력을 사용하여, 같은 상징적인 장면을 브라우저에서 초당 60프레임으로 렌더링한 것을 확인해 보세요! : <br>
제 GitHub 저장소는 1980년대에 Turner Whitted를 유명하게 만든 'Whitted 스타일' 레이 트레이싱 방식을 충실히 따릅니다. 저는 그의 재귀적(recursive) 레이 트레이싱 기법을 사용하여, 수십 년 전 Whitted가 했던 것처럼 사실적인 반사(reflection), 굴절(refraction), 그리고 날카로운 그림자를 처리합니다. 제 기술이 Whitted의 기술과 달라지거나 발전하는 유일한 부분은 Hall Shading 모델(1980년대 또 다른 영향력 있는 CG 연구원인 Roy Hall의 이름을 따서 명명됨)을 사용한다는 점입니다. Hall의 모델은 Fresnel 방정식을 통합하여 투명(Transparent) 및 ClearCoat 표면에서 반사되는 빛의 양과 전송되거나 굴절되는 빛의 양을 정확하게 표시함으로써 Whitted의 기술을 발전시킵니다. 또한 Hall의 모델은 투명 물체로부터 오는 그림자 코스틱(caustics)을 추가하는데, 이는 진정한 경로 추적(path-traced) 코스틱은 아니지만 그 자체로 시각적으로 흥미롭습니다.
<br>
1983_Hall_TheGallery
시간은 1983년이며, CG 그래픽 연구원 Roy Hall이 Whitted의 재귀적 레이 트레이싱 기술을 기반으로 개선한 자신만의 모델인 Hall Shading Model을 개발했습니다. Hall은 SIGGRAPH 1983 아트 쇼를 위해 The Gallery라는 이름의 위 이미지를 만들었습니다. 이 이미지는 벽과 카펫의 스포트라이트에 의한 부드러운 확산 감쇠(soft diffuse fall-off), 금속(Metals)에서 오는 색상 음영 반사(Whitted의 기술을 개선함), 그리고 큰 거울(거울의 우측 상단 부분)에 있는 부드러운 스포트라이트 하이라이트를 보여줍니다. 이 하이라이트는 거울 자체의 반사 속으로 점점 더 깊숙이 들어가는데, 이는 거울 표면에 미세한 먼지 층이 있는 것을 시뮬레이션하는 멋진 효과입니다. 저는 Hall의 고전적인 이미지에 매우 매료되어 이를 복제해 보기로 결정했습니다. 기쁜 소식은 제가 Hall의 아름다운 장면을 재현했을 뿐만 아니라, 브라우저에서 심지어 휴대폰에서도 60 FPS라는 실시간으로 구현할 수 있게 되었다는 것입니다.<br>
홀은 이 장면을 다른 카메라 각도에서 렌더링하여 그의 책 『Illumination and Color in Computer Generated Imagery』의 표지로 사용했습니다:
Hall_IlluminationAndColorInCGImagery