Pseudo3D - Perspectiva

Quem se aventurou nos jogos de corrida mais antigos como Top Gear (SNES), Outrun (Arcade), etc.. vai lembrar muito dos resultados que iremos ver nesta postagem. Para muitos, o "3D" antigo é algo ultrapassado e sem graça, más para outros assim como eu, vemos estes gráficos old-school sendo algo muito criativo. Abaixo apresento uma estrada em "3D".

O Pseudo3D é chamado assim pois na realidade, não é um 3D real. Não há plano 3D como nos jogos de hoje. O que ocorre nada mais é que uma ilusão, na qual parece algo 3D. O 3D real não era possível antigamente pois os sistemas operacionais, ou hardwares não tinham a capacidade de renderizar milhares polígonos em um tempo agradável, ou seja, na quela época, não havia como criar estes gráficos com a tecnologia que havia. 

Se não podemos renderizar polígonos para criar nossos gráficos, como podemos reproduzir algo pseudo 3D? Como vimos nas postagens de Mode7, utilizamos métodos de Raster, ou seja, ilusões com imagem/pixeis. Uma delas é a criação de uma PG (Progressão Geométrica). Uma PG é uma sequencia numérica que cresce ou decresce pelo produto por uma taxa constante. Nessa progressão, os seus termos a partir do segundo é igual ao produto do termo anterior por uma constante denominada razão. Exemplo:

(1, 2, 4, 8, 16, 32, 64, 128...) Esta sequencia é uma PG de razão 2.

A fórmula utilizada para uma PG é (levando em consideração que n deve ser maior que 1):

Caso utilizarmos um canvas representando este método utilizando linhas, teremos este resultado:

Já conseguimos perceber um tom de profundidade na imagem. Neste resultado, utilizei uma PG de razão 2. Podemos utilizar qualquer razão desde que seja maior que 1. 

Vamos a prática! Na demostração do código, utilizei a linguagem JavaScript, por ser simples e fluida. 

1. Vamos começar. Primeiramente devemos criar um arquivo index.html para conter nosso canvas e o mesmo ser renderizado em nosso browser.

2. Agora vamos ao JavaScript. Criaremos um pseudo3d.js e importaremos este arquivo para nosso index.

3. Iniciaremos o nosso código. Vamos criar nossas variáveis de tamanho do canvas e obter o contexto do mesmo para podermos renderizar nossas linhas.

4. Agora criaremos nossa PG com razão 2. Eu irei fazer uma PG inversa, ou seja, utilizarei o operador de divisão para que as linhas comecem de baixo para cima, do maior para o menor.

Pronto! Agora temos uma representação Pseudo3D por linhas em nosso canvas. Para obter melhores resultados, podemos diminuir o valor da razão, lembrando que a mesma deve ser sempre maior que 1.

Com o valor de rezão sendo 1.2, tive um resultado mais atraente:

Para criarmos um campo de grama Pseudo3D, utilizaremos o mesmo método, porém invés de renderizar linhas, iremos renderizar todas as posições de Y, trocando nossa cor em determinado resultado.

1. Podemos utilizar nosso mesmo código, más vamos precisar adicionar algumas variáveis a mais.

Veja que eu criei a variável reason (Razão) com o valor 1.2, e a variável depth (Profundidade) para controlar a profundidade, pois nossa instrução for deverá percorrer todas as linhas da tela, e não somente as linhas que iremos desenhar como no método anterior.

2. Agora vamos ajustar nossa instrução for para percorrer toda a nossa tela.

3. Por fim, iremos criar uma troca de cor conforme o valor da PG.

4. Por fim, um detalhe que irá deixar nosso resultado bastante interessante, é desenhar um céu para não manter um fundo branco.

5. O resultado deste algoritmo é este. Muito parecido com nosso Mode7 não acha?

Obrigado! Logo irei postar algo sobre estradas em Pseudo3D. Até mais!