desenvolvimento de ambientes 3d para web usando three js
Post on 27-Jun-2015
706 Views
Preview:
DESCRIPTION
TRANSCRIPT
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
top related