Curso de WebGL


Laboratórios

1) Usando o código da junta de Sierpinski, desenhe o quarto triângulo em vermelho e as bordas de todos os triângulos em preto. Adicione um slider para especificar o nível de subdivisão.


Junta de Sierpinski.

1b) Adicione os requisitos do primeiro trabalho do Cousera.


Torção.

Sem preencher o quarto triângulo.

Links úteis:

2) Desenhe um cubo em 3D e faça-o girar, no seu próprio sistema de coordenadas, em torno de um seus três eixos: x, y ou z.
Utilize o teclado ou um checkbox para selecionar o eixo de rotação. Além disso, o mundo deve poder, opcionalmente, girar em torno do eixo Y global.
A projeção deve ser selecionada via checkbox, entre paralela ou perspectiva.
As duas retas paralelas da figura abaixo e o três eixos locais do cubo, também devem ser desenhados.

Nota: uma rotação em torno de um eixo local (em movimento) é chamada intrínseca e em torno de um eixo global (estático), extrínseca.
Uma matriz de rotação intrínseca é a inversa (transposta) da matrix de rotação extrínseca e vice-versa.


Cubo com projeção Perspectiva.

Links úteis:

3) Implemente a hierarquia do robô do livro do Foley: corpo, cabeça, tronco, braço, ante-braço, mão, perna e pé.

Dica: utilize um cubo ou uma esfera para criar todas as partes do corpo do robô.


Robô (Livro do Foley pag. 311).

Links úteis:

4) Utilize o threejs para criar uma cena com o tema de sua escolha. Devem ser utilizados no mínimo meia dúzia de objetos diferente, incluindo uma hierarquia, uso de textura e skybox, e algum tipo de animação. Considere também a adição de áudio e sistemas de partículas.

Dica: Prepare uma apresentação powerpoint, pois este trabalho deverá ser apresentado em sala de aula.


Ferrari.

Links úteis:

5) O objetivo deste trabalho é atribuir coordenadas de textura aos vértices dos sólidos Platônicos (poliedros perfeitos): tetraedro, cubo, octaedro, dodecaedro e icosaedro.

Para isso, deve-se selecionar uma face do poliedro com o mouse, e rotacionar todas as outras de forma que fiquem coplanares com a face selecionada. Depois é só mapear o poliedro aberto no plano da textura (z=0).

As faces podem ser percorridas em qualquer ordem, sem repetição. Modelando os poliedros como grafos, qualquer caminhamento serve, por exemplo, em profundidade ou amplitude.

Dicas:


Sólidos Platônicos.


Cubo.


Dodecaedro.


Vaca.

Links úteis:

6) Implemente em OpenGL, WebGL, ou em python com PyOpenGL e numpy, um visualizador e texturizador de quádricas:


Hyperbolic Paraboloid.


Ring-Torus, Horn Torus, Spindle Torus.

Links úteis:

7) Implemente com o auxílio do Turtle Graphics em python, um visualizador 2D de curvas paramétricas em coordenadas polares.
Use apenas os comandos para andar para frente ou para trás, levantar ou abaixar a caneta, e virar à direita ou esquerda.


Ângulos entre pares de segmentos.


Majestic, Crassula Dubia, Star, Hyperbola, Cannabis.

São mantidos três pontos: (x0,y0), (x1,y1), (x2,y2).

    (x0,y0) → (x1,y1) é o segmento anterior.
    (x1,y1) → (x2,y2) é o segmento corrente.
Primeiramente, calculamos o ângulo γ entre estes dois segmentos, usando o produto escalar:

     c = cos(γ) = (x1−x0,y1−y0) / √ (x1−x0)2 + (y1−y0)2  ⋅ (x2−x1,y2−y1) / √ (x2−x1)2+(y2−y1)2  
       = ((x1−x0)∗(x2−x1) + (y1−y0)∗(y2−y1)) / √ ((x1−x0)2+(y1−y0)2) ((x2−x1)2+(y2−y1)2
     γ = acos(min(max(c,−1),1)),

para que a tartaruga faça uma curva para direita ou esquerda, de acordo com o sinal do produto vetorial entre os dois segmentos:

    (x1−x0,y1−y0) × (x2−x1,y2−y1) = (x1−x0) ∗ (y2−y1) − (y1−y0) ∗ (x2−x1)
        < 0 → curva para direita
        > 0 → curva para a esquerda

Então, a tartaruga move-se para frente, percorrendo uma distância igual ao comprimento do segmento corrente: 
    √ (x2−x1)2+(y2−y1)2 .

Para o primeiro ponto, precisamos do ângulo α ∈ [0,2π] entre o eixo x e o vetor (x1−x0,y1−y0):

    α = atan2(y0−y1,x0−x1) + π
        atan2(y,x)       → α ∈ [−π,π]
        atan2(−y,−x) + π → α ∈ [0,2π]

Todas as equações sâo multiplicadas por um fator de escala, para que seja possível controlar os valores das coordenadas.
Desse modo, deve-se ajustar as coordenadas do mundo no Turtle Graphics, para que as curvas sejam desenhadas sempre com o mesmo tamanho.

Links úteis:

/Paulo Roma.