Construindo um mundo aberto no navegador, parte 1: Começamos tentando quebrá-lo
Por Oleg Sidorkin, CTO e cofundador da Cinevva
Chegando agora? Consulte o guia da série. Ele explica o que é um spike e traz links para todas as partes.
Estamos construindo um mundo aberto multiplayer que roda inteiramente no navegador. Sem instalação, sem loja de aplicativos, apenas uma URL. O maior risco inicial era óbvio: será que um navegador consegue renderizar um mundo 3D persistente com taxas de quadros jogáveis e ainda deixar margem para jogabilidade, física e rede?
A maioria dos projetos de mundo aberto fracassa em uma ordem previsível. Primeiro surge um bom conceito. Depois, uma cena bonita. Então você percebe que seu orçamento de frame já acabou antes mesmo de existir jogabilidade.
Queríamos responder à questão do orçamento de renderização antes de investir em qualquer outra coisa. Por isso, o Spike 1 pulou o trailer bonito e foi direto para as medições.
Abrir o Spike 1 em uma nova aba ↗ · Ver código-fonte
A configuração era simples de propósito. Uma malha de terreno de 512 metros, altura procedural gerada por ruído senoidal em camadas com atenuação nas bordas da ilha, um plano de água, névoa atmosférica e 500 objetos instanciados. Usamos WebGL puro com Three.js, mapeamento de tons ACES e nenhuma sombra.
Não nos importávamos com a aparência. Queríamos saber se a cena permanecia estável enquanto a câmera se movia por ela.
Duas conclusões desse spike moldaram todo o projeto.
Primeiro, confirmamos que tínhamos uma margem real de desempenho em desktops, desde que mantivéssemos a primeira versão disciplinada. Isso nos deu confiança para tentar uma arquitetura de terreno mais complexa depois.
Segundo, criamos um contrato de referência. Cada spike seguinte precisava justificar seu custo em relação a essa cena. Se um novo recurso tivesse boa aparência, mas custasse caro demais, ele não era promovido.
Essa disciplina de manter uma referência se tornou crucial mais tarde, quando encontramos artefatos nas emendas, transições entre LODs mistos e geração de malha orientada por compute shaders. Sem uma referência estável, todo bug parece maior do que realmente é.
Na parte 2, passamos da renderização para a sensação dos controles. Física em um Worker parece ótima nos documentos de arquitetura. Mas isso só importa se o personagem ainda responder imediatamente quando você pressionar uma tecla.
Tecnologias mencionadas neste capítulo
Terreno com mapa de altura. Uma grade 2D na qual cada célula armazena um único valor de elevação. A GPU desloca uma malha plana no vertex shader para criar a superfície do terreno. Mapas de altura são compactos (um chunk de 65x65 ocupa cerca de 8 KB em 16 bits), adequados à GPU e rápidos de renderizar. A limitação é que eles não conseguem representar cavernas, saliências ou qualquer superfície que se dobre sobre si mesma. Para saber mais sobre as limitações dos mapas de altura e o que vem depois deles, consulte nosso guia de geração de paisagens.
Three.js. A biblioteca de renderização que usamos durante todo este projeto. A Three.js abstrai o WebGL 2 (e, posteriormente, o WebGPU) em um grafo de cena com câmeras, luzes, materiais e objetos geométricos. Ela fornece InstancedMesh para renderizar muitas cópias da mesma geometria em uma única draw call, além de frustum culling, materiais PBR e pós-processamento. Consulte a Three.js no GitHub. Para entender como a Three.js se encaixa em uma stack de mundo aberto para navegador, consulte nosso guia de tecnologias 3D para navegador.
InstancedMesh. Um recurso da Three.js que renderiza N cópias da mesma geometria com uma única draw call, cada uma com posição, rotação e escala diferentes. As transformações por instância são armazenadas em um buffer de atributos de matrizes. Foi assim que renderizamos 500 objetos no Spike 1 sem fazer 500 draw calls separadas. Para vegetação em grande escala, o culling de instâncias orientado pela GPU leva essa técnica ainda mais longe. Consulte nosso guia de paisagens sobre culling de vegetação na GPU.
Orçamento de frame. A 60 fps, cada frame tem
Parte 1 de 12.
A seguir: Parte 2 — Física em Worker e o receio do atraso nos controles
Guia da série: /blog/2026-02-25-open-world-browser-series-guide