HTML을 작성하는 것만큼이나 쉽게 웹페이지를 위한 3D 모델을 만들 수 있습니다.
3D 모델의 관련성은 그 어느 때보다 높습니다. 소매업체는 고객의 집으로
매장 쇼핑 경험을 제공합니다. 박물관에서는 유물의 3D 모델을
웹의 모든 사람이 사용할 수 있도록 하고 있습니다. 안타깝게도 3D 기술에 대한 깊은 지식이 없거나 서드 파티 사이트에서 3D 콘텐츠를 호스팅하지 않고도 훌륭한 사용자 환경을 제공하는 방식으로 웹사이트에 3D 모델을 추가하는 것은 어려울 수 있습니다. 2019년 초에 도입된 <model-viewer> 웹 구성요소는 HTML 몇 줄로 간단하게 3D 모델을 웹에 게시할 수 있도록 지원합니다. 이후 이 팀은 커뮤니티의 의견과 요청을 처리하기 위해 노력해 왔습니다. 그 결론은 올해 초에 출시된 <model-viewer> 버전 1.0입니다. 이제 <model-viewer> 1.1 출시를 발표합니다. GitHub에서 출시 노트를 확인할 수 있습니다.
작년 이후 새로운 사항
버전 1.1에는 웹에서 증강 현실 (AR)을 기본적으로 지원하고 속도와 충실도를 개선하고 그 밖의 자주 요청이 들어오는 기능이 내장되어 있습니다.
증강 현실
3D 모델을 빈 캔버스에 표시하는 것도 좋지만 내 공간에서 3D 모델을 볼 수 있으면 더 좋습니다. Chrome Android는 전적으로 브라우저 내에서만 표시되는 3D 및 AR을 위해 WebXR을 사용하여 증강 현실을 지원합니다 .
<model-viewer> AR 기능 데모입니다.
준비되면 <model-viewer> 태그에 ar 속성을 추가하여
이 속성을 사용할 수 있습니다. modelviewer.dev의 WebXR 샘플과 같이 다른 속성을 사용하면 WebXR AR 환경을 맞춤설정할 수 있습니다. 아래의 코드 샘플은 이를 보여줍니다.
<model-viewer src="Chair.glb"
ar ar-scale="auto"
camera-controls
alt="A 3D model of an office chair.">
</model-viewer>
이 제목 아래에 삽입된 동영상과 같은 모양입니다.
카메라 컨트롤
이제 <model-viewer>가 뷰의 가상 카메라 (뷰어의 관점)를 완벽하게 제어할 수 있습니다. 여기에는 카메라 타겟, 궤도 (모델에 따른 위치), 시야가 포함됩니다. 자동 회전을 사용 설정하고 사용자 상호작용 (예: 최대 및 최소 시야)에 대한 제한을 설정할 수도 있습니다.
주석
또한 HTML 및 CSS를 사용하여 모델에 주석을 달 수 있습니다. 이 기능은 모델이 조작될 때 함께 이동하는 방식으로 모델의 각 부분에 라벨을 '연결'하는 데 사용되는 경우가 많습니다. 주석의 모양, 모델에 의해 숨겨진 정도 등 주석을 맞춤설정할 수 있습니다. 주석은 AR에서도 작동합니다.
<style>
button{
display: block;
width: 6px;
height: 6px;
border-radius: 3px;
border: 3px solid blue;
background-color: blue;
box-sizing: border-box;
}
#annotation{
background-color: #dddddd;
position: absolute;
transform: translate(10px, 10px);
border-radius: 10px;
padding: 10px;
}
</style>
<model-viewer src="https://modelviewer.dev/assets/ShopifyModels/ToyTrain.glb" alt="A 3D model of a Toy Train" camera-controls>
<button slot="hotspot-hand" data-position="-0.023 0.0594 0.0714" data-normal="-0.3792 0.0004 0.9253">
<div id="annotation">Whistle</div>
</button>
</model-viewer>
자세한 내용은 주석 문서 페이지를 참고하세요.
편집기
버전 1.1에는 모델을 빠르게 미리 보고, 다양한 <model-viewer> 구성(예: 노출 및 그림자 부드러움)을 시도하고, 포스터 이미지를 생성하고, 주석의 좌표를 대화형으로 가져올 수 있는 <model-viewer> '수정' 도구가 도입 및 호스팅됩니다.
렌더링 및 성능 개선
특히 HDR (High Dynamic Range) 환경에서 렌더링 충실도가 크게 개선되었습니다. 이제 <model-viewer>는 하나의 <model-viewer> 요소만 표시 영역에 있을 때 직접 렌더링 경로도 사용하므로(특히 Firefox에서) 성능이 향상됩니다. 마지막으로, 렌더링 해상도를 동적으로 조정하면
프레임 속도가 크게 향상됩니다. 아래 예는 이러한 최근 개선사항 중 일부를 보여줍니다.
<model-viewer camera-controls
skybox-image="spruit_sunrise_1k_HDR.hdr"
alt="A 3D model of a well-worn helmet"
src="DamagedHelmet.glb"></model-viewer>
안정성
<model-viewer>이 첫 번째 주 버전에 도달함에 따라 API 안정성이 우선시되므로 버전 2.0이 출시될 때까지 브레이킹 체인지가 방지됩니다.
다음 단계
<model-viewer> 버전 1.0에는 가장 많이 요청된 기능이 포함되어 있지만 팀은 아직 완성되지 않았습니다. 더 많은 기능이 추가되고 성능, 안정성, 문서화, 도구가 개선됩니다. 제안사항이 있다면 GitHub에서 문제를 제출하세요. PR도 언제든지 환영합니다. 트위터에서 <model-viewer>을 팔로우하고 Spectrum의 커뮤니티 채팅을 확인하면 계속 소통할 수 있습니다.