O Unity é um motor de jogo incrivelmente versátil que permite aos programadores integrar uma vasta gama de suportes nos seus projetos. No entanto, lhe falta uma das funcionalidades mais interessantes — a capacidade de processar conteúdo Web, como HTML, CSS e JavaScript, diretamente em texturas de uma cena 3D. Esta técnica abre possibilidades para a criação de elementos dinâmicos e interativos nos seus projetos Unity, tais como navegadores de jogos, menus, chats, wiki interno ou apresentações de dados ao vivo.

Para conseguir esta funcionalidade no seu projeto, você terá de integrar uma web view no Unity. O DotNetBrowser é uma biblioteca .NET separada utilizada para carregar e renderizar páginas Web e suporta .NET Standard 2.0, portanto, pode ser integrada ao Unity.

Neste artigo, descreveremos como renderizar conteúdo da Web como uma textura em Unity3D usando o DotNetBrowser.

Chat HTML e menu de jogo no projeto com base no modelo FPS Microgame.

Configurar o seu projeto Unity 

Primeiro, certifique-se de que o seu ambiente Unity está configurado e pronto para ser utilizado. Abra o Unity Hub e crie um novo projeto 3D para Windows, macOS ou Linux.

Instalar o DotNetBrowser 

Para instalar as dependências do DotNetBrowser como um pacote, faça o seguinte:

  1. No menu superior do Unity Editor, clique no item de menu “Window → Package Manager” para abrir o Package Manager.

  2. Na janela Package Manager, clique no botão “+” no canto superior esquerdo, e selecione o item de menu “Install package from git URL…”.

    Cole o URL do pacote fornecido abaixo e clique no botão “Instalar”.

    https://github.com/TeamDev-IP/DotNetBrowser-Examples.git?path=csharp/unity3d/Dependencies

  3. Aguarde até que o pacote seja instalado e as dependências do DotNetBrowser sejam restauradas. O pacote instalado deve ter a seguinte aparência: O Package Manager com o pacote de dependências do DotNetBrowser instalado.

    O Package Manager com o pacote de dependências do DotNetBrowser instalado.

  4. Feche o Package Manager. Esta etapa está concluída.

Criar um material para apresentar a textura da Web 

Antes de renderizar o conteúdo da Web no objeto 3D, é necessário criar um material que apresentará a página Web como uma textura.

  1. Criar um novo material:
    1. Clique com o botão direito do mouse na pasta “Assets”, selecione “Create → Material” e nomeie-o como “WebTextureMaterial”.
    2. Defina o shader com uma textura para ele. O shader “Unlit/Texture” servirá à nossa tarefa.
    3. Defina “Tiling X” igual a -1. Isso é necessário porque o Chromium envia os dados de píxeis  invertidos por X. O WebTextureMaterial com “Tiling X” definido para -1.

      O WebTextureMaterial com "Tiling X" definido para -1.

  2. Criar um plano:
    1. Adicione um avião à cena. Você pode fazê-lo indo ao menu superior e selecionando “GameObject → 3D Object → Plane”.
    2. Vire-o para a câmara de filmagem.
  3. Arraste o material para o avião. Este material apresentará o conteúdo da Web.

Renderizar conteúdo web para textura 

Agora, é necessário processar a página Web ou o conteúdo HTML numa textura que possa ser aplicada ao material.

  1. Crie um script para controlar o conteúdo da Web. Crie um novo script C# ( clique com o botão direito do mouse em “Assets → Create → Empty C# Script” e nomeie-o como BrowserScript).
  2. Escreva o código para carregar e processar o conteúdo da Web. Aqui está um script de exemplo que inicializa o DotNetBrowser para renderizar uma página da Web em uma textura:
using DotNetBrowser.Browser;
using DotNetBrowser.Browser.Widgets.Handlers;
using DotNetBrowser.Engine;
using DotNetBrowser.Geometry;
using DotNetBrowser.Handlers;
using DotNetBrowser.Ui;
using UnityEngine;
using Color = DotNetBrowser.Ui.Color;

namespace Assets.Scripts
{
    public class BrowserScript : MonoBehaviour
    {
        private Texture2D texture;

        // A URL a renderizar.
        public string DefaultUrl = "https://html5test.teamdev.com";

        // A largura predefinida do navegador.
        public uint Width = 1024;
        // A altura predefinida do navegador.
        public uint Height = 768;

        // Os últimos dados de bitmap renderizados da página web do navegador.
        public Bitmap Bitmap { get; private set; }
        // Uma instância de IBrowser controlada por este script.
        public IBrowser Browser { get; private set; }
        // Uma instância de IEngine controlada por este script.
        public IEngine Engine { get; private set; }

        public void Awake()
        {
            // Inicializa o engine DotNetBrowser.
            EngineOptions engineOptions = new EngineOptions.Builder
            {
                LicenseKey = "your_license_key",
                RenderingMode = RenderingMode.OffScreen
            }.Build();
            Engine = EngineFactory.Create(engineOptions);

            // Criar uma instância do browser.
            Browser = Engine.CreateBrowser();

            // Define o tamanho e a transparência do browser.
            Browser.Size = new Size(Width, Height);
            Browser.Settings.TransparentBackgroundEnabled = true;
            Browser.Settings.DefaultBackgroundColor =
                new Color(0, 0, 0, 0);

            // Configura a renderização do conteúdo do browser 
            // e salva a imagem renderizada.
            var provider = (IOffScreenRenderProvider)Browser;
            provider.PaintHandler = new Handler<PaintParameters>(p =>
                Bitmap = p.View);
            provider.Show();
        }

        public void OnDestroy() => Engine?.Dispose();

        public void Update()
        {
            if (Bitmap == null) return;

            int newWidth = (int)Bitmap.Size.Width;
            int newHeight = (int)Bitmap.Size.Height;
            if (texture == null || texture.width != newWidth
                || texture.height != newHeight)
            {
                texture = new Texture2D(newWidth, newHeight,
                    TextureFormat.BGRA32, true);
                var render = gameObject.GetComponent<MeshRenderer>();
                render.material.mainTexture = texture;
            }

            texture.SetPixelData((byte[])Bitmap.Pixels, 0);
            texture.Apply(true);
        }

        public void Start()
        {
            Browser.Navigation.LoadUrl(DefaultUrl);
        }
    }
}

Depois disso, especifique a chave de licença correta em EngineOptions.Builder. O usuário pode obter uma licença de avaliação gratuita de 30 dias.  Preencha o formulário abaixo e você receberá imediatamente um e-mail com a chave de licença.

Enviando…

Desculpe, o envio foi interrompido

Tente novamente. Se o problema persistir, contate-nos através do endereço info@teamdev.com.

Leia e aceite os termos para continuar.

A sua chave de avaliação pessoal de DotNetBrowser e o guia de início rápido chegarão à sua caixa de entrada de e-mail dentro de alguns minutos.

Atribua o script e teste 

Anexe o script ao avião que criou anteriormente. Com um script e o material, o painel Inspetor do avião deve ter o seguinte aspecto:

O painel Inspector do avião.

O painel Inspetor do avião.

Reproduzir a cena no Unity. O conteúdo da Web deve agora ser apresentado no material que aplicou ao avião. Se você tiver feito tudo corretamente, deverá ver isto:

O conteúdo da Web apresentado num avião em Unity.

O conteúdo da Web é renderizado num avião em Unity.

Tornar o conteúdo da Web interativo 

Você pode ainda adicionar interatividade ao conteúdo da Web. Por exemplo, você pode permitir que os usuários interajam com a página Web utilizando um mouse ou uma tela tátil.

Poderá ser necessário capturar os cliques do usuário, os movimentos do mouse ou os eventos de toque para os passar para o conteúdo Web para interação.

A maneira mais simples de capturar os cliques do mouse no Unity é adicionar os métodos OnMouseDown() e OnMouseUp() ao BrowserScript:

// Obtém o ponto atual do mouse nas coordenadas do navegador.
private Point GetMousePoint()
{
    // Certifica que a câmera principal existe na cena.
    if (Camera.main != null)
    {
        // Cria um raio a partir da posição da câmera 
        // através da posição atual do mouse na tela.
        var ray = Camera.main.ScreenPointToRay(Input.mousePosition);

        // Executa um raycast para detectar colisão
        // com objetos na cena.
        if (Physics.Raycast(ray, out RaycastHit hit))
        {
            // Calcula as coordenadas no espaço do browser.
            // Como "Tiling X" é -1, a coordenada X é invertida.
            int x = (int)(Width * (1 - hit.textureCoord.x));
            int y = (int)(Height * hit.textureCoord.y);

            return new Point(x, y);
        }
    }

    // Retorna nulo se nenhum ponto válido puder ser calculado  
    // (por exemplo, nenhuma câmera ou nenhum acerto de raycast).
    return null;
}


// OnMouseDown é chamado quando o usuário pressiona o botão do mouse
// enquanto está sobre o colisor.
public void OnMouseDown()
{
    var location = GetMousePoint();
    if (location == null) return;
    var args = new MousePressedEventArgs
    {
        Location = location,
        // OnMouseDown é chamado apenas para os cliques esquerdos.
        Button = MouseButton.Left, 
        ClickCount = 1
    };
    Browser.Mouse.Pressed.Raise(args);
}

public void OnMouseUp()
{
    var location = GetMousePoint();
    if (location == null) return;
    var args = new MouseReleasedEventArgs
    {
        Location = location,
        Button = MouseButton.Left,
        ClickCount = 1
    };
    Browser.Mouse.Released.Raise(args);
}

O Unity fornece uma série de opções para capturar a entrada do usuário e o DotNetBrowser possui todas as APIs necessárias para passar eventos de teclado, toque e mouse para o navegador. Você pode consultar a documentação sobre a simulação da entrada. Você também pode verificar o exemplo completo do DotNetBrowser in Unity3D, com o comportamento básico de foco, mouse e interações de teclado implementados.

Otimizar o desempenho 

A renderização de conteúdo web em Unity pode consumir muitos recursos. Para otimizar o desempenho:

  • Evite renderizar imagens grandes do navegador se elas forem desnecessárias: O tamanho do navegador é também o tamanho da textura, e as texturas grandes têm um impacto no desempenho geral.
  • Otimizar o conteúdo da Web: Certifique-se de que a página Web que está renderizando está otimizada para um carregamento rápido e uma utilização mínima de recursos.
  • Ajustar a taxa de quadros: Limite a taxa de quadros ou a taxa de atualização do navegador renderização, evitando atualizações desnecessárias de textura. Por exemplo, não é necessário atualizar os pixéis da textura se o mapa de bits não tiver sido atualizado pelo DotNetBrowser.

Conclusão 

A renderização de conteúdo Web numa textura em Unity3D lhe permite criar navegadores no jogo, painéis de controle interativos baseados na Web ou mesmo conteúdo transmitido em live. Com a utilização de bibliotecas como o DotNetBrowser, é relativamente fácil integrar conteúdos da Web diretamente no seu projeto Unity. Seguindo estes passos, você pode começar a experimentar diferentes conteúdos Web, integrá-los com Unity e abrir novas possibilidades para aplicações 3D interativas.

Este guia lhe dá uma base sólida para apresentar conteúdo Web como texturas em Unity. Se você estiver construindo um projeto de realidade virtual, um jogo ou uma aplicação interativa, estas técnicas podem melhorar significativamente a experiência do usuário.