Overview
3DKit은 웹 기반 비즈니스 환경에서 거의 지연 없는(Near-Zero Latency) 인터랙션을 구현하기 위해 설계된 고성능 3D 표준입니다. 단순한 배포 도구를 넘어, 인터페이스에 엔지니어링 수준의 제어 권한(Engineering Authority)을 부여하는 기술 사양입니다.
고성능
Draco 및 KTX 2.0 기술을 활용하여 로딩 시간을 85% 이상 단축하면서도 안정적인 60FPS를 유지합니다.
간편한 통합
복잡한 3D 씬도 HTML 데이터 속성만으로 제어 가능한 직관적인 인터페이스를 제공합니다.
Basic Concepts
3DKit은 웹 환경에서 복잡한 3D 그래픽을 효율적으로 제어하기 위한 데이터 중심 프레임워크입니다. 아래 세 가지 핵심 개념을 이해하면 전체 시스템 구조를 파악할 수 있습니다.
에셋
3DKit 에셋은 단순한 3D 모델(GLB)이 아닙니다. 웹 런타임 성능을 극대화하기 위해 설계된 엔지니어링 데이터 패키지입니다.
정밀 제어
모든 에셋은 웹 환경에 최적화된 스케일 및 좌표계를 기준으로 구성됩니다.
내장 효율성
90% 이상의 압축 및 사전 베이킹 데이터로 즉시 렌더링이 가능합니다..
Data-Attribute Schema
코드를 직접 수정하는 대신, 3DKit은 선언형 방식을 채택하여 HTML 속성만으로 에셋을 제어할 수 있습니다.
관심사 분리
3D 디자인과 제어 로직을 완전히 분리합니다.
동적 바인딩
간단한 키워드만으로 인터랙션을 즉시 매핑합니다..
전달 전략
사전 준비된 에셋을 브라우저 렌더러에 최적의 순서로 전달하는 파이프라인입니다.
비동기 로딩
사용자 경험을 보호하기 위해 비동기 방식으로 로딩합니다.
자동 디코딩
GPU 부하를 최소화하는 최적의 디코딩 순서를 보장합니다.
Data-Attribute Schema
3DKit 라이브러리를 사용하면 별도의 자바스크립트 코드를 작성할 필요 없이, 단순히 HTML 태그에 속성을 정의하는 것만으로 3D 객체의 위치나 크기와 같은 상태를 제어할 수 있습니다.
| Attribute | Description | Default |
|---|---|---|
data-model-path |
3D 에셋(.glb)의 절대/상대 경로 | null |
data-auto-rotate |
오브젝트 자동 회전 여부 (true / false) | false |
data-intensity |
조명 및 환경 반사 강도 (0.0 ~ 2.0) | 1.0 |
data-scale |
초기 로드 시 오브젝트 스케일 | 1.0 |
<!-- 3DKit 선언형 구현 -->
<div class="3dkit-viewport"
data-model-path="/assets/hero_engine.glb"
data-auto-rotate="true"
data-intensity="1.5"
data-scale="0.8">
</div>Runtime Asset Pipeline
에셋을 Three.js 환경에서 직접 로드해야 하는 경우, 3DKit의 최적화 파이프라인(Draco Decoder)을 통해 처리하는 것을 권장합니다. ( 고성능 압축 기반 로딩, GPU 부하 최소화, 안정적인 60FPS 유지 )
// 3DKit 최적화 에셋 로딩 구현
import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader';
import { DRACOLoader } from 'three/examples/jsm/loaders/DRACOLoader';
// 1. 3DKit 표준으로 로더 초기화
const loader = new GLTFLoader();
const dracoLoader = new DRACOLoader();
// 2. 고성능 압축을 위한 디코더 설정
dracoLoader.setDecoderPath('/draco/gltf/');
loader.setDRACOLoader(dracoLoader);
// 3. 프로덕션 환경에 배포
loader.load('3dkit_asset_v1.glb', (gltf) => {
scene.add(gltf.scene);
console.log('3DKit Protocol: Asset successfully deployed with 60FPS optimization');
});Optimization Architecture
모든 3DKit 에셋은
메쉬 구성 → 파일 압축 → 렌더링 연산의 3단계 파이프라인을 통해 생성됩니다.
각 단계는 독립적으로 동작하지 않고 긴밀하게 통합되어
최종 성능을 결정합니다.
Mesh & Topology
Blender Scene Statistics
Objects : 36
Vertices : 23,455
Edges : 45,083
Faces : 21,749
Triangles : 43,670
클린 쿼드 토폴로지
모든 모델은 Blender 환경에서 수작업 리토폴로지됩니다. 삼각형 폴리곤을 제거하고 쿼드 기반 흐름을 유지하여 런타임에서의 쉐이딩 왜곡을 원천적으로 방지합니다.
최적화된 버텍스 밀도
곡률을 유지하는 최소한의 버텍스만 유지하여 CPU ↔ GPU 간 데이터 전송량을 75% 이상 절감합니다.
Compression & Baking
드라코 메시 압축
Google Draco 알고리즘을 적용하여 표준 GLB 대비 최대 90%까지 파일 크기를 감소시킵니다.
라이트맵 베이킹 전략
실시간 조명 계산을 사전에 베이킹하여 GPU 렌더링 부담을 제거하고 모바일에서도 안정적인 품질을 보장합니다.
Integration
3DKit은 최신 웹 생태계와 완전히 호환되도록 설계되었습니다. 코어 엔진을 수정하지 않고도, 최소한의 코드로 고급 3D 환경을 구축할 수 있습니다.
01. 선언형 접근 방식 (No-Code/Low-Code)
복잡한 자바스크립트 없이 HTML 데이터 속성만으로 3D 씬을 제어합니다.
<!-- 최소 설정 예제 -->
<div class="3dkit-viewport"
data-model-path="/assets/hero_engine.glb">
</div>
02. 프레임워크 통합 (React / Next.js Hook Pattern)
컴포넌트 라이프사이클에 최적화된 Hook 패턴을 제공하여 안정적인 렌더링과 효율적인 리소스 관리를 지원합니다.
import { useEffect, useRef } from 'react';
import { KitEngine } from '@3dkit/core';
export const FinancialHero = () => {
const canvasRef = useRef(null);
useEffect(() => {
// 3DKit 최적화 엔진 초기화
const engine = new KitEngine(canvasRef.current, {
asset: '/assets/finance_hero_v1.glb',
quality: 'high-performance',
autoAnimate: true
});
// 컴포넌트가 언마운트되면 GPU 리소스를 즉시 해제
return () => engine.dispose();
}, []);
return <div ref={canvasRef} className="h-screen w-full" />;
};
모든 통합 패턴에는 hydration 방지 로직이 기본적으로 포함되어 있으며, SSR(Server-Side Rendering) 환경에서 발생하는 일반적인 hydration 문제를 줄이는 데 도움을 줍니다.
라이선스 및 사용 정책
3DKit은 웹 환경에서 안정적이고 고성능의 3D 렌더링을 제공하기 위해 설계되었습니다. 본 정책은 프로토콜 및 에셋의 사용 범위를 정의합니다.
자세히 보기 ↗