three.js Path-Tracing-Render 광선추적 랜더링(실사랜더링)

See the Pen Untitled by topofweird (@topofwerid) on CodePen.

 

 

결론적으로 three.js 간접광 구현은 생각보다 힘들었다. three.js 홈페이지에 구현된 예시와 달리 4가지 부분의 조합이 필요한 탓에 엄청 헤맬 수 밖에 없는 구조다. 코드에서 샘플값을 임의로 설정하지 않으면 pc의 그래픽카드 성능에 따라 엄청난 속도차이가 발생할 것으로 보인다.(흡사 실행 안 되는 것처럼 보임)

 

1] HDR 배경맵 > three.js environtMap 활용

2] GLSL > 쉐이더 PBR머트리얼  

3] Ray tracing >  gpu-pathtracing-render api 활용

4] 3D Models > Web Worker, 멀티 쓰레드 활용

 

위와 같이 gpu-pathtracing api를 사용하는 경우, (PBR 쉐이더에서) specular맵을 지원하지 않는 탓에 에러가 계속 발생한다.(결국, specular맵은 제외했음) 만일 api를 사용하지 않고 path tracing랜더를 제대로 구현하려면, glsl 쉐이더 코드에 관한 아주 탄탄한 기본기가 필요할 듯 하다. (하지만 3D 제작자가 glsl쉐이더를 직접 제작하는 방법은 시간 낭비) gpu-path-tracing api보다 더 잘 나올 가능성도 낮을 뿐더러, 위와 같이 자바스크립트 비동기 싱글 쓰레드 방식을 웹워커로 보완하기 때문에 속도 역시 그렇게 느리지 않기 때문이다. 웹워커 부분을 어떻게 사용할 것인지에 따라 속도는 보완할 수 있다. (generateAsync.worker.js)

 

어쨌든 웹에서도 3D툴에서 사용하는 간접광 방식(Global illumination)을 구현할 수 있으며, 샘플값만 낮춘다면 범용 사용이 가능할 것 같다. js를 깊게 모르더라도 위의 전체코드 중 main.js부분만 변경하는 방식으로 충분히 응용할 수 있다.  

 

 

 

*three.js Path tracing renderer 관련 참고자료

 

1 three-gpu-pathtracer 라이브러리

https://github.com/gkjohnson/three-gpu-pathtracer?tab=readme-ov-file

GitHub - gkjohnson/three-gpu-pathtracer: Path tracing renderer and utilities for three.js built on top of three-mesh-bvh.

 

 

2 pathTracing Renderer Test 소스

https://github.com/erichlof/THREE.js-PathTracing-Renderer

GitHub - erichlof/THREE.js-PathTracing-Renderer: Real-time PathTracing with global illumination and progressive rendering, all o