Tài liệu Needle Engine
Downloads
  • What is Needle Engine?
  • Lời chứng thực
  • Get an overview

    • Samples and Showcase
    • Tầm nhìn của chúng tôi 🔮
    • Tổng quan tính năng
    • Tổng quan kỹ thuật
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Needle Engine cho Unity
    • Needle Engine cho Blender
    • Needle Engine dưới dạng Web Component
    • Needle Engine trên Trang web của bạn
    • Needle Cloud
  • Core Concepts

    • Cấu trúc dự án Needle Engine
    • Everywhere Actions
    • Xuất Tài sản sang glTF
    • Frameworks, Bundlers, HTML
    • Kiểm thử trên thiết bị cục bộ
    • Triển khai và Tối ưu hóa
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Kết nối mạng
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • Cách Gỡ Lỗi
    • Câu hỏi thường gặp (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting trong Needle Engine
    • Giới thiệu về Scripting cho các nhà phát triển Unity
    • Needle Core Components
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable và các decorator khác
    • Tự động tạo Component
    • Ví dụ về Scripting
    • Community Contributions
    • Các Module Bổ Sung
  • Settings and APIs

    • Cấu hình <needle-engine>
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
Downloads
  • What is Needle Engine?
  • Lời chứng thực
  • Get an overview

    • Samples and Showcase
    • Tầm nhìn của chúng tôi 🔮
    • Tổng quan tính năng
    • Tổng quan kỹ thuật
  • Resources

    • Pricing and Plans
    • Changelog
    • API Documentation
    • Support & Community
  • Integrations

    • Needle Engine cho Unity
    • Needle Engine cho Blender
    • Needle Engine dưới dạng Web Component
    • Needle Engine trên Trang web của bạn
    • Needle Cloud
  • Core Concepts

    • Cấu trúc dự án Needle Engine
    • Everywhere Actions
    • Xuất Tài sản sang glTF
    • Frameworks, Bundlers, HTML
    • Kiểm thử trên thiết bị cục bộ
    • Triển khai và Tối ưu hóa
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Kết nối mạng
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • Cách Gỡ Lỗi
    • Câu hỏi thường gặp (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting trong Needle Engine
    • Giới thiệu về Scripting cho các nhà phát triển Unity
    • Needle Core Components
    • Everywhere Actions
  • Components and Lifecycle

    • Creating and using Components
    • @serializable và các decorator khác
    • Tự động tạo Component
    • Ví dụ về Scripting
    • Community Contributions
    • Các Module Bổ Sung
  • Settings and APIs

    • Cấu hình <needle-engine>
    • needle.config.json
    • Needle Engine API
    • three.js API
Help
Samples
Pricing
  • Needle Website
  • Needle Cloud
  • Support Community
  • Discord Server
  • X/Twitter
  • YouTube
  • Newsletter
  • Email
  • Feedback
  • Github
  • English
  • 简体中文
  • Español
  • Português
  • Français
  • हिन्दी
  • 日本語
  • Deutsch
  • Tiếng Việt
  • Getting Started

    • Downloads
    • Needle Engine for Unity
    • Needle Engine for Blender
    • Needle Engine as Web Component
    • Needle Engine on your Website
    • Needle Cloud
    • Custom integrations
    • Support and Community
  • Core Concepts

    • Cấu trúc dự án Needle Engine
    • Everywhere Actions
    • Xuất Tài sản sang glTF
    • Frameworks, Bundlers, HTML
    • Kiểm thử trên thiết bị cục bộ
    • Triển khai và Tối ưu hóa
  • Scripting

    • Scripting trong Needle Engine
    • Giới thiệu về Scripting cho các nhà phát triển Unity
    • Creating and using Components
    • Tự động tạo Component
    • Ví dụ về Scripting
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Kết nối mạng
    • MaterialX
    • Editor Sync
  • Troubleshooting

    • Cách Gỡ Lỗi
    • Câu hỏi thường gặp (FAQ) 💡
    • Support and Community
  • Reference

    • Tổng quan tính năng
    • Tổng quan kỹ thuật
    • Needle Core Components
    • needle.config.json
    • Cấu hình <needle-engine>
    • @serializable và các decorator khác

WebXR Image Tracking là gì

WebXR image tracking cho phép trình duyệt phát hiện và theo dõi các hình ảnh cụ thể trong thế giới thực thông qua camera của thiết bị, cung cấp dữ liệu vị trí và hướng theo thời gian thực để neo nội dung ảo một cách chính xác vào các điểm đánh dấu vật lý như áp phích, bao bì hoặc tác phẩm nghệ thuật.

Bằng cách hướng camera vào một hình ảnh được nhận dạng, API theo dõi hình ảnh liên tục cập nhật mối quan hệ không gian giữa các yếu tố ảo và vật lý, đảm bảo sự căn chỉnh phù hợp ngay cả khi thiết bị hoặc hình ảnh di chuyển.

Theo dõi hình ảnh biến các hình ảnh tĩnh thành các tác nhân AR tương tác—cho phép tranh bảo tàng hiển thị thông tin phủ lên, bao bì sản phẩm tiết lộ hình ảnh động 3D hoặc danh thiếp hiển thị chi tiết liên hệ nổi—tất cả thông qua chuẩn web mà không yêu cầu người dùng tải xuống các ứng dụng chuyên dụng, giúp trải nghiệm AR có thể truy cập tức thì thông qua bất kỳ trình duyệt web tương thích nào.

Bản demo

Needle Engine hỗ trợ WebXR Image Tracking (Bản demo trực tiếp) trên Android và QuickLook Image Tracking trên iOS.

Khởi động cảnh dưới đây trong AR và hướng camera điện thoại của bạn vào điểm đánh dấu hình ảnh trên màn hình hoặc in nó ra.

WebXR Image Tracking trên Android

Trên Android vui lòng bật "WebXR Incubations" trong Chrome Flags. Bạn có thể tìm thấy chúng bằng cách dán chrome://flags/#webxr-incubations vào thanh địa chỉ trình duyệt Chrome của điện thoại Android của bạn.

Điểm đánh dấu hình ảnh

Giải thích

WebXR Image Tracking vẫn đang trong giai đoạn "bản nháp" và chưa được phát hành rộng rãi

Cho đến nay, các nhà cung cấp trình duyệt vẫn chưa thể thống nhất về API theo dõi hình ảnh cuối cùng cho WebXR. Miễn là đặc tả đang trong giai đoạn "bản nháp" (Giải thích theo dõi điểm đánh dấu), bạn và người dùng ứng dụng của bạn cần làm theo các bước sau để bật WebXR ImageTracking trên thiết bị Android:

  1. Truy cập chrome://flags trên trình duyệt Chrome Android của bạn
  2. Tìm và bật tùy chọn WebXR Incubations

Nếu không có đặc tả đó, người ta vẫn có thể yêu cầu quyền truy cập hình ảnh camera và chạy các thuật toán tùy chỉnh để xác định tư thế thiết bị. Nhược điểm là người dùng sẽ phải chấp nhận các quyền bổ sung như truy cập camera, và việc theo dõi sẽ không chính xác bằng khả năng gốc của thiết bị.

Dưới đây là một số thư viện để thêm tính năng theo dõi hình ảnh dựa trên quyền truy cập camera và các thuật toán thị giác máy tính cục bộ:

  • Tích hợp AR.js thử nghiệm với Needle Engine bởi FireDragonGameStudio
  • AR.js (mã nguồn mở)
  • Mind AR (mã nguồn mở)

Tích hợp

Image Tracking có thể được thiết lập trong cả Unity và Blender bằng cách thêm một component WebXRImageTracking vào một đối tượng. Sau đó, thêm hình ảnh của bạn vào mảng Tracked Images.

unity screenshot
Component theo dõi hình ảnh trong Unity

blender screenshot
Component theo dõi hình ảnh trong Blender

Tài liệu tham khảo

  • Giải thích theo dõi điểm đánh dấu WebXR
  • WebXR Device API
  • caniuse: WebXR
  • Các hành vi USD sơ bộ của Apple

Đọc thêm

  • Needle Everywhere Actions trải nghiệm chạy ở mọi nơi
  • Tài liệu XR

Trang được dịch tự động bằng AI

Suggest changes
Last Updated: 8/15/25, 8:05 AM
Prev
VR & AR (WebXR)
Next
Kết nối mạng