Three.js r184, HTMLTexture 도입: 살아있는 DOM을 3D 표면으로
Three.js r184가 이번 주에 나왔습니다. 핵심은 새로운 HTMLTexture 클래스인데, 살아있는 HTML 요소를 Three.js에 넘겨 메시 위 텍스처로 쓸 수 있게 해줍니다. 버튼은 그대로 클릭되고, 입력란은 그대로 포커스되며, CSS 애니메이션도 계속 돌아갑니다. 접근성과 IME는 브라우저가 평소처럼 알아서 처리합니다.
Three.js HTMLTexture를 떠받치는 HTML-in-Canvas API에 대한 Chrome 공식 소개
한 문단으로 보는 HTMLTexture
HTMLTexture는 Chrome 146의 HTML-in-Canvas API를 감쌉니다. DOM 요소를 넘겨주면 Three.js가 canvas에 layoutsubtree를 설정하고, 그 요소를 렌더러의 DOM에 붙인 다음, 래스터화된 출력을 THREE.Texture로 투영합니다. 이 텍스처는 WebGL 2나 WebGPU의 어떤 머티리얼에서든 샘플링할 수 있습니다. 공식 예제(webgl_materials_texture_html와 webgpu_materials_texture_html)에는 서식 있는 텍스트, 이미지, SVG, 작동하는 입력란, 버튼이 들어 있습니다.
실제로 이건 React 컴포넌트, 디자인 시스템 위젯, 비디오 플레이어, 차트, 혹은 통째로 임베드한 페이지까지 Three.js 장면 안의 곡면 화면, 빌보드, UI 패널 위에 올릴 수 있다는 뜻입니다. "캔버스에 래스터화하고 나면 상호작용은 잊는다"는 흔한 절충 없이 말이죠.
걸리는 점
이 기능은 바탕이 되는 API가 있는 곳에서만 켜집니다. 지금으로선 chrome://flags/#canvas-draw-element 플래그를 켠 Chromium 146 이상이 그곳이고, 따라서 운영 사이트에는 여전히 폴백이 필요합니다. 이 PR은 API가 없을 때 HTMLTexture가 우아하게 실패하도록 해서 길을 열어두지만, 완전히 상호작용 가능한 Three.js 대시보드를 클라이언트에 약속하기 전에 기능 감지를 해두는 편이 좋습니다.
Safari와 Firefox는 일정을 밝히지 않았습니다. WebGPU 자체가 2025년 말에야 세 브라우저 전부에서 기준선에 도달한 걸 생각하면, HTML-in-Canvas도 비슷한 2년 정도의 궤적을 따를 가능성이 큽니다.
Three.js 래퍼가 나오기 전 커뮤니티가 만든 HTML-in-Canvas 데모
또 하나의 변화: 프레임당 할당 제로
덜 화려하지만 사실 더 중요한 변화는 렌더러의 핫 패스에 있습니다. r184 이전에는 메시 1,000개를 60 FPS로 렌더링하면 초당 240,000개에서 500,000개의 일회성 객체가 할당될 수 있었습니다. 그러면 오래 도는 장면마다 가비지 컬렉터가 그걸 떠안아야 했죠. r184는 핵심 렌더 루프에서 이런 할당을 없앴습니다. 오래 가는 WebXR 세션, 객체가 빽빽한 건축 뷰어, 그리고 첫 30초를 넘겨 살아남는 어떤 장면이든 프레임 타임에서 실질적인 이득을 공짜로 얻습니다.
짚어둘 만한 작은 변화들
AnimationAction은 이제 생성 시 보간 설정을 보존해서, timeScale을 뒤집어도 더는 튀지 않습니다. AudioLoader는 더 이상 로딩 매니저와 경합하지 않습니다. BatchedMesh와 InstancedMesh는 색이 설정되지 않았을 때 getColorAt에서 더 이상 예외를 던지지 않습니다. 폐기되었던 WebGL 인스턴싱 렌더 경로는 완전히 제거됐습니다. 예제에는 SSGI 볼 풀, 3D Tiles 로더 위의 볼류메트릭 구름, 롤러코스터 카메라의 뱅킹이 추가됐습니다.
우리라면 이걸로 무엇을 할까
Cinevva 입장에서 가장 흥미로운 사용처는 reels 플레이어와 크리에이터 도구의 캔버스 위 UI입니다. 지금은 HTML을 Three.js 위에 합성합니다. HTMLTexture가 있으면 채팅 오버레이, 에셋 브라우저, 프롬프트 입력란을 키보드 내비게이션을 잃지 않고 모두 장면 안의 지오메트리 위에 올릴 수 있습니다. 이 API가 Chrome 안정판에서 플래그 없이 출시되는 즉시, 기능 플래그로 감싼 변형을 붙일 계획입니다.