Race Game
Jogo de corrida 1v1 side-scrolling no navegador, desenvolvido com Three.js puro, com física customizada, áudio procedural e modelagem gráfica 100% gerada via código.
O Contexto e o Desafio
Este projeto nasceu da vontade de explorar os limites da renderização 3D e da manipulação de dados diretamente no navegador, sem depender de engines ou frameworks de interface.
O desafio central foi criar um jogo de corrida fluido e imersivo, controlando um veículo com física de suspensão realista, onde a dependência de assets externos fosse reduzida a quase zero. O resultado é uma aplicação leve, rápida e que extrai o máximo desempenho das APIs nativas da web.
Destaques Técnicos e Engenharia
O maior diferencial na arquitetura dessa aplicação é a forte dependência de geração procedural, tanto para a parte visual quanto para a sonora.
Modelagem Procedural
O veículo (inspirado no clássico Toyota Bandeirante) foi construído inteiramente via código no Three.js, eliminando a necessidade de carregar arquivos 3D tradicionais (.glb). A malha foi montada com formas geométricas primitivas sobrepostas para eliminar costuras, com detalhes como janelas com clearcoat e faróis hemisféricos.
Engenharia de Som
O jogo não utiliza arquivos de áudio pré-gravados para o motor. O som é sintetizado matematicamente em tempo real via Web Audio API. O sistema simula um motor de 4 marchas com transições dinâmicas de frequência, oscilações de RPM e um efeito de descompressão do turbo (blow-off) criado através da filtragem precisa de ruído branco.
Física Customizada
A mecânica do carro não utiliza bibliotecas de física prontas. Foi implementado um sistema matemático próprio que calcula o comportamento independente da suspensão (mola-amortecedor), a influência da gravidade durante saltos e a interação da hitbox dinâmica 2D contra a malha do terreno gerado.
Sistema de Partículas
A fumaça do escapamento é gerenciada por um pool otimizado de 100 sprites em Canvas API. A densidade, direção e turbulência das partículas reagem de forma dinâmica às ações do jogador, mudando com a ativação do turbo, aumento de velocidade ou durante manobras no ar.
Lobby e Otimização
O menu inicial apresenta uma visualização 3D interativa do carro, suportando eventos de drag e zoom para mouse e touch. O loop principal da corrida foi desenhado para atualizar a telemetria, renderizar o cenário e processar a inteligência do bot inimigo sem comprometer a taxa de quadros do navegador.
Próximos Passos
A infraestrutura atual serve como MVP de um ecossistema competitivo. As próximas etapas focam em transformar a experiência individual em uma plataforma multiplayer.
PvP Online
Implementação de modo multiplayer em tempo real utilizando WebSockets para sincronização de estado entre jogadores.
Ranking e Leaderboard
Sistema de pontuação persistente com tabela de classificação global e histórico de corridas por jogador.
Economia Interna
Desenvolvimento de moeda virtual e sistema de apostas nas corridas, com potencial de evolução estrutural para uma plataforma competitiva.