AR, VR và Mô hình cho 3D trong HTML

AR, VR và Mô hình cho 3D trong HTML

Dấu thời gian: ngày 27 tháng 2023 năm 9 15:XNUMX sáng
AR, VR và Mô hình 3D trong HTML PlatoBlockchain Data Intelligence. Tìm kiếm dọc. Ái.

Ẩn mình ở đâu đó trong Safari Technology Preview 161 ghi chú phát hành là một dòng có vẻ vô thưởng vô phạt về việc hỗ trợ cho một phần tử và thuộc tính HTML mới:

Đã thêm hỗ trợ cho <model src> và danh dự <source type> thuộc tính ()

Bất cứ khi nào tôi thấy đề cập đến một yếu tố nào đó mà tôi không nhận ra, tâm trí tôi sẽ nghĩ ngay đến Huh! Mới đối với tôi, nhưng có lẽ là tin cũ đối với những người khác. Tôi biết đó là tư thế xấu, vì nó có thể dễ dàng như vậy:

  • Hmm, trông giống như một số thử nghiệm độc quyền.
  • Wow, một điều thực sự mới!

Sự thật là, đó là cả ba.

Đó là một khái niệm đang phát triển

Như trong, điều đầu tiên nghe có vẻ chính thức mà tôi tìm thấy trên <model> không có trong thông số W3C nhưng trong Repo của WebKit cho người giải thích. Tất cả những gì có trong README là một ghi chú khổng lồ từ năm 2021 rằng “The <model> phần tử đã chuyển sang CG web nhập vai.” Tôi định nhảy qua nhưng mắt tôi bắt gặp HistoryAndEvolution.md tệp có một danh sách tốt đẹp về bối cảnh ban đầu trên <model> Ý tưởng:

Sản phẩm <model> thành phần được sinh ra từ mong muốn thực hiện bước tiếp theo và cải thiện trải nghiệm tích hợp của Safari với iOS Nhìn nhanh tính năng này.

Tôi đã phải xem trang giật gân của Apple để biết AR Quick Look. Bạn biết tính năng mới mà một số cửa hàng có, nơi bạn có thể chuyển đổi kết xuất 3D của một sản phẩm tại nhà riêng của mình bằng máy ảnh điện thoại của mình? Đó là thứ mà chúng ta đang nói đến, và Apple liên kết một nghiên cứu điển hình hay từ Bảo tàng Nghệ thuật Metropolitan.

Theo tôi hiểu từ bối cảnh hạn chế này:

  • Thả một <model> phần tử trong tài liệu.
  • Thêm một tệp nguồn bên ngoài, ví dụ: <model src="assets/example.usdz">.

Đề xuất ban đầu là từ Nhóm Ủy ban Web Nhập vai

đó là đội đang tìm cách biến Thực tế ảo (VR) và Thực tế tăng cường (AR) trở thành một phần của web. Apple đã liên kết kho lưu trữ của họ, vì vậy tôi đã thực hiện bước nhảy và bắt đầu thẳng đến người giải thích. Đây không phải là thông số kỹ thuật hay bất cứ thứ gì, mà là đề xuất ban đầu. Một định nghĩa tốt hơn nhiều về phần tử!

HTML cho phép hiển thị nhiều loại phương tiện thông qua các phần tử như <img>, <picture>, hoặc là <video>, nhưng nó không cung cấp cách khai báo để hiển thị trực tiếp nội dung 3D. Việc nhúng nội dung 3D vào trong một trang tương đối cồng kềnh và phụ thuộc vào việc viết kịch bản cho <canvas> yếu tố. Chúng tôi tin rằng đã đến lúc đặt các mô hình 3D ngang hàng với các loại phương tiện khác đã được hỗ trợ.

[...]

HTML <model> phần tử nhằm mục đích cho phép một trang web nhúng các mô hình 3D tương tác một cách thuận tiện như bất kỳ phương tiện trực quan nào khác. Các mô hình dự kiến ​​sẽ được tạo bởi các công cụ soạn thảo 3D hoặc được tạo động, nhưng được máy chủ phục vụ dưới dạng tài nguyên độc lập.

Ví dụ cơ bản kéo điều này lại với nhau. Nó thực sự cảm thấy như <video> or <picture> các yếu tố:

<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? Không phải loại hồ sơ thường xuất hiện trên bàn làm việc của tôi. Đoán rằng tôi sẽ cần phải kiểm tra những thứ đó và bất kỳ loại tệp nào khác <model> có thể hỗ trợ. Một lần nữa, tất cả những điều này chỉ là đề xuất ban đầu.

Dự thảo đề xuất vẫn chưa hoàn thiện

Nhưng nó có cung cấp một phác thảo tốt đẹp về nơi mọi thứ có thể có thể đi:

  • Thêm một mô hình vào một tài liệu
  • Kích hoạt tính tương tác
  • Hỗ trợ nhiều định dạng
  • Cung cấp nội dung dự phòng
  • Làm cho nó có thể truy cập được

Có rất nhiều để tìm ra. Hầu hết những gì có vấn đề được ghi lại cần giải quyết. Tuy nhiên, nó làm sáng tỏ hơn <model> như các thuộc tính được đề xuất khiến nó cảm thấy đồng đều chi tiết Lượt thích <video> như là autoplay, controls, loop, muted, poster, Vv

Nó quay trở lại xa hơn nữa

Đề cập sớm nhất về mô hình 3D mà tôi tìm thấy là Bài đăng năm 2018 của Keith Clark trong đó anh ấy tạo nguyên mẫu một phần tử tùy chỉnh được gọi là <x-model>. Anh ấy mô tả nó là “một trình giữ chỗ cung cấp quyền truy cập vào DOM và CSSOM”, nơi quá trình tải và hiển thị được thực hiện trong ba.js.

Ý tưởng của Keith được theo sau bởi <model-viewer> thành phần Joe Medley đã chia sẻ vào năm 2020 (và tiếp theo cập nhật với nó). thậm chí còn có một trang chủ cho nó và thật thú vị khi kéo Neil Armstrong đi khắp không gian.

Nó có thể chỉ là một thử nghiệm?

Ý tôi là, thông số dự thảo chưa được bổ sung. Apple dường như sẵn sàng chơi bóng nhờ thông báo Safari TP 161. Điều đó hoàn toàn có ý nghĩa Apple tăng giá như thế nào trên AR như một tổng thể. (Kính Apple, bất kỳ ai?)

Google dường như đã đặt chân vào cửa, mặc dù về khía cạnh Thành phần Web của mọi thứ. Thật dễ dàng để thấy có thể có xung đột lợi ích như thế nào giữa những gì Apple và Google muốn từ AR trên web.

Đây chỉ là những ghi chú của tôi khi cố gắng mò mẫm mọi thứ. Nó phải có nhiều sắc thái hơn những gì tôi biết ít ỏi về nó cho đến nay. Tôi chắc rằng ai đó thông minh hơn có thể thắt nơ gọn gàng hơn <model> trong các bình luận. 😉

Và trong khi chúng ta đang nói về Safari Technology Preview, 162 mới ra hôm kia và nó cho phép CSS lồng nhau và Cú pháp màu tương đối CSS.

Dấu thời gian:

Thêm từ Thủ thuật CSS