Desenvolvimento de ambientes 3D para Web usando Three JS
-
Upload
nathalia-sautchuk-patricio -
Category
Technology
-
view
706 -
download
5
description
Transcript of Desenvolvimento de ambientes 3D para Web usando Three JS
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 [email protected]