Desenvolvimento de ambiente 3D para Web usando Three JS Nathalia Sautchuk Patrício

Esta obra foi licenciada sob uma Licença Creative Commons Attribution-ShareAlike 3.0 Brazil License.

WebGL

!   Novo padrão para gráficos 3D na Web

! Desenvolvido e mantido pelo Kronos Group

!   Parte da família de tecnologias do HTML5 ! Não é uma especificação oficial do W3C

! Suportada pela maioria dos browsers com suporte ao HTML5

! Renderização de gráficos com o uso de Javascript no browser

Definição Técnica

! É uma API

! Baseado no OpenGL ES 2.0

! Mistura-se com outros conteúdos web

! Foi construído para aplicações web dinâmicas

! É multiplataforma

! É uma especificação aberta, sem royalties

Conceitos básicos

! Sistema de coordenadas 3D ! Coordenadas x, y e z

Sistema de coordenadas

Disponível em https://commons.wikimedia.org/wiki/File:3D_coordinate_system.svg

Conceitos básicos

! Modelo (ou mesh) ! objeto composto por um ou mais polígonos

! Polígono ! composto por vértices

!   ex. triângulo, quadrado

! Vértice ! triplas x, y, z, definindo posições de coordenadas no

espaço 3d

Modelos

Disponível em http://upload.wikimedia.org/wikipedia/commons/8/88/Blender3D_UVTexTut1.png

Conceitos básicos

! Materiais ! propriedades da superfície de um modelo

! Texturas ! definem a aparência de uma superfície

! Luzes ! definem como a cena estará iluminada

Conceitos básicos

! Transformações ! operações que movem o modelo por uma quantidade

relativa sem a necessidade de mover cada vértice ! permitem um modelo ser escalado, rotacionado e

transladado

! Matrizes ! representa as transformações ! objetos matemáticos contendo um array de valores

usados para computar as posições transformadas dos vértices

Conceitos básicos

! Câmeras ! objeto que define onde o usuário está posicionado e

para onde está orientado

! Perspectiva ! tamanho do campo de visão

!   Viewport ! limites retangulares onde desenhar

Conceitos básicos

! Projeções ! Câmeras são quase sempre representados usando uma

dupla de matrizes

!   A primeira matriz define a posição e a orientação da câmera

!   A segunda matriz é a matriz de projeção aquela que representa a translação das coordenadas 3D da câmera no espaço de desenho 2D do viewport

Conceitos básicos

Disponível em http://obviam.net/index.php/3dprogramming-with-android-projections-perspective/

Conceitos básicos

! Shaders !   São pedaços de código de programa que implementa

algoritmos para obter os pixels de um modelo da tela

!   São definidas em uma linguagem de alto nível e compiladas em código utilizável pela GPU

! WebGL requer shaders

Three.js

! É uma engine 3D em JavaScript

! Criada por Mr.doob, Ricardo Cabello Miguel, um programador de Barcelona, Espanha

! Provê um conjunto fácil e intuitivo de objetos que são comumente encontrados em gráficos 3D

! É rápida, usa várias das boas técnicas de engines gráficas

! É poderosa, com vários tipos de objetos e utilidades

! É open source, hospedada no GitHub

Three.js

! Esconde os detalhes da renderização 3D

! É orientado a objetos

! É rico em recursos

! É rápido

! Suporta interação

! Faz a matemática

Three.js

!   Tem suporte a diversos tipos de formatos de arquivo 3D

! É extensível

! Também funciona com o canvas 2D do HTML5

Three.js

! Coisas que a Three.js não faz ! Não é uma engine de jogos nem uma plataforma de

mundo virtual

! Não tem diversos recursos comumente encontradas nesses sistemas como letreiros, avatares, e física

! Não tem suporte a conexões em rede para construção de jogos multiplayer

Three.js

! GitHub ! https://github.com/mrdoob/three.js/

Quer saber mais?

!   Blogs e Sites !   Learning WebGL

http://learningwebgl.com/blog/

! WebGL Fundamentals http://games.greggman.com/game/webgl-fundamentals/

! WebGL Chrome Experiments http://www.chromeexperiments.com/webgl

! WebGL Mozilla Labs Demos https://developer.mozilla.org/en-US/demos/tag/tech:webgl/

Quer saber mais?

!   Blogs e Sites ! Aerotwist

http://www.aerotwist.com/tutorials/getting-started-with-three-js/

!   Learning Three.js http://learningthreejs.com/

! BKcore http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html

! AlteredQualia http://alteredqualia.com/

Quer saber mais?

! Lista oficial de discussão sobre a especificação

! http://www.khronos.org/webgl/public-mailing-list/

! Lista sobre desenvolvimento com WebGL

! https://groups.google.com/forum/?fromgroups#!forum/webgl-dev-list

Quer saber mais?

! Alguns livros…

Disponível em http://oreilly.com/

Obrigada! Nathalia Sautchuk Patrício nathalia@cgi.br