SVG로 3D 복셀 씬을 구현하는 혁신적인 자바스크립트 엔진
heerich.js는 3D 복셀(Voxel)을 SVG로 렌더링하는 미니멀리스트 자바스크립트 엔진(Minimalist JavaScript Engine)임
박스(Box), 구(Sphere), 선(Line) 등 다양한 프리미티브(Primitive)를 지원하며, 부울 연산(Boolean Operations)을 통해 복잡한 형태 구현 가능
SVG의 DOM 통합(DOM Integration)을 활용하여 CSS 스타일링 및 무한대 스케일링(Infinite Scaling) 지원
애니메이션(Animation), 투명도(Transparency), 기능적 스타일(Functional Styles) 등 다양한 기능을 제공하며, 에르빈 헤리히(Erwin Heerich)의 기하학적 영감(Geometric Inspiration)을 받음
SVG 기반 렌더링의 장점
heerich.js는 3D 복셀 씬을 SVG로 렌더링하여 DOM과의 통합(DOM Integration)을 극대화한다. 이는 CSS 스타일링(CSS Styling)을 통한 시각적 커스터마이징(Customization)과 무한대 스케일링(Infinite Scaling)을 가능하게 한다. 또한, SVG는 픽셀 버퍼(Pixel Buffer)가 아닌 의미론적 마크업(Semantic Markup)이므로, 지속적인 유지 보수(Maintenance)와 접근성(Accessibility) 측면에서도 유리하다.
부울 연산(Boolean Operations)을 활용한 복셀 조작
heerich.js는 union, subtract, intersect, exclude와 같은 부울 연산(Boolean Operations)을 지원하여 복셀(Voxel) 형태를 정교하게 제어한다. 특히, subtract 모드를 활용한 구(Sphere)와 박스(Box)의 결합은 아치형 구조(Arched Doorways)를 쉽게 구현할 수 있게 한다. 이러한 기능은 복잡한 3D 형태를 프로그래밍 방식으로 조작(Programmatic Manipulation)할 수 있는 강력한 도구를 제공한다.
기능적 스타일(Functional Styles)을 통한 동적 스타일링
heerich.js는 각 복셀(Voxel)의 좌표를 기반으로 스타일을 동적으로 생성하는 기능적 스타일(Functional Styles)을 지원한다. 이를 통해 그라데이션(Gradients), 패턴(Patterns) 등 다양한 시각 효과(Visual Effects)를 구현할 수 있다. 특히, 각 면(Face)에 개별적인 스타일 함수(Style Function)를 적용하여 더욱 세밀한 표현이 가능하다.
애니메이션(Animation) 구현 및 성능 고려 사항
heerich.js는 자체적인 애니메이션 엔진(Animation Engine)을 내장하지 않고, 외부의 `requestAnimationFrame`을 통해 애니메이션을 제어한다. 이는 개발자가 유연하게 애니메이션을 구현(Flexible Animation Implementation)할 수 있도록 돕지만, 성능 최적화(Performance Optimization)를 위해서는 프레임당 렌더링(Per-Frame Rendering) 비용을 고려해야 한다. 예를 들어, 복셀의 제거(Removal)와 같은 연산은 성능에 영향을 줄 수 있다.
