Documentação do Needle Engine
Downloads
  • What is Needle Engine?
  • Depoimentos
  • Get an overview

    • Samples and Showcase
    • A Nossa Visão 🔮
    • Visão Geral de Recursos
    • Visão Geral Técnica
  • Resources

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

    • Needle Engine para Unity
    • Needle Engine para Blender
    • Needle Engine como Web Component
    • Needle Engine no seu Website
    • Needle Cloud
  • Core Concepts

    • Estrutura de um Projeto Needle Engine
    • Everywhere Actions
    • Exportar Recursos para glTF
    • Frameworks, Bundlers, HTML
    • Testar em dispositivos locais
    • Implementação e Otimização
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Rede
    • MaterialX
    • Sincronização do Editor
  • Troubleshooting

    • Como Depurar
    • Perguntas e Respostas (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting no Needle Engine
    • Introdução à Scripting para Developers Unity
    • Componentes Principais do Needle
    • Everywhere Actions
  • Components and Lifecycle

    • Criar e usar Componentes
    • @serializable e outros decorators
    • Geração Automática de Componentes
    • Exemplos de Scripting
    • Community Contributions
    • Módulos Adicionais
  • Settings and APIs

    • <needle-engine> Configuração
    • 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?
  • Depoimentos
  • Get an overview

    • Samples and Showcase
    • A Nossa Visão 🔮
    • Visão Geral de Recursos
    • Visão Geral Técnica
  • Resources

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

    • Needle Engine para Unity
    • Needle Engine para Blender
    • Needle Engine como Web Component
    • Needle Engine no seu Website
    • Needle Cloud
  • Core Concepts

    • Estrutura de um Projeto Needle Engine
    • Everywhere Actions
    • Exportar Recursos para glTF
    • Frameworks, Bundlers, HTML
    • Testar em dispositivos locais
    • Implementação e Otimização
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Rede
    • MaterialX
    • Sincronização do Editor
  • Troubleshooting

    • Como Depurar
    • Perguntas e Respostas (FAQ) 💡
    • Support and Community
  • Videos

    • Tutorials on Youtube
    • Interviews on Youtube
  • Scripting Overview

    • Scripting no Needle Engine
    • Introdução à Scripting para Developers Unity
    • Componentes Principais do Needle
    • Everywhere Actions
  • Components and Lifecycle

    • Criar e usar Componentes
    • @serializable e outros decorators
    • Geração Automática de Componentes
    • Exemplos de Scripting
    • Community Contributions
    • Módulos Adicionais
  • Settings and APIs

    • <needle-engine> Configuração
    • 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 no Editor
    • Needle Engine on your Website
    • Needle Cloud
    • Custom integrations
    • Support and Community
  • Core Concepts

    • Estrutura de um Projeto Needle Engine
    • Everywhere Actions
    • Exportar Recursos para glTF
    • Frameworks, Bundlers, HTML
    • Testar em dispositivos locais
    • Implementação e Otimização
  • Scripting

    • Scripting no Needle Engine
    • Criar e usar Componentes
    • Introdução à Scripting para Developers Unity
    • Geração Automática de Componentes
    • Exemplos de Scripting
    • Community Contributions
  • Advanced

    • VR & AR (WebXR)
    • Image Tracking (WebXR)
    • Rede
    • MaterialX
    • Sincronização do Editor
  • Troubleshooting

    • Como Depurar
    • Perguntas e Respostas (FAQ) 💡
    • Support and Community
  • Reference

    • Visão Geral de Recursos
    • Visão Geral Técnica
    • Componentes Principais do Needle
    • needle.config.json
    • <needle-engine> Configuração
    • @serializable e outros decorators

O que é Rastreamento de Imagens WebXR

O rastreamento de imagens WebXR permite que os navegadores detetem e rastreiem imagens específicas no mundo real através da câmara de um dispositivo, fornecendo dados de posição e orientação em tempo real para ancorar conteúdo virtual precisamente em marcadores físicos como cartazes, embalagens ou obras de arte.

Ao apontar a câmara para uma imagem reconhecida, a API de rastreamento de imagens atualiza continuamente a relação espacial entre os elementos virtuais e físicos, garantindo o alinhamento adequado mesmo quando o dispositivo ou a imagem se movem.

O rastreamento de imagens transforma imagens estáticas em gatilhos de RA interativos—permitindo que pinturas de museus exibam informações sobrepostas, embalagens de produtos revelem animações 3D, ou cartões de visita mostrem detalhes de contacto flutuantes—tudo através de padrões web sem exigir que os utilizadores descarreguem aplicações dedicadas, tornando as experiências de RA instantaneamente acessíveis através de qualquer navegador web compatível.

Demonstração

Needle Engine suporta Rastreamento de Imagens WebXR (Demonstração ao Vivo) no Android e Rastreamento de Imagens QuickLook no iOS.

Inicie a cena abaixo em RA e aponte a câmara do seu telemóvel para o marcador de imagem num ecrã, ou imprima-o.

Rastreamento de Imagens WebXR no Android

No Android por favor ative "WebXR Incubations" nas Chrome Flags. Pode encontrá-las colando chrome://flags/#webxr-incubations na barra de endereço do navegador Chrome do seu telemóvel Android.

Marcador de Imagem

Explicador

O Rastreamento de Imagens WebXR ainda está em fase de "rascunho" e não está geralmente disponível

Até agora, os fornecedores de navegadores não conseguiram chegar a um acordo sobre a API final de rastreamento de imagens para WebXR. Enquanto a especificação estiver em fase de "rascunho" (Explicador de Rastreamento de Marcadores), você e os utilizadores da sua aplicação precisam de seguir estes passos para ativar o Rastreamento de Imagens WebXR em dispositivos Android:

  1. Visite chrome://flags no seu navegador Chrome para Android
  2. Encontre e ative a opção WebXR Incubations

Sem essa especificação, ainda é possível solicitar acesso à imagem da câmara e executar algoritmos personalizados para determinar a pose do dispositivo. A desvantagem é que os utilizadores terão de aceitar permissões adicionais, como acesso à câmara, e o rastreamento não será tão preciso como com as capacidades nativas do dispositivo.

Aqui estão algumas bibliotecas para adicionar rastreamento de imagens baseado no acesso à câmara e algoritmos de visão computacional local:

  • Integração experimental AR.js com Needle Engine por FireDragonGameStudio
  • AR.js (código aberto)
  • Mind AR (código aberto)

Integrações

O Rastreamento de Imagens pode ser configurado tanto no Unity quanto no Blender, adicionando um componente WebXRImageTracking a um objeto. Em seguida, adicione as suas imagens ao array Tracked Images.

unity screenshotComponente de rastreamento de imagens no Unity

blender screenshotComponente de rastreamento de imagens no Blender

Referências

  • WebXR Marker Tracking Explainer
  • WebXR Device API
  • caniuse: WebXR
  • Apple's Preliminary USD Behaviours

Leitura adicional

  • Ações em Todo o Lado do Needle experiências que funcionam em todo o lado
  • Documentação XR

Página traduzida automaticamente usando IA

Suggest changes
Last Updated: 15/08/2025, 08:05
Prev
VR & AR (WebXR)
Next
Rede