The Outrun Amy Liptrot

O que é e como fazer funcionar

O outrun amy liptrot não é o tipo de projeto que você baixa e rodaria em cinco minutos sem dor de cabeça. É uma implementação caseira de um gerador de paisagens synthwave com renderização em tempo real, construída sobre Three.js e shaders GLSL personalizados. A pessoa que disponibilizou o código fez isso como exercício criativo, não como produto final. Isso significa que a estrutura é sólida, mas a documentação é praticamente inexistente e os comentários no código vão de escassos a inexistentes em lugares críticos. O core do projeto gira em torno de dois shaders principais: um vertex shader que deforma uma grade plana para criar as montanhas e estradas em perspectiva, e um fragment shader que aplica a paleta de cores neon com gradiente de horizonte. A grade é subdividida em segmentos ao longo do eixo Z, e cada vértice recebe um deslocamento baseado em uma função seno combinada com ruído Perlin. A ilusão de movimento infinito vem simplesmente de resetar os segmentos que saem da câmera para a frente do frustum, sem qualquer sistema de instancing real. Aqui está algo que ninguém menciona nos tutoriais: a paleta de cores não é fixa. Ela é interpolada linearmente entre três stops definidos no uniform do fragment shader. Se você mudar a ordem desses stops, o horizonte pode ficar visualmente Quebrado porque a interpolação não respeita a separação de canais RGB como você esperaria. Eu passei duas horas num projeto tentando deixar o céu num tom específico e no final descobri que estava reordenando stops ao invés de ajustar os valores de cor diretamente.

O pipeline de importação também é mais chato do que parece. O asset de textura de estrelado é carregado via Three.js TextureLoader com um caminho relativo. Se você servir o projeto via npm ou webpack sem configurar o resolve de módulos adequadamente, a textura simplesmente não carrega e o shader volta pro fundo preto padrão. Não há fallback visual, não há mensagem de erro no console que indique o problema com clareza. Você fica olhando pra uma tela preta sem saber se o bug é no shader ou no carregamento. Outro ponto prático: a taxa de quadros cai de forma despropicional quando você aumenta o nível de subdivisão da grade além de 128 segmentos. Isso acontece porque cada frame o motor recalcula todos os vértices no CPU antes de enviar ao GPU, ao invés de manter a malha atualizada apenas no shader. Em máquinas mais antigas ou em dispositivos móveis, isso significa que o efeito que deveria rodar a 60fps vai pras baixas 20 a 30. A solução que eu encontrei foi limitar a subdivisão a 64 segmentos e compensar visualmente aumentando a densidade da nuvem de estrelas no background, que não tem custo de processamento relevante. Se você quer baixar e rodar localmente, o repositório original está no GitHub sob o nome do autor. Os passos básicos são clonar, instalar as dependências com npm install e rodar npm run dev. Mas espere encontrar erros de compatibilidade com versões mais recentes do Three.js. O projeto usa uma API que foi descontinuada na versão 152, então se você tiver o Three.js mais atual instalado, vai precisar fazer downgrade ou patchear manualmente três linhas no arquivo principal do renderizador.

Uma alternativa viável se você não quer lidar com manutenção de código legado é usar uma versão mais nova de um projeto similar, como o outrun engine que circula pela comunidade, que mantém a mesma estética mas com uma base de código atualizada e suporte a WebGL2 nativo. A diferença é que você perde algumas customizações específicas que o amy liptrot tinha, como a variação de cor da estrada que reage à velocidade simulada.