Procedural Terrain – Game LAB – WebGL

Procedural Terrain – Game LAB – WebGL

heightmap1

Visando compartilhar experiências com outros desenvolvedores, criamos a categoria GAME LAB.

As experiências são comentadas, recomendadas (ou não) e de qualquer forma disponibilizadas para uso e teste da comunidade.

Neste post a experiência abordada é:

CRIANDO TERRENOS DE FORMA PROCEDURAL (CODIFICADA) COM EXTENSÕES DO THREE.JS

WEBGL

Nesta experiência, utilizamos o WebGL com as Bibliotecas de JQuery disponíveis.

threex.terrain.js – Terreno

threex.terrain

É um terreno processual gerado a partir de um simplex noise (simples ruído). Você pode exibi-lo em um canvas 3D ou no three.js . Ele fornece a altura em qualquer ponto do mapa, assim você pode facilmente programar a colisão do terreno para andar sobre ele.

threex.skymap.js – Background

threex.skymap

É uma extensão do three.js para possibilitar o uso de skymaps .

threex.texturecube.js – Textura

texture

É uma extensão do three.js, responsável pela aplicação de texturas em objetos.

INDEX.HTM

Todo o alicerce está identificado no arquivo principal, pois aqui é configurado toda a gama de bibliotecas, assim como as posições de câmeras, iluminação, configuração de altura e variação do terreno, movimentação do avatar sobre o terreno e renderização.

Os demais arquivos utilizados são as bibliotecas citadas em adição as dependências básicas para o uso das mesmas.

A configuração do ambiente é essencial, ou seja, você precisa utilizar todas as extensões (presentes do arquivo para download) para que funcione tudo em perfeita ordem.

Não é necessário configuração de um servidor WEB para rodar a aplicação.

heightmapx

Sugestão :

Faça Download do arquivo fonte, abra o index.html e altere  primeiramente os valores numéricos,,, vá testando as alterações que ocorrem no terreno, depois disso, altere valores de câmera iluminação e nível das cores.

A técnica pode ser integrada em ambiente web para demonstrações ou jogos.

As linguagens utilizadas são Html e JavaScript

Veja como funciona:

Baixe e teste o arquivo fonte:

Procedural Terrain – Game LAB – WebGL.zip

Boa sorte e bom estudo.

Anúncios

Deixe um comentário

Preencha os seus dados abaixo ou clique em um ícone para log in:

Logotipo do WordPress.com

Você está comentando utilizando sua conta WordPress.com. Sair / Alterar )

Imagem do Twitter

Você está comentando utilizando sua conta Twitter. Sair / Alterar )

Foto do Facebook

Você está comentando utilizando sua conta Facebook. Sair / Alterar )

Foto do Google+

Você está comentando utilizando sua conta Google+. Sair / Alterar )

Conectando a %s