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


Blobby.


Macarena.

Links úteis:

4) Utilize o three.js para criar uma cena com o tema de sua escolha. Devem ser utilizados no mínimo meia dúzia de objetos diferentes, 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:

8) Implemente com o auxílio do componente canvas do tkInter do python, um visualizador de sólidos platônicos.

Tetraedro

Tetraedro

Dodecaedro

Octaedro

Icosaedro

Use como base o código postado no Active State Code, nos links abaixo.
Porém, algumas modificações devem ser realizadas, haja vista que o código é muito simples.

Links úteis:

9) Implemente um gerador e visualizador de curvas de forma livre. No mínimo ele deve suportar curvas de Bézier, Hermite, Splines e Catmulll-Rom splines.

Catmull-Rom Spline.

A sua implementação pode ser escrita em JavaScript com WebGL, Python com pyOpenGL ou C/C++ com openGL.

Além disso:
Links úteis:

/Paulo Roma.