PolyCSS: WebGL 없이 DOM으로 3D 메쉬 렌더링 가져오기

수년 동안 웹의 3D 그래픽 표준은 복잡한 장면을 렌더링하기 위한 고성능 파이프라인을 제공하는 WebGL(및 현재의 WebGPU)이었습니다. 그러나 이러한 기술은 별도의 canvas 컨텍스트에서 작동하여 3D 객체를 나머지 Document Object Model (DOM)으로부터 격리시킵니다. PolyCSS는 폴리곤 메쉬를 HTML 요소로 직접 렌더링하는 3D 엔진을 구현함으로써 이 패러다임을 변화시킵니다.

CSS matrix3d(...) 변환을 활용하여, PolyCSS는 개발자가 3D 기하학을 DOM의 일부로 다룰 수 있게 합니다. 이는 3D 면(face)이 표준 웹 레이아웃에 사용되는 것과 동일한 도구를 사용하여 스타일을 지정하고, 상호작용하고, 조작할 수 있음을 의미하며, UI 디자인과 인터랙티브 스토리텔링을 위한 새로운 가능성을 열어줍니다.

How PolyCSS Works: The DOM as a Renderer

캔버스에 픽셀을 그리는 전통적인 3D 엔진과 달리, PolyCSS는 각 가시적인 폴리곤을 DOM의 리프 요소(leaf element)로 방출합니다. 성능을 유지하기 위해 엔진은 폴리곤의 속성에 따라 가장 효율적인 CSS 프리미티브를 동적으로 선택합니다:

  • Solid Rectangles/Quads: 최대의 안정성을 위해 background: currentColor를 사용하는 <b> 요소를 사용합니다.
  • Triangles and Beveled Solids: corner-shape 또는 border-width 폴백을 활용하는 <u> 요소를 사용합니다.
  • Complex Solid Polygons: 브라우저 지원이 허용되는 경우 border-shape: polygon(...)을 사용하는 <i> 요소를 사용합니다.
  • Textured/Unsupported Shapes: background-image를 통해 패킹된 텍스처 아틀라스의 슬라이스를 매핑하는 <s> 요소를 사용합니다.

프리미티브가 선택되면 엔진은 matrix3d 변환을 적용하여 3D 공간에서 요소를 배치하고 회전시킵니다. 이 접근 방식은 브라우저의 레이아웃 엔진을 3D 래스터라이저로 효과적으로 전환합니다.

Core Features and Capabilities

PolyCSS는 유연하게 설계되었으며, 여러 산업 표준 형식과 현대적인 프론트엔드 프레임워크에 대한 지원을 제공합니다.

Model Support

엔진은 다음과 같은 다양한 3D 형식을 파싱하고 렌더링할 수 있습니다:

  • OBJ + MTL: 재질(materials) 및 map_Kd 텍스처에 대한 완전한 지원.
  • glTF / GLB: 임베디드 이미지 및 UV 좌표 지원.
  • MagicaVoxel (.vox): 복셀(voxel) 데이터를 위해 특별히 최적화된 빠른 경로.
  • Primitives: 박스, 구, 토러스, 실린더 및 플라톤 다면체(Platonic solids)를 위한 내장 생성 기능.

Framework Integration

PolyCSS는 다양한 개발 환경을 위한 전용 패키지를 제공합니다:

  • Vanilla JS: @layoutit/polycss를 통한 커스텀 요소 및 명령형 API.
  • React: @layoutit/polycss-react를 통한 <PolyCamera>, <PolyScene>, <PolyMesh>를 사용하는 컴포넌트 기반 모델.
  • Vue 3: @layoutit/polycss-vue를 통한 유사한 컴포넌트 기반 아키텍처.

Advanced Tooling

이 라이브러리의 가장 독특한 기능 중 하나는 Snapshot Export입니다. exportPolySceneSnapshot()를 사용하면 개발자는 렌더링된 장면을 복제하고, 모든 CSS 및 이미지 자산을 base64 데이터 URI로 인라인화하고, 런타임 스크립트를 제거할 수 있습니다. 그 결과는 클라이언트의 브라우저에서 PolyCSS 라이브러리를 로드할 필요 없이 3D 장면을 표시하는 독립형 HTML 문서입니다.

Technical Trade-offs: DOM vs. WebGL

모든 아키텍처적 선택과 마찬가지로, 3D 렌더링을 위해 DOM을 사용하는 것은 상당한 트레이드오프를 수반합니다. 주요 제약 사항은 마운트된 리프 요소의 수입니다. 모든 폴리곤이 DOM 노드이기 때문에, 고폴리곤 모델은 필연적으로 성능 저하를 초래할합니다.

Hacker News 커뮤니티에서는 이 접근 방식의 유용성에 대한 논쟁이 시작되었습니다. 한 사용자는 WebGL의 효율성을 고려할 때 프로젝트의 필요성에 대해 의문을 제기했습니다:

But why not use WebGL? It's widely available, more efficient, and can render at a much higher quality.

WebGL이 고충실도 게임이나 복잡한 시뮬레이션에는 객관적으로 우월하지만, PolyCSS의 가치는 DOM 통합에 있습니다. 각 폴리곤이 실제 HTML 요소이기 때문에, 개발자는 3D 모델의 특정 면에 표준 DOM 이벤트(예: onClick)를 직접 연결할 수 있습니다. 이는 클릭된 객체가 무엇인지 결정하기 위해 수동으로 레이캐스팅(ray-casting)을 수행해야 하는 canvas 기반 시스템에서 번거로운 구현을 가능하게 하는 수준의 세밀한 상호작용과 접근성을 제공합니다.

Conclusion

PolyCSS는 Three.js의 대체재라기보다는 전통적인 웹 레이아웃과 3D 기하학을 혼합하고 싶은 개발자를 위한 전문화된 도구입니다. CSS 기반의 복셀 에디터나 지형 생성기를 만드는 데 사용되는지 여부에 관계없이, 브라우저의 CSS 엔진은 2D 박스 그 이상의 훨씬 더 많은 것을 할 수 있음을 증명합니다.

Sources