three.wasm은 기존 three.js 라이브러리를 WebAssembly로 완전히 재작성하여 고성능 3D 그래픽 렌더링을 구현하는 새로운 프레임워크를 제안한다. 이 프로젝트는 JavaScript가 가진 가비지 컬렉션(GC) 일시 정지, JIT(Just-In-Time) 컴파일러 웜업 시간 등의 성능 제약을 극복하는 것을 목표로 한다.

핵심 방법론은 다음과 같다:
three.js의 기능을 WebAssembly 바이너리로 포팅한다. 이 바이너리는 총 크기가 10KB로, 기존 three.js의 175KB 대비 크게 줄어든다. 이 접근 방식은 JavaScript 의존성을 완전히 제거하여, 웹 브라우저 환경에서 최소한의 오버헤드로 동작하도록 설계되었다.

기술적으로, three.wasm은 WebAssembly의 고유한 특성들을 활용한다:

• 저수준 제어 및 성능: WebAssembly는 JavaScript와 달리 저수준의 바이너리 형식으로, CPU에 더 가깝게 실행될 수 있다. 이는 특히 행렬 계산(matrix math)과 같은 연산 집약적인 작업에서 네이티브(native)에 가까운 속도를 보장한다.
• 선형 메모리 및 GC 없음: WebAssembly는 자체적인 선형 메모리 공간을 사용하며, JavaScript의 가비지 컬렉터에 의존하지 않는다. 이로 인해 불필요한 GC 일시 정지가 없어 부드러운 애니메이션과 높은 프레임률을 유지할 수 있다.
• 정적 타입 시스템: WebAssembly는 명령어 레벨에서 i32, i64, f32, f64와 같은 명확한 타입을 강제한다. 이는 런타임 시 동적 타입 검사 오버헤드를 없애고, 컴파일러가 더 효율적인 머신 코드를 생성하도록 돕는다.
• WebGL2 파이프라인: 3D 렌더링은 WebGL2 렌더링 파이프라인을 직접 활용한다. 이는 WebAssembly 모듈 내에서 WebGL2 API에 대한 직접적인 호출을 구현함으로써 달성된다.

사용자는 JavaScript 코드 스니펫을 통해 three.wasm을 로드하고 활용할 수 있다. WebAssembly.instantiateStreaming을 사용하여 three.wasm 바이너리를 스트리밍 방식으로 로드하고 인스턴스화한다. 인스턴스화된 WebAssembly 모듈의 exports 객체를 통해 init() 및 update(time, aspect)와 같은 함수를 호출하여 3D 장면을 초기화하고 업데이트한다.

성능 지표로는 스피닝 큐브(spinning cube) 단일 객체 렌더링 시 480+ fps를 달성한다고 명시되어 있으며, 이는 three.wasm이 기존 JavaScript 기반 3D 프레임워크 대비 압도적인 성능 향상을 제공함을 시사한다. 이 프로젝트는 웹 환경에서 고성능 3D 그래픽 구현의 새로운 가능성을 제시한다.