Exibir e interagir com o conteúdo da Web

Use WebSlate para exibir conteúdo interativo da Web em seu ambiente de Malha 3D. Obtenha uma experiência de navegação completa no PC ou na Solicitação 2 com entrada intuitiva, personalização, segurança e gerenciamento de desempenho.

Você pode usar WebSlates para:

• Interagindo com mapas, diagramas e dados

• Exibindo painéis, páginas da Web, fotos e vídeos

• Mostrando conteúdo que realça produtos e serviços, histórias de clientes e identidade da marca

Recursos do WebSlate

• Especifique uma URL padrão: Escolha sua localização, arraste e solte o pré-fabricado e adicione uma URL. Repita se quiser vários WebSlates em sua cena.

• Entrada & áudio interno: A navegação na Web do usuário final, a interação com aplicativos e a exibição de vídeos ficam disponíveis na Malha.

• Navegação segura: Bloquear URLs de redirecionamento para evitar redirecionamentos mal-intencionados e navegaçãos de hiperlink não intencionais.

• Personalização visual: Modifique a qualidade para otimizar os dispositivos dos usuários. Atraia usuários de uma distância com conteúdo fácil de exibir.

• Programável: Com scripts visuais e scripts de nuvem, você pode habilitar a alternância entre páginas com um botão.

• Integração de ferramentas de Performance Analyzer de conteúdo: meça o tempo médio necessário para que o URP renderize WebSlates em um quadro e encontre problemas de carregamento de conteúdo.

• Teste no Modo de Emulação de Malha: Interaja com seu conteúdo como um usuário faria, diretamente do editor do Unity.

• Autenticar manualmente na experiência: Acesse o conteúdo seguro de dentro da experiência fazendo logon em sua conta e exibindo conteúdo em runtime.

Como o WebSlate funciona

Se você tiver um projeto do Unity configurado para criar Ambientes de Malha, adicionar um WebSlate ao seu Ambiente será um processo simples.

Em Malha, o WebSlate carrega uma página interativa por meio de uma URL fornecida. A URL fornecida a ela no Ambiente será a mesma carregada na Malha. No kit de ferramentas mesh, o pré-fabricado WebSlate contém um parâmetro de URL que os desenvolvedores podem especificar para controlar o conteúdo exibido em seu Ambiente de Malha.

• Quando carregado no Aplicativo mesh para PC e Quest, as páginas da Web carregadas por um WebSlate são interacionáveis por meio de mouse, teclado e entrada do controlador Quest XR.

• O tamanho e a forma do WebSlate corresponderão ao do quad GameObject em que ele é colocado. Normalmente, esse é o quadrilátero assado dentro do pré-fabricado WebSlate.

• Vários WebSlates podem ser adicionados a uma cena. O número de usuários em seu Ambiente de Malha não afeta o desempenho do WebSlate; Os recursos webSlate são inicializados localmente no computador do usuário.

• Os WebSlates podem ser configurados com scripts visuais ou de nuvem para adicionar comportamentos interativos e sincronização entre usuários.

• O WebSlate pode exibir páginas da Web e dá suporte à interação, mas não funciona como um navegador e não dá suporte a indicadores, histórico ou idas e vindas.

• Você pode visualizar o WebSlate em seu projeto do Unity antes de carregar sua cena na Malha pressionando Reproduzir.

Requisitos/dependências

O WebSlate depende dos pacotes Unity.InputSystem e Unity.XR.Interaction.Toolkit Unity, localizados no kit de ferramentas mesh.

Adicionar um pré-fabricado WebSlate ao seu projeto do Unity

Há dois tipos de pré-fabricados WebSlate disponíveis no kit de ferramentas mesh que você pode adicionar à sua cena. Se você preferir um WebSlate limpo sem componentes extras, adicione o prefab WebSlate. Se você quiser um WebSlate contido em um quadro estilizado com recursos extras, adicione o pré-fabricado WebSlateFramed .

Adicionar o pré-fabricado WebSlate de um menu

Para adicionar um dos pré-fabricados à sua cena:

1. Clique com o botão direito do mouse dentro da Hierarquia e, no menu de contexto, siga um destes procedimentos:

   Para adicionar o limpo WebSlate sem componentes extras:
   SelecioneWebSlate do MeshToolkit>.

   Para adicionar o WebSlate com o quadro estilizado e recursos extras:
   SelecioneWebSlateFramed do Mesh Toolkit>.

2. Adicione uma URL ao WebSlate para exibir o conteúdo.

   Dica: você também pode clicar no botão "+" na parte superior esquerda da janela Hierarquia para ver o mesmo menu.

   

   

Pesquisar e adicionar o pré-fabricado WebSlate

Você também pode pesquisar e adicionar um pré-fabricado WebSlate.

1. No campo Pesquisa, digite "WebSlate". Verifique se você tem o filtro Todos selecionado.

   

2. Arraste o prefab desejado para a exibição Cena ou a Hierarquia.

   

3. No Inspetor, navegue até o componente WebSlate e adicione a URL que você deseja exibir no WebSlate:

   

Verifique se o WebSlate é legível

É importante garantir que todos os participantes de uma experiência de Malha possam ler todo o conteúdo em um WebSlate confortavelmente. Recomendamos que você crie algum espaço vazio na frente de um WebSlate para que os participantes possam se aproximar dele e ajustar sua posição para uma melhor exibição. Se sua experiência contiver estações, exiba o WebSlate de cada assento para garantir que um participante sentado nesse assento possa ler o texto no WebSlate. Se você tiver controle sobre o conteúdo que aparecerá em um WebSlate, experimente vários tamanhos de fonte para o texto para determinar o tamanho ideal para exibição. Na experiência de exemplo abaixo, o texto "Microsoft Teams" no meio do WebSlate é mais do que grande o suficiente para exibição confortável, mas o texto muito menor nos cantos é difícil de ler. Nesse tipo de cenário, você não teria controle sobre o texto no vídeo de streaming, portanto, considere mover os assentos para mais perto. Além disso, os assentos mais centralizados e que olham diretamente para o WebSlate fornecerão uma visão melhor do que os assentos que estão fora dos lados.

Visualizar WebSlate no Modo de Emulação de Malha

Para exibir uma URL exibida em seu WebSlate mais rapidamente, você pode usar o Modo de Emulação de Malha. Além de testar nesse modo, a única outra maneira de ver o WebSlate é carregá-lo usando o Carregador do Kit de Ferramentas de Malha e exibi-lo em uma experiência de Malha.

Para adicionar o Modo de Emulação de Malha ao seu projeto, siga as instruções no artigo Emulador de Malha.

Para exibir sua página da Web no WebSlate:
Pressione o botão Reproduzir do editor do Unity.

Habilitar a interação WebSlate para o Modo de Emulação de Malha

Para habilitar a interação no WebSlate, você precisa configurar algumas coisas.

1. Adicione o Emulador de Malha à cena para habilitar o Modo de Emulação de Malha.

2. Crie um novo Plano GameObject. Este será o seu andar. Verifique se o GameObject está posicionado na origem (0,0,0):

   

3. Posicione o WebSlate para que ele fique na frente do caractere MeshEmulatorSetup :

   

4. Clique no botão Reproduzir e clique duas vezes para interagir com a página da Web exibida no WebSlate:

   

Bom trabalho! Você adicionou um WebSlate personalizado à cena do Unity e testou a interação no Modo de Emulação de Malha.

Agora você está pronto para carregar o Ambiente na Malha e compartilhar sua criação com o mundo!

WebSlate no Visual Scripting

Com o Visual Scripting, os desenvolvedores podem implementar a funcionalidade e o comportamento do WebSlate sem a necessidade de digitar código. Em vez disso, uma interface visual baseada em nó é fornecida, permitindo que os usuários definam e conectem várias ações e eventos em uma cena. Alguns desenvolvedores acham que isso pode simplificar o processo de adição de interatividade e comportamento.

Para habilitar o script visual usando WebSlate, você deve configurar algumas coisas.

1. Vá para Editar>Configurações do Projeto.

2. Na lista do lado esquerdo, selecione Script Visual.

   

3. Expanda Biblioteca de Nós. Isso exibe a lista de assembly.

4. Na parte inferior da lista de assemblies à direita, clique no botão Adicionar (+). Isso adiciona um novo item à lista que exibe "(Sem Assembly)".

5. Clique na nova entrada de assembly e, no campo Pesquisa, digite "Webslate". Isso restringe a lista a Microsoft.Mesh.WebSlate. Selecione este item para adicioná-lo à lista Assembly .

   

   O Visual Scripting adiciona o Microsoft.Mesh.WebSlate e seus nós à Biblioteca de Nós. Para usar os nós em seu projeto, selecione o botão Regenerar Nós .

   

   URL de carga

   Os desenvolvedores agora podem alterar dinamicamente o conteúdo da Web em tempo real carregando novas URLs por meio do Visual Scripting. Essa funcionalidade amplia o escopo de vários aplicativos, incluindo alterar o conteúdo da Web com base nas preferências do usuário ou atualizá-lo em resposta a dados em tempo real.

   

   Carregar conteúdo HTML

   Esse novo recurso no WebSlate permite que os desenvolvedores removam arquivos HTML como TextAssets na cena do Unity com pouco esforço. Essa integração não apenas simplifica o fluxo de trabalho, mas também permite comentários imediatos no Modo de Reprodução do Unity, melhorando a edição e a depuração em tempo real. Além disso, ele dá suporte à alternância dinâmica de conteúdo, oferecendo flexibilidade e uma experiência de usuário mais interativa.

   

   Crie um HTML novo ou reutilize o HTML existente para exibir/interagir em seu ambiente de Malha: se você não quiser hospedar conteúdo HTML ou tiver arquivos offline seguros, poderá adicionar HTML no local e incluí-lo como parte do ativo em sua cena.

   Carregamento dinâmico em runtime: carregar HTML de arquivos permite que os desenvolvedores façam alterações em tempo real usando o Visual Scripting. Essa funcionalidade dinâmica aprimora a experiência do usuário.

   Loop de Comentários Rápidos no Modo de Reprodução do Unity: com o conteúdo HTML carregado de arquivos, os desenvolvedores podem ver instantaneamente os efeitos de suas alterações enquanto estão no Modo de Reprodução do Unity.

WebSlate no Cloud Scripting

Os desenvolvedores também podem adicionar um WebSlate a Ambientes usando scripts de nuvem de malha. Isso significa que um WebSlate pode ser navegado por um script de nuvem de Malha e, em seguida, sincronizado entre os usuários. Por exemplo, você pode criar um script de nuvem de malha contendo um nó WebSlate e um ou mais nós interativos. Em seguida, você pode configurar o manipulador de eventos de clique do InteractableNode para navegar pelo WebSlate para uma URL diferente. Ao adicionar um script de nuvem de malha junto com o WebSlate, os usuários podem atualizar o conteúdo do WebSlate interativamente.

Para obter mais diretrizes sobre o nó WebSlate em Aplicativos de Malha, consulte a Visão geral do script visual.

Dicas Gerais

• Você pode colocar um WebSlate em GameObjects diferente de um Quad adicionando WebSlate.cs como um componente de script diretamente ao objeto 3D de sua escolha e adicionando UnlitWebSlate.mat a MeshRenderer Materials. Observe que isso pode resultar em alongamento de textura visual, inversão e/ou rotação.

• Um WebSlate carrega uma URL padrão. Você deve substituir essa URL por uma que preferir para cada WebSlate em uso. O parâmetro de brilho é definido como 1,0 (100% do brilho do navegador).

• Os WebSlates serão suspensos automaticamente após ficarem fora da tela por muito tempo. Se você precisar garantir que um determinado slate esteja sempre em execução (como uma transmissão ao vivo ou reprodução de áudio contínua), marcar o botão "Impedir suspensão" na associação WebSlate. Veja abaixo as implicações de desempenho.

• Para dimensionar a URL da imagem para o tamanho do WebSlate, encapsule a URL em HTML. Use a API LoadHTML do WebSlate por meio de script visual para renderizar esse conteúdo HTML em seu WebSlate. Adicione o HTML construído à propriedade HTMLContent. Como alternativa, você pode usar a API LoadHTMAsset e passar o HTML como um ativo. Substitua a URL da imagem pela URL da imagem.

  HTML de exemplo com a URL da imagem e o grafo de script visual usando a API LoadHTML e LoadHTMLAsset:

  <!DOCTYPE html><html lang="en"><head><meta charset="UTF-8"><meta name="viewport" content="width=device-width initial-scale=1.0"><title>Microsoft</title></head><body style="margin: 0; height: 100vh; overflow: hidden; background-color: black;"><img src="https://learn.microsoft.com/en-us/mesh/media/webview-developer-guide/ArcadeWebSlate.png" loading="lazy" style="width: 100%; height: 100%;"></body></html>

  

  

Desempenho

• Como um WebSlate é uma página da Web carregada, é importante considerar as implicações de desempenho:

  • As cenas normalmente têm um desempenho de 60fps com até 10 WebSlates ativos. A taxa de quadros e a degradação geral do desempenho podem ser observadas proporcionalmente ao número de WebSlates colocados em uma cena, independentemente do conteúdo.

  • O conteúdo é carregado e executado no WebSlate em um thread separado dos threads de atualização e renderização da cena e, portanto, é improvável que afete diretamente a taxa de quadros. No entanto, ainda é importante considerar o custo do JavaScript em execução em uma página da Web em termos de complexidade de runtime e uso de memória.

  • Para ajudar a economizar no desempenho, os WebSlates que estão fora da tela para mais de 30 anos são suspensos automaticamente. Eles retomam rapidamente a volta na tela, mas isso pode afetar os serviços em execução ativa na página hospedada. Se esse for um problema, os desenvolvedores poderão desabilitar a suspensão com a caixa de seleção "Impedir Suspensão" do pré-fabricado. Observe que fazer isso pode fazer com que a cena consuma mais recursos, pois esses WebSlates permanecem ativos o tempo todo.

  

• Como o WebSlates não tem nenhuma interface do usuário de navegação externa por padrão, a melhor prática é carregar apenas URLs personalizadas, em que a navegação do site é cíclica e pode ser feita dentro da página. Isso pode ser feito com uma barra lateral de navegação ou links para uma página de hub, por exemplo.

• A ferramenta CPA (Content Performance Analyzer) inclui um analisador WebSlate que mede o tempo médio que leva o pipeline de renderização do Unity para renderizar WebSlates em um quadro.

  • As medidas são baseadas no gravador do criador de perfil do Unity e exigem o modo Reproduzir. O analisador move a câmera sobre cada WebSlate para coletar amostras suficientes do criador de perfil e calcula o tempo médio de renderização.

  • Isso fornece uma análise de primeiro estágio e de alto nível dos tempos de renderização do WebSlate no contexto do pipeline de renderização do Unity. Ele não fornece a taxa de quadros do conteúdo webSlate em si.

  • Se o pipeline de renderização do Unity exceder o limite para renderizar WebSlates (atualmente 10ms), a ferramenta CPA fornecerá um aviso.

  • As mesmas medidas também estão disponíveis para o Criador de Perfil de Desempenho. O grupo no Criador de Perfil de Desempenho normalmente altera as cores de verde para vermelho quando a concessão de orçamento para uma categoria é superada. Por enquanto, o grupo WebSlate só aparece como verde até que um orçamento de tempo de renderização razoável seja racionalizado para WebSlates.

  

Restrições de segurança

• WebSlates são bloqueados para as URLs para as quais navegam, impedindo redirecionamentos mal-intencionados. Todas as navegaçãos de hiperlink não intencionais para domínios externos são bloqueadas, a menos que explicitamente listadas como um domínio permitido (veja abaixo).

• Os WebSlates são restritos à navegação no domínio inicial ou aos redirecionamentos das URLs e do servidor especificados.

• A navegação em um WebSlate é exclusivamente limitada a HTTPS.

• O acesso do dispositivo à webcam, ao microfone e à geolocalização está bloqueado.

Lista de permissões do domínio WebSlate

Para garantir a segurança contra vetores de ataque não intencionais baseados em URL, como phishing, webSlates por padrão restringem a navegação às URLs incluídas no domínio da primeira página carregada no WebSlate. Por exemplo, um WebSlate iniciado em https://www.microsoft.com/ navegará apenas para páginas cuja URL comece com "www.microsoft.com". Embora isso garanta que os usuários não divergem acidentalmente do fluxo de navegação pretendido, ele pode ser um padrão excessivamente restritivo para alguns casos de uso, como a autenticação do usuário, durante o qual pode haver redirecionamentos para subdomínios ou provedores de autenticação de terceiros.

A maneira de acomodar esses casos de uso é adicionando domínios à lista de permissões do WebSlate.

Adicionar domínios automaticamente (recomendado)

Ao trabalhar com WebSlates no editor do Unity, você tem a opção de habilitar "Coletar Domínios Permitidos". Isso removerá a restrição de navegação de domínio para que você possa navegar livremente ao executar no modo De reprodução para testar seu cenário. Enquanto você navega no modo de reprodução, o WebSlate registrará em log os domínios visitados em segundo plano.

Nesse caso, estamos expandindo a navegação de microsoft.com para incluir também learn.microsoft.com.

Depois de sair do modo Reproduzir, você encontrará um ativo chamado "WebViewAllowedDomains.asset" na pasta Ativos de nível superior.

Clicar nesse ativo fornecerá a lista de domínios extras visitados além do domínio da URL inicial. Você pode clicar com o botão direito do mouse, copiar e colar os valores no campo "Domínios permitidos" do componente WebSlate.

Observação

Essa opção é impossível de habilitar em cenas carregadas. Deixar "Coletar Domínios Permitidos" habilitado NÃO removerá a restrição em sua cena final. No entanto, sua lista de domínios permitidos persistirá e permitirá a navegação desde que os domínios sejam adicionados ao WebSlate.

Adicionar domínios manualmente

Se você já souber de quais domínios precisará, poderá adicioná-los manualmente ao WebSlate expandindo a lista suspensa "Domínios permitidos" e adicionando seus domínios complementares à lista na GUI do Unity.

Transmissões ao vivo da plataforma WebSlate

Para fazer isso, integre o Prefab webSlate em seu ambiente e forneça a URL de transmissão ao vivo. No caso em que a URL de transmissão ao vivo não estiver disponível com antecedência, você poderá utilizar um serviço de redirecionamento de URL para gerar uma URL e fornecê-la ao WebSlate. Essa abordagem fornece a flexibilidade para atualizar a URL de redirecionamento no último momento sem a necessidade de publicar novamente o ambiente grande com a URL de transmissão ao vivo. Verifique se você selecionou a opção 'Impedir Suspensão' durante a configuração do WebSlate para impedir que ela seja suspensa após 30 segundos se alguém não estiver exibindo ativamente o WebSlate. WebSlates não exigem configuração com as Ferramentas de Host, portanto, eventos sem host podem ser criados e servem como espaços suspensos com conteúdo significativo.

Limitações e problemas conhecidos

Limitações gerais

• Atualmente, há suporte para WebSlates no aplicativo Mesh em dispositivos Pc Autônomo e Quest. WebSlates só estão disponíveis para visualização no Editor do Unity no Windows.

• WebSlates em Editor versão prévia não têm alguns recursos de entrada (clique duas vezes, arrastando).

• Ao exibir à distância em Quest, a legibilidade é baixa.

• O áudio não é localizado espacialmente.

• A sincronização de conteúdo da Web é limitada a aplicativos que usam APIs Web para sincronizar conteúdo.

Problemas conhecidos

Consulte as seções webSlate no artigo Problemas conhecidos do kit de ferramentas de malha.

Comentários sobre o conteúdo da Web na Malha

Adoramos comentários e relatórios de bugs! Se você quiser fornecer comentários, use o botão Comentários dentro de qualquer experiência de Malha. Isso garante que seus comentários e relatórios de bugs sejam revisados e incorporados rapidamente. Para comentários do WebSlate, inclua "[conteúdo da Web]" ou um menção do WebSlate em seus comentários.