AR, VR 및 HTML의 3D 모델

어딘가에 자리 잡고 Safari 기술 미리 보기 161 릴리스 정보 새로운 HTML 요소 및 속성에 대한 지원에 대한 겉보기에 무해한 라인입니다.

지원 추가됨 <model src> 그리고 명예 <source type> 속성([이메일 보호])

내가 인식하지 못하는 어떤 요소에 대한 언급을 볼 때마다 내 마음은 바로 뭐! 나에게는 새롭지만 다른 사람들에게는 아마도 오래된 소식일 것입니다.. 자세가 좋지 않다는 것을 알고 있습니다. 쉽게 다음과 같이 될 수 있습니다.

• 흠, 독점 실험처럼 보입니다.
• 와우, 정말 새로운 것!

진실은 세 가지 모두 일종의 것입니다.

진화하는 개념이다.

에서와 같이 내가 찾은 첫 번째 다소 공식적으로 들리는 것 <model> W3C 사양에는 없었지만 설명자를 위한 WebKit의 저장소. README에 있는 모든 것은 2021년의 "The <model> 요소를 몰입형 웹 CG로 옮겼습니다.” 뛰어내리려고 했지만 눈에 들어왔어 HistoryAndEvolution.md 초기 컨텍스트에 대한 멋진 요약이 있는 파일 <model> 개념:

XNUMXD덴탈의 <model> 요소 다음 단계로 나아가고 iOS와 Safari의 통합 경험을 개선하려는 열망에서 탄생했습니다. AR 퀵룩 기능.

AR Quick Look에 대한 Apple의 스플래시 페이지를 살펴봐야 했습니다. 휴대폰 카메라를 사용하여 집에서 제품의 3D 렌더링을 바꿀 수 있는 일부 상점의 새로운 기능을 알고 있습니까? 그것이 우리가 이야기하고 있는 종류의 것입니다. Apple은 메트로폴리탄 미술관의 멋진 사례 연구를 연결합니다..

이 제한된 맥락에서 내가 이해한 바와 같이:

• 드롭 <model> 문서의 요소입니다.
• 예를 들어 외부 소스 파일을 추가합니다. <model src="assets/example.usdz">.

원래 제안은 Immersive Web Committee Group의 것입니다.

그 팀이야 가상 현실(VR)과 증강 현실(AR)을 웹의 일부로 만듭니다. Apple은 그들의 저장소를 연결했고, 그래서 나는 점프를 하고 갔다. 바로 설명자에게. 이것은 사양이나 다른 것이 아니라 원래 제안입니다. 요소의 훨씬 더 나은 정의!

HTML을 사용하면 다음과 같은 요소를 통해 많은 미디어 유형을 표시할 수 있습니다. <img>, <picture>및 <video>하지만 3D 콘텐츠를 직접 표시하는 선언적 방식을 제공하지 않습니다. 페이지 내에 3D 콘텐츠를 삽입하는 것은 비교적 번거롭고 스크립팅에 의존합니다. <canvas> 요소. 우리는 3D 모델을 이미 지원되는 다른 미디어 유형과 동등한 위치에 놓을 때라고 생각합니다.

[...]

HTML <model> element는 웹사이트가 다른 시각적 미디어처럼 편리하게 대화형 3D 모델을 삽입할 수 있도록 하는 것을 목표로 합니다. 모델은 3D 저작 도구로 생성되거나 동적으로 생성될 것으로 예상되지만 서버에서 독립 실행형 리소스로 제공됩니다.

기본 예제는 이것을 함께 가져옵니다. 정말 기분이 좋아 <video> or <picture> 집단:

<model style="width: 400px; height: 300px"> <source src="assets/example.usdz" type="model/vnd.usdz+zip"> <source src="assets/example.glb" type="model/gltf-binary">
</model>

.usdz? .glb? 일반적으로 내 책상을 가로지르는 파일 유형이 아닙니다. 나는 그것들과 다른 파일 형식을 정리해야 할 것 같습니다. <model> 지원할 수 있습니다. 다시 말하지만 이 모든 것은 원래 제안에 불과합니다.

제안서 초안이 아직 확정되지 않았습니다.

하지만 그것은 좋은 개요를 제공 물건이 갈 수 있는 곳:

• 문서에 모델 추가
• 상호작용 가능
• 여러 형식 지원
• 대체 콘텐츠 제공
• 액세스 가능하게 만들기

알아낼 것이 많습니다. 대부분의 문제는 해결해야 하는 문서화된 문제입니다. 그러나 그것은 더 많은 빛을 비춰줍니다 <model> 제안된 속성과 같이 배우기 처럼 <video> 등 autoplay, controls, loop, muted, poster등

더 거슬러 올라간다

내가 찾은 3D 모델링에 대한 최초의 언급은 키스 클라크의 2018년 포스트 라는 사용자 지정 요소의 프로토타입을 만듭니다. <x-model>. 그는 로드 및 렌더링이 수행되는 "DOM 및 CSSOM에 대한 액세스를 제공하는 자리 표시자"라고 설명합니다. 쓰리.js.

Keith의 아이디어는 다음과 같습니다. <model-viewer> 2020년에 공유된 구성 요소 Joe Medley (그리고 후속 최신 정보 그것에). 심지어 그것을 위한 홈페이지 닐 암스트롱을 우주로 끌고 다니는 것도 재미있습니다.

그냥 실험일지도?

내 말은, 초안 사양이 구체화되지 않았다는 뜻입니다. Apple은 Safari TP 161 발표 덕분에 기꺼이 공을 던질 것 같습니다. 그것은 주어진 총 의미가 있습니다 Apple이 AR에 대해 얼마나 낙관적인지 전체적으로. (애플 안경, 누구?)

Google은 웹 구성 요소 측면에도 불구하고 문에 발을 들여 놓은 것 같습니다. Apple과 Google이 웹의 AR에서 원하는 것 사이에 어떻게 이해 상충이 있는지 쉽게 알 수 있습니다.

이것들은 모두 모든 것을 이해하려고 노력한 나의 메모일 뿐입니다. 지금까지 내가 그것에 대해 아는 것보다 훨씬 더 많은 뉘앙스가 있을 것입니다. 더 똑똑한 사람이 더 깔끔한 리본을 묶을 수 있다고 확신합니다 <model> 댓글에. 😉

Safari 기술 프리뷰에 대해 이야기하는 동안 162 얼마전 발매 그리고 그것은 가능하게합니다 CSS 중첩 그리고 CSS 상대 색상 구문.

• SEO 기반 콘텐츠 및 PR 배포. 오늘 증폭하십시오.
• 플라토 블록체인. Web3 메타버스 인텔리전스. 지식 증폭. 여기에서 액세스하십시오.
• 출처: https://css-tricks.com/ar-vr-and-a-model-for-3d-in-html/