Primeira Fase - sososilvei/Trabalho-CG GitHub Wiki

Objetivo

A primeira fase do projeto consiste na visualização de um modelo com um grande número de vértices e faces. No nosso projeto, utilizamos um arquivo .obj encontrado no repositório de modelos 3D cgtrader: https://www.cgtrader.com/free-3d-models/vehicle/sci-fi/small-space-fighter. A primeira fase também envolve a aplicação de shaders para redimensão do volume de visão, iluminação e animação.

Implementação

Optamos por utilizar a API WebGL, implementando, portanto, a primeira fase do trabalho em HTML5 e JavaScript. Outra API escolhida para a realização do trabalho foi a biblioteca JavaScript Three.js, que utiliza WebGL. Essa biblioteca possui recursos imporantes que nos auxiliaram ao longo do desenvolvimento do trabalho, como, por exemplo, as funções OBJLoader(), para carregar um arquivo .obj e RequestAnimationFrame(), que cria animações suaves, fazendo com que o browser administre a taxa de quadros. Vale ressaltar que essa biblioteca está disponível sob a licença MIT.

Primeiramente foram importados os scripts da biblioteca. Foi criado o Vertex Shader para aplicar uma translação e uma redimenção da escala do objeto, com as matrizes translation e scale. Já o Fragment Shader foi utilizado para adicionar a cor azul ao objeto.

Foram criados um renderer, uma cena com fundo preto e uma câmera, a qual foi posicionada logo em seguida. Futuramente, será adicionada uma imagem de fundo de nebulosa e estrelas, tendo em vista que, ao final do trabalho, pretende-se criar um jogo ou animação com tema espacial. Também foi criada uma luz direcional para mostrar o objeto ecolhido, no caso, uma nave espacial.

O objeto foi, então, carregado, tendo sua posição e sua escala definidas antes de ser adicionado à cena. Depois de definir a rotação, para facilitar a visualização do objeto 3D, foi feita a chamada de função requestAnimatioFrame(), mencionada anteriormente.

Resultado