Spark – THREE.js를 위한 실시간 3D 가우시안 스플래팅

소개

Spark는 3D 장면을 작고 흐릿한 "스플랫(splats)"의 집합으로 표현하는 최신 기술인 가우시안 스플래팅을 브라우저로 가져오는 오픈 소스 렌더러입니다. 인기 있는 THREE.js 그래픽 라이브러리에 직접 플러그인할 수 있어, 개발자는 고품질의 시점 의존적 포인트 클라우드 렌더링을 모든 웹 기반 3D 앱에 추가할 수 있습니다.

중요성

기존의 메시 파이프라인은 특히 모바일 하드웨어에서 매우 밀도가 높은 지오메트리를 대화형 프레임 속도로 표시하는 데 어려움을 겪었습니다. 가우시안 스플랫은 지오메트리, 색상, 불투명도, 심지어 학습된 특징까지 컴팩트한 형태로 저장하여 GPU에서 효율적으로 래스터화할 수 있습니다. Spark는 이 연구 수준의 렌더링 방식을 휴대 가능하고 WebGL2와 호환되는 라이브러리로 패키징하여, 웹 개발자가 네이티브 코드나 무거운 서버 측 처리 없이도 최첨단 시각적 충실도를 구현할 수 있게 합니다.

핵심 기능 (README 설명 기준)

THREE.js 통합 – SparkRenderer와 SplatMesh는 표준 THREE.js 장면, 카메라, 조명과 함께 작동하는 드롭인 객체입니다.
광범위한 기기 지원 – 저전력 모바일을 포함하여 WebGL2를 지원하는 98% 이상의 브라우저를 타겟팅합니다.
빠른 실시간 렌더링 – 스플랫이 GPU에서 정렬 및 래스터화되므로 보급형 하드웨어에서도 부드러운 애니메이션이 가능합니다.
다중 형식 가져오기 – PLY(압축 변형 포함), SPZ, SPLAT, KSPLAT 및 SOG 파일에 대한 네이티브 로더를 지원합니다.
다중 시점 – 여러 카메라 시점을 동시에 렌더링할 수 있어 VR/AR 또는 다중 창 설정에 유용합니다.
동적 편집 – 스플랫은 런타임에 변환, 애니메이션, 색상 변경, 변위 또는 스키닝이 가능합니다.
셰이더 그래프 시스템 – GLSL을 수동으로 작성하지 않고도 사용자 지정 스플랫 셰이더를 만들 수 있는 GPU 측 노드 편집기입니다.

시작하기 (빠른 시작 코드)

README는 다음을 수행하는 최소한의 HTML 페이지를 제공합니다:

CDN을 가리키는 import-map을 통해 THREE.js와 Spark를 로드합니다.
THREE.js 장면, 카메라 및 WebGL 렌더러를 생성합니다.
SparkRenderer를 인스턴스화하고 장면에 추가합니다.
샘플 스플랫(butterfly.spz)을 SplatMesh로 로드하고 애니메이션을 적용합니다.

<script type="module">
  import * as THREE from "three";
  import { SparkRenderer, SplatMesh } from "@sparkjsdev/spark";
  // …장면 설정…
  const spark = new SparkRenderer({renderer});
  const butterfly = new SplatMesh({url: "https://sparkjs.dev/assets/splats/butterfly.spz"});
  // 회전 애니메이션
</script>

브라우저에서 실행하면 GPU 가속이 적용된 회전하는 스플랫 모델이 표시됩니다.

설치 옵션

CDN – https://sparkjs.dev/releases/spark/<version>/spark.module.js에서 빌드된 모듈을 직접 가져옵니다.
npm – 번들러나 Node 기반 워크플로우의 경우 npm install @sparkjsdev/spark를 사용합니다.
로컬 빌드 – 저장소를 복제하고 Rust(WebAssembly 코어용)를 설치한 후 다음을 실행합니다:
```
npm install
npm run build:wasm   # Rust → WASM 컴파일
npm run build        # JS/TS 번들링
```
저장소에는 샘플 에셋을 다운로드하고 개발 서버를 실행(npm start)하는 스크립트도 포함되어 있습니다.

개발 워크플로우

README에는 유용한 스크립트가 나열되어 있습니다:

npm run clean – 생성된 파일을 삭제합니다.
npm run assets:download / assets:clean – 샘플 에셋을 관리합니다.
npm run docs – MkDocs 기반 문서를 빌드합니다.
npm run site:* – 정적 웹사이트를 빌드, 서비스 또는 배포(gh-pages)합니다.
npm run assets:compress <file> – PLY 스플랫을 SPZ 형식으로 압축합니다.

개발 팀

Spark는 AI 기반 3D 콘텐츠 제작에 중점을 둔 기업인 World Labs (https://www.worldlabs.ai)에서 개발했습니다. 이 프로젝트는 MIT 라이선스를 따르며 npm에서 @sparkjsdev/spark 패키지로 게시됩니다.

결론: Spark는 THREE.js를 통해 최신 가우시안 스플래팅 렌더링 기술을 웹으로 가져오는 진정한 프로덕션 준비 완료 라이브러리입니다. AI 생성 3D 에셋, 실시간 그래픽, 그리고 브라우저 내에서 고품질 포인트 클라우드 시각화가 필요한 모든 프로젝트에 적합합니다.

sparkjsdev/spark