Como fazer um jogo 3D para navegador

Descreva o mundo, a câmera e os controles, mantenha o escopo pequeno e traga seus modelos em GLB; o Go Bananas cria o jogo com three.js e adiciona os controles de celular.

Um jogo 3D roda no navegador como qualquer outra página da web, desenhado com WebGL. O Go Bananas cria jogos 3D com three.js, a biblioteca 3D mais usada na web, então você pode descrever um jogo de corrida, um labirinto ou um pequeno mundo aberto e jogar poucos minutos depois. Este guia cobre o que deixa o 3D mais difícil que o 2D, como pedir um jogo 3D, como usar seus próprios modelos 3D e cenas escaneadas, e como manter o jogo rodando bem no celular.

Por que o 3D é mais difícil que o 2D

Três coisas ficam mais difíceis no momento em que você adiciona uma dimensão:

A câmera. No 2D, a tela é o mundo. No 3D, você escolhe onde a câmera fica: atrás do jogador, acima da cena ou dentro da cabeça do jogador. Uma câmera ruim deixa um bom jogo impossível de jogar.
Os controles. No 3D, é preciso andar e olhar em volta. No teclado, isso é WASD ou setas mais o mouse. No celular, são dois polegares numa tela lisa.
O desempenho. Cada quadro desenha todos os objetos visíveis. Modelos detalhados, texturas grandes e muitas luzes deixam o jogo lento, e os celulares ficam lentos primeiro.

Bons jogos 3D mantêm isso sob controle: uma câmera clara, controles simples e um mundo do tamanho que um celular consegue desenhar.

Como o Go Bananas faz jogos 3D

Quando você pede um jogo 3D, a IA escreve o jogo com three.js, com loaders para arquivos de modelos 3D. Ela segue regras que importam no 3D:

Os controles de celular já vêm incluídos. Jogos 3D ganham um joystick virtual no lado esquerdo da tela para andar, arrastar para olhar no lado direito e botões de ação de uns 60 pixels de largura, para os polegares acertarem.
As teclas não rolam a página. As setas e a barra de espaço vão para o jogo em vez de rolar o navegador.
O jogo ocupa a tela inteira e se ajusta quando a janela muda de tamanho ou o celular gira.
As capturas de tela funcionam. A imagem de prévia do jogo é tirada da cena 3D alguns segundos depois do início da primeira partida.
Os modelos podem ser movidos no editor. O editor tem uma aba 3D Position (posição 3D) onde você posiciona os modelos na cena.

Pedindo um jogo 3D

Diga a câmera, os controles e o objetivo. Por exemplo:

Um jogo 3D em terceira pessoa em que você é um robozinho explorando uma ilha flutuante. A câmera segue atrás do robô. Colete 10 cristais brilhantes antes de o sol se pôr, em 3 minutos. Estilo low-poly com cores suaves.

Um labirinto 3D em primeira pessoa. As paredes são cercas vivas, e o chão é grama. Encontre a saída antes que o tempo acabe. Mostre uma pequena bússola apontando para a saída.

Alguns hábitos ajudam:

Escolha uma câmera. "A câmera segue atrás", "vista de cima", "primeira pessoa".
Mantenha o mundo pequeno. Uma ilha, uma arena, uma pista. Um jogo 3D pequeno terminado vale mais que um grande pela metade, e todo jogo tem um limite de tamanho.
Escolha um estilo simples. Low-poly e cores chapadas ficam bonitos e rodam rápido. Peça "realista" só quando você trouxer seus próprios modelos ou cenas.
Diga o que o jogador faz a cada poucos segundos. Coletar, desviar, correr, mirar.

Usando seus próprios modelos 3D

Você pode enviar seus próprios modelos e usá-los em qualquer jogo que criar. Envie pelo painel de criação (o botão 📎, ou arraste o arquivo para o chat), pela aba Assets (arquivos) com Upload Asset (enviar arquivo), ou no editor. Você precisa de uma conta verificada.

Formato	O que o Go Bananas faz com ele
GLB	Mantém como está. Recomendado.
glTF	Empacota num único GLB. Ele precisa ser autocontido, ou enviado num ZIP com os arquivos dele.
FBX	Converte para GLB. As texturas são reduzidas para no máximo 512 por 512 pixels; as animações são mantidas.
OBJ	Mantém como está, mas sem materiais nem texturas.
ZIP	Um pacote com um modelo, as texturas e os buffers dele. Um modelo é mantido.

GLB é o formato para usar. Ele guarda a malha, os materiais, as texturas e as animações num só arquivo, e o site o analisa quando você envia. Ele lê os nomes das animações, a altura e a orientação do modelo, e calcula uma escala, uma rotação e um ajuste de altura em relação ao chão para que o modelo fique em pé num tamanho razoável. Essa informação vai para a IA, então seu modelo aparece do lado certo, na escala certa e no chão.

Para usar um modelo, digite @ na caixa de criação ou de edição e escolha o modelo. O nome dele vai entre aspas:

Faça de "knight" o personagem do jogador. Quando o jogador apertar espaço, rode a animação de ataque do cavaleiro.

No código, um jogo encontra seu modelo em window.GAME_ASSETS.models['knight'].url, em que o nome é o nome do arquivo sem a extensão. Renomear o arquivo nos seus assets muda esse nome.

Limites: cada envio pode ter até 200 MB, e o armazenamento da sua conta comporta 100 MB numa conta gratuita ou 1 GB no Pro. Você pode enviar até 20 arquivos por hora.

Cenas fotorrealistas com Gaussian splats

Gaussian splats são um tipo mais novo de 3D: em vez de triângulos, a cena é uma nuvem de milhões de pontinhos coloridos e suaves, capturados de fotos reais. Eles parecem fotos de verdade, principalmente para lugares e objetos escaneados da vida real.

O Go Bananas aceita splats de três jeitos:

Arquivos PLY de ferramentas de captura de splats. Eles são reduzidos a 500.000 pontos e empacotados num formato que carrega rápido.
Arquivos SPZ, um formato compacto de splats. Eles são reduzidos a 300.000 splats.
Uma foto. Envie um JPG ou PNG no painel de criação e escolha Turn into 3D (transformar em 3D). O site transforma essa única foto numa cena de splats.

Você pode ver os splats e os modelos no visualizador 3D do site antes de usá-los. Cenas de splats são ótimos cenários: um quarto escaneado para um jogo de escape room, uma rua de verdade para uma perseguição. Elas não têm formas de colisão como as fases modeladas, então descreva por onde o jogador pode andar, ou coloque paredes invisíveis simples em volta da área de jogo.

Mantendo jogos 3D rápidos no celular

O celular é onde os jogos 3D sofrem primeiro. Estas dicas deixam seu jogo fluido:

Fique de olho na quantidade de polígonos. Um personagem low-poly de alguns milhares de triângulos já basta. Cenas feitas de muitos modelos detalhados pesam rápido.
Use texturas pequenas. 512 ou 1024 pixels de lado bastam para a maioria dos objetos do jogo. Envios em FBX são reduzidos para 512 pixels automaticamente; no GLB, diminua as texturas antes de enviar.
Use poucas luzes e sombras. Cada luz e cada sombra custam tempo de desenho. Uma luz de sol com sombras simples costuma ficar bom.
Reaproveite modelos. Vinte cópias de uma árvore custam menos que vinte árvores diferentes.
Cuidado com os splats. Mesmo reduzida a 300.000 ou 500.000 pontos, uma cena de splats é pesada. Uma cena de splats por jogo é um bom limite, e vale testar num celular mais antigo.
Teste num celular de verdade. Abra o jogo no seu celular e teste os controles com os polegares. Se o joystick ou os botões parecerem apertados, peça para aumentá-los.

Resolvendo problemas comuns no 3D

O modelo está grande demais, pequeno demais ou deitado. Envie em GLB para o site conseguir medi-lo, ou diga à IA: "Diminua "knight" para metade do tamanho e deixe ele em pé."
O modelo está invisível. Ele pode estar dentro do chão ou atrás da câmera. Peça: "Mova "knight" para ele ficar em pé no chão na frente da câmera", ou use a aba 3D Position.
O OBJ não tem cores. Arquivos OBJ chegam sem materiais. Converta o modelo para GLB e envie de novo.
O jogo trava no celular. Peça menos objetos, menos detalhes ou nada de sombras no celular.