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 tecnolo...
Definição Técnica
!

É uma API

!

Baseado no OpenGL ES 2.0

!

Mistura-se com outros conteúdos web

!

Foi construído par...
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
!   e...
Modelos

Disponível em
http://upload.wikimedia.org/wikipedia/commons/8/88/Blender3D_UVTexTut1.png
Conceitos básicos
!

Materiais
!

!

Texturas
!

!

propriedades da superfície de um modelo

definem a aparência de uma su...
Conceitos básicos
!

Transformações
!
!

!

operações que movem o modelo por uma quantidade
relativa sem a necessidade de ...
Conceitos básicos
!

Câmeras
!

!

objeto que define onde o usuário está posicionado e
para onde está orientado

Perspecti...
Conceitos básicos
!

Projeções
Câmeras são quase sempre representados usando uma
dupla de matrizes
!   A primeira matriz d...
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 m...
Three.js
!

É uma engine 3D em JavaScript

!

Criada por Mr.doob, Ricardo Cabello Miguel, um
programador de Barcelona, Esp...
Three.js
!

Esconde os detalhes da renderização 3D

!

É orientado a objetos

!

É rico em recursos

!

É rápido

!

Supor...
Three.js
!   Tem suporte a diversos tipos de formatos de arquivo

3D
!

É extensível

!

Também funciona com o canvas 2D d...
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 div...
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.gr...
Quer saber mais?
!   Blogs e Sites
!
Aerotwist
http://www.aerotwist.com/tutorials/getting-started-with-threejs/
!   Learni...
Quer saber mais?
!

Lista oficial de discussão sobre a especificação
!
http://www.khronos.org/webgl/public-mailing-list/

...
Quer saber mais?
!

Alguns livros…

Disponível em http://oreilly.com/
Obrigada!
Nathalia Sautchuk Patrício
nathalia@cgi.br
Próximos SlideShares
Carregando em…5
×

Desenvolvimento de ambientes 3D para Web usando Three JS

1.290 visualizações

Publicada em

Na palestra feita na Web.br 2013 foram abordados conceitos iniciais de WebGL e apresentada a engine livre Three.js. Foram construídos alguns exemplos de ambientes 3D para Web através do uso dessa engine.

Publicada em: Tecnologia
0 comentários
1 gostou
Estatísticas
Notas
  • Seja o primeiro a comentar

Sem downloads
Visualizações
Visualizações totais
1.290
No SlideShare
0
A partir de incorporações
0
Número de incorporações
17
Ações
Compartilhamentos
0
Downloads
20
Comentários
0
Gostaram
1
Incorporações 0
Nenhuma incorporação

Nenhuma nota no slide

Desenvolvimento de ambientes 3D para Web usando Three JS

  1. 1. Desenvolvimento de ambiente 3D para Web usando Three JS Nathalia Sautchuk Patrício
  2. 2. Esta obra foi licenciada sob uma Licença Creative Commons Attribution-ShareAlike 3.0 Brazil License.
  3. 3. 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
  4. 4. 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
  5. 5. Conceitos básicos ! Sistema de coordenadas 3D ! Coordenadas x, y e z
  6. 6. Sistema de coordenadas Disponível em https://commons.wikimedia.org/wiki/File:3D_coordinate_system.svg
  7. 7. 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
  8. 8. Modelos Disponível em http://upload.wikimedia.org/wikipedia/commons/8/88/Blender3D_UVTexTut1.png
  9. 9. Conceitos básicos ! Materiais ! ! Texturas ! ! propriedades da superfície de um modelo definem a aparência de uma superfície Luzes ! definem como a cena estará iluminada
  10. 10. 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
  11. 11. 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
  12. 12. 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 !
  13. 13. Conceitos básicos Disponível em http://obviam.net/index.php/3dprogramming-with-android-projections-perspective/
  14. 14. 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
  15. 15. 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
  16. 16. Three.js ! Esconde os detalhes da renderização 3D ! É orientado a objetos ! É rico em recursos ! É rápido ! Suporta interação ! Faz a matemática
  17. 17. Three.js !   Tem suporte a diversos tipos de formatos de arquivo 3D ! É extensível ! Também funciona com o canvas 2D do HTML5
  18. 18. 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
  19. 19. Three.js ! GitHub ! https://github.com/mrdoob/three.js/
  20. 20. 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/
  21. 21. Quer saber mais? !   Blogs e Sites ! Aerotwist http://www.aerotwist.com/tutorials/getting-started-with-threejs/ !   Learning Three.js http://learningthreejs.com/ ! BKcore http://bkcore.com/blog/3d/webgl-three-js-workflow-tips.html ! AlteredQualia http://alteredqualia.com/
  22. 22. 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
  23. 23. Quer saber mais? ! Alguns livros… Disponível em http://oreilly.com/
  24. 24. Obrigada! Nathalia Sautchuk Patrício nathalia@cgi.br

×