Desenvolvimento de ambientes 3D para Web usando Three JS

1.353 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.353
No SlideShare
0
A partir de incorporações
0
Número de incorporações
17
Ações
Compartilhamentos
0
Downloads
21
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

×