Cenario WebGL HeightMap 3D

Procedural Terrain – Game LAB – WebGL

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

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

threex.terrain.js – Terreno

É 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

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

threex.texturecube.js – Textura

É 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.

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

As linguagens utilizadas são Html e JavaScript

html Javascript

O que achou desse ?
  • legal (0%)
  • interessante (0%)
  • nada (0%)
  • chato (0%)
  • lixo (0%)
Author: admin

Deixe um comentário

O seu endereço de e-mail não será publicado. Campos obrigatórios são marcados com *