Trabalho Prático 2 - Visualizador de objetos 3D

Prazo de entrega: 23h59 de 18/11/2017

Changelog:

  • 2017/11/12 @ 21h10 - Atualização dos ficheiros sphere.js, cylinder.js, pyramid.js com faces definidas com orientação positiva.
  • 2017/11/04 @ 13h20 - Atualização do ficheiro cylinder.js com uma correção na função cylinderBuildCircle().
  • 2017/10/28 @ 19h00 - Publicação do enunciado

Introdução

Pretende-se implementar uma aplicação Web (cliente) que permita a visualização de objetos 3D, podendo o utilizador, em cada momento, escolher a projeção a usar, alterar os respetivos parâmetros (nos casos em que tal se aplique), escolher o modo de visualização (superfícies prenchidas ou apenas as arestas), escolher os shaders a usar na visualização e controlar alguns aspetos relacionados com os algoritmos de remoção de superfícies ocultas.

Descrição pormenorizada

Disposição dos elementos na página

A aplicação deverá ter uma disposição gráfica semelhante à esquematizada abaixo.

Do lado direito haverá uma área dedicada à colocação dos elementos da interface que, em cada momento, sejam os pertinentes. Não faz sentido mostrar, na interface gráfica com o utilizador, aqueles elementos que não se aplicam, por exemplo à projeção corrente.

Projeções

O utilizador deverá poder escolher uma das seguintes projeções:

  • Alçado principal;
  • Alçado lateral esquerdo;
  • Planta;
  • Projeção Axonométrica (inicialmente uma dimetrica, correspondendo a A=42 graus, B=7 graus);
  • Projeção Oblíqua (cavaleira de início);
  • Projeção Perspetiva, com plano de projeção em z=0.

Note-se que algumas destas projeções têm parâmetros associados (os valores que ocorrem dentro da respetiva matriz de projeção). Devendo a aplicação oferecer ao utilizador a manipulação desses mesmos parâmetros dentro dos limites que fazem sentido em cada caso.

Em cada momento apenas uma projeção estará visível, devendo ser oferecido ao utilizador a interface necessária à seleção da projeção pretendida em cada momento.

A visualização de cada projeção no visor (viewport) não deverá deformar desnecessariamente a imagem obtida no plano de projeção.

Objetos 3D

O utilizador poderá visualizar apenas um único objeto de cada vez, de entre os seguintes objetos 3D:

  • um cubo;
  • uma pirâmide quadrangular;
  • uma esfera;
  • um torus (donut);
  • um cilindo;
  • um cone

A modelação do cone é um parte integrante do trabalho e faz parte da avaliação. Os outros objetos são oferecidos à partida. Coloque todo o código relativo ao cone num ficheiro próprio (cone.js), o qual deverá constar da pasta que contem o ficheiro .js da sua aplicação, bem como o ficheiro .html. Note-se que a pasta Common, que conterá as bibliotecas utilitárias que usamos regularmente não deverá ser submetida no final.

Os objectos fornecidos (cube.js, pyramid.js, sphere.js, torus.js, cylinder.js) deverão ser colocados na vossa pasta Common, a qual deverá ser uma pasta "irmã" da pasta que conterá o vosso trabalho.

Modos de visualização

Os objetos deverão poder ser visualizados de duas formas distintas:

  • apenas as arestas (wireframe);
  • apenas as superfícies (filed).

Como tal, à semelhança do que sucede com os objetos fornecidos, deverá disponibilizar, para o objeto cónico a implementar, duas funções de desenho distintas: uma para desenhar apenas as arestas e outra para desenhar as superfícies (triângulos).

Controlo da visibilidde

O programa deverá oferecer ao utilizador os meios necessários para ativar/desativar, de forma independente, quer o algoritmo de z-buffer (depth test), quer o teste do produto interno para descartar faces (face culling).

Seleção dos shaders a usar

O programa deverá permitir o carregamento, a pedido do utilizador, dos shaders a usar. Para tal a aplicação deverá dispor dum mecanismo que permita ao utilizador indicar o URL onde cada um dos shaders se encontra disponibilizado. Os shaders a usar de início deverão também estar disponíveis a partir dum url (ver biblioteca initShaders2.js). Sugere-se que a interface ofereça, duma forma rápida, a possibilidade de comutar entre os shaders iniciais e os fornecidos pelo utilizador.

Requisitos técnicos

Requisitos dos shaders

Os shaders que vão ser usados pela equipa docente para testar o programa esperam receber os seguintes atributos:

  • vPosition (vec4) - a posição do vértice no espaço;
  • vNormal (vec3) - a orientação da superfície no vértice.

assim como os seguintes uniformes:

  • mModelView (mat4) - a concatenação da matriz de modelação (mModel) com a matriz de orientação da câmara (mView);
  • mProjection (mat4) - a matriz de projeção;
  • mNormals (mat4) - a matriz que servirá para transformar os vetores normal.

Assim, o programa deverá ser capaz de enviar a informação necessária para que aqueles shaders funcionem corretamente.

Em relação aos shaders fornecidos com a aplicação (deverão estar na mesma pasta que o ficheiro .html), não há qualquer requisito especial. No limite, poderão pintar os objetos duma única cor, caso pretendam.

Outros requisitos

  • Algumas projeções incluem um conjunto de parâmetros, os quais deverão poder ser controlados pelo utilizador, usando para tal efeito a referida interface gráfica da aplicação. Neste controlo, deverá definir-se a gama de valores para a variação dos referidos parâmetros por forma a evitar a definição de valores sem significado.

  • O utilizador poderá escolher, em local apropriado, qual o objeto que pretende visualizar.

  • Os objetos não deverão aparecer deformados ou distorcidos. Para tal, será necessário prestar especial atenção aos eventos de redimensionamento da janela da aplicação.

Ajudas e Esclarecimentos adicionais

Parâmetros das projeções

Os parâmetros das projeções que o utilizador pode controlar na interface são exatamente os parâmetros que surgem nas respetivas matrizes de projeção estudadas na aula.

Matriz de transformação das normais

O cálculo da matriz mNormals é efetuado, na aplicação javascript, a partir da matriz mModelView da seguinte forma:

mNormals = transpose(inverse(mModelView));

Significa isto que, se pretender, poderá calcular esta matriz a partir da matriz mModelView duma determinada vista, sempre que vai passar a proceder ao desenho do objeto nessa mesma vista. Contudo, para as projeções perspetiva e oblíqua, a matriz mNormals deverá ser a matriz identidade.

Matriz mModelView

Cada uma das projecções envolvidas neste trabalho deverão ter a sua própria matriz mModelView, de acordo com a seguinte tabela:

AP Planta ALE AXO PBL PER
I Rx(90) Ry(90) Rx(gamma).Ry(theta) I I

As matrizes Mobl e Mper são as deduzidas nas aulas teóricas, mas tendo o cuidado de preservar a coordenada z do resultado.

Matriz mProjection

a Matriz mProjection deverá ser única para todas as vistas, com exceção da projeção perspetiva e oblíqua, sendo obtida chamando a função ortho(), usando os parâmetros adequados para não haver deformação dos objetos (manter a relação de aspeto entre a largura e a altura do volume de visão e a largura e a altura dos visores).

No caso da projeção oblíqua e da projeção perspetiva, o valor de mProjection será a concatenação da matriz ortho() referida, com a matriz da projeção em causa estudada nas aulas teóricas.

Z-Buffer

Para ligar/desligar o Z-Buffer será necessário usar as seguintes funções:

gl.enable(gl.DEPTH_TEST);

ou

gl.disable(gl.DEPTH_TEST);

Caso se esteja a usar o z-Buffer, então será necessário limpar o conteúdo deste no início de cada quadro (frame), alterando a chamada de gl.clear(), dentro da função render(), para ficar:

...
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);

Regras e Informação Adicional

Composição dos grupos

Os trabalhos práticos deverão ser realizados por grupos de 2 alunos dum mesmo turno prático. Qualquer exceção a esta regra, terá que ser devidamente justificada e autorizada pelo respetivo docente.

Entrega

Os detalhes relativos à entrega serão divulgados oportunamente.

Avaliação

Os trabalhos serão avaliados pelo respetivo docente das aulas práticas e discutidos com os respetivos alunos em data a definir oportunamente.

Partindo do princípio que todas as funcionalidade requeridas são implementadas, os elementos diferenciadores da qualidade dos trabalhos serão, entre outros:

  • (2 valor) a modelação do cone, devidamente parametrizada, não gerando vértices desnecessários e com as coordenadas normal corretas;
  • (2 valores) a organização da interface e a facilidade na sua utilização;
  • (2 valores) a inexistência de situações anómalas (erros de execução, crashes, etc.);