WebAR에서 Neural4D 모델 사용하는 방법

1단계: 웹 성능을 위해 GLB 내보내기 및 최적화

WebAR 경험은 높은 시각적 충실도와 강력한 최적화를 함께 구현해야 모바일 네트워크에서도 빠른 로딩 속도를 유지할 수 있습니다. .glb(바이너리 GLTF) 형식은 WebAR의 업계 표준입니다.

Neural4D Studio에서 내보낼 때 시스템이 다음과 같은 실무용 표준을 자동으로 적용합니다:

표준	효과
Draco 압축	디테일 손실 없이 지오메트리 데이터 크기를 최대 90%까지 줄입니다.
KTX2 텍스처 인코딩	GPU 메모리에 맞게 텍스처를 최적화하여 저사양 기기에서 브라우저가 충돌하는 것을 방지합니다.

2단계: 크로스 플랫폼 WebAR 뷰어 구현

Android(Scene Viewer)와 iOS(AR Quick Look)에서 일관된 경험을 제공하려면 Google의 <model-viewer> 라이브러리를 사용하는 것이 좋습니다.

먼저 HTML 헤더에 라이브러리를 포함합니다:

<script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.4.0/model-viewer.min.js"></script>

그런 다음 다음의 반응형 설정을 사용해 Neural4D 모델을 삽입합니다:

<model-viewer 
    src="path/to/neural4d_model.glb" 
    ios-src="path/to/neural4d_model.usdz"
    ar ar-modes="webxr scene-viewer quick-look" 
    camera-controls 
    poster="poster.webp" 
    shadow-intensity="1" 
    auto-rotate>
    <button slot="ar-button" class="ar-button">View in your space</button>
</model-viewer>

3단계: 높은 긴장감의 시각적 품질 유지

WebAR의 조명은 평면적으로 느껴지는 경우가 많습니다. Neural4D 모델의 "High-Tension" 미학을 유지하려면 항상 HDR 환경 맵을 사용하세요. 이렇게 하면 모델의 금속 및 유리 표면이 실제 주변 환경을 정확하게 반사합니다.

Neural4D 모델에는 물리적으로 정확한 PBR(Physically Based Rendering) 소재가 적용되어 있으며, model-viewer의 조명 엔진과 완벽하게 호환됩니다.

Neural4D 무료로 사용해 보기

궁금한 점이 있거나 여기에서 다루지 않은 문제가 발생했나요? 피드백 페이지를 방문해 알려주세요. 모든 메시지를 확인하고 있습니다.

WebAR에서 Neural4D 모델 사용하는 방법

1단계: 웹 성능을 위해 GLB 내보내기 및 최적화

2단계: 크로스 플랫폼 WebAR 뷰어 구현

3단계: 높은 긴장감의 시각적 품질 유지

제품

기능

회사

리소스