Three.js r183: PostProcessing이 RenderPipeline으로
Three.js r183이 2월 18일에 출시됐는데, 보통의 포인트 릴리스보다 훨씬 큰 구조적 변화를 담고 있습니다. 가장 눈에 띄는 변화는 PostProcessing이 RenderPipeline으로 이름이 바뀐 것입니다. 단순한 이름 변경이 아닙니다. 이 클래스가 단순한 후처리 관리에서 여러 렌더링 패스와 히스토리 버퍼를 다루는 완전한 파이프라인 시스템으로 발전해 온 과정을 반영합니다.
Three.js WebGPU와 TSL 셰이더 노드 시스템 소개
RenderPipeline이 PostProcessing을 대체합니다
새로운 RenderPipeline 클래스는 WebGPURenderer를 위해 특별히 설계됐습니다. 전체 렌더링 파이프라인 설정과 후처리 효과 체인을 관리하며, outputNode를 통해 최종 출력을 정의합니다. outputColorTransform 속성은 기본 톤 매핑과 색 공간 변환을 제어합니다.
이 변화가 중요한 이유는 기존 PostProcessing이라는 이름이 오해를 부르고 있었기 때문입니다. 볼류메트릭 라이팅을 위한 시간적 안티앨리어싱(TRAA) 통합, 시간적 안정성을 갖춘 화면 공간 반사, HalfFloatType 출력 버퍼를 사용하는 HDR 파이프라인 지원까지 더해지면서, 이 클래스는 이미 후처리 이상의 일을 하고 있었습니다. 새 이름은 실제 모습과 맞아떨어집니다.
Clock 폐기, Timer 등장
Clock 클래스는 이제 폐기되고 새로운 Timer 클래스로 대체됩니다. 애니메이션 루프에서 Clock을 쓰고 있다면 마이그레이션을 시작하세요. 새로운 Timer는 같은 시간 추적 기능을 더 깔끔한 API로 제공합니다.
BatchedMesh에 인스턴스별 제어가 추가됩니다
BatchedMesh는 인스턴스별 불투명도와 와이어프레임 머티리얼 지원을 얻었습니다. 별도의 머티리얼을 만들지 않고도 개별 인스턴스를 페이드 인/아웃 해야 하는 오픈 월드 장면과 도시 건설 게임에는 의미 있는 추가 기능입니다. 또한 디버깅이나 스타일 효과를 위해 특정 인스턴스에만 와이어프레임 렌더링을 선택적으로 적용할 수 있다는 뜻이기도 합니다.
React Three Fiber와 함께하는 Three.js의 WebGPU 후처리
머티리얼 개선
MeshLambertMaterial와 MeshPhongMaterial가 이제 scene.environment 기반의 이미지 기반 라이팅(IBL)을 지원합니다. 예전에는 이 가벼운 머티리얼들이 앰비언트 라이팅에 환경 맵을 쓸 수 없어서 개발자들이 더 비싼 MeshStandardMaterial로 떠밀렸습니다. 이제는 PBR 정확도가 필요 없는 경우 레거시 머티리얼에서도 IBL을 쓸 수 있습니다.
MeshPhysicalMaterial는 사각 영역 광원에 대한 클리어코트 지원을 추가합니다. 영역 광원으로 비추는 자동차 도장면이나 광택 있는 표면을 렌더링한다면, 이제 클리어코트 레이어가 올바르게 반응합니다.
성능 최적화
Matrix4.decompose()는 이제 행렬식 계산 결과를 캐싱하고, invert()도 최적화됐습니다. 이 함수들은 객체가 많은 장면에서 프레임당 수천 번씩 호출되므로, 누적되는 절약량이 쌓입니다.
TSL 명세와 clipSpace 노드
Three.js r183은 공식 TSL 명세 문서(TSL.md)와 새로운 clipSpace 노드를 도입합니다. TSL(Three.js Shading Language)은 JavaScript로 셰이더 코드를 작성하면 WebGPU용 WGSL이나 WebGL용 GLSL로 컴파일해 주는 언어입니다. 새 명세는 노드 시스템의 API를 정식화해서 서드파티 라이브러리가 그 위에 무언가를 만들기 더 쉽게 합니다.
clipSpace 노드는 TSL에서 클립 공간 좌표에 직접 접근할 수 있게 해 주며, 화면 공간 효과나 커스텀 투영 기법에 유용합니다.