Desenvolvimento de ambientes 3D para Web usando Three JS
•
2 gostaram•2,063 visualizações
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.
Recomendados
Mais conteúdo relacionado
Mais procurados
Mais procurados (20)
Semelhante a Desenvolvimento de ambientes 3D para Web usando Three JS
Semelhante a Desenvolvimento de ambientes 3D para Web usando Three JS (20)
Mais de Nathalia Sautchuk Patricio
Mais de Nathalia Sautchuk Patricio (16)
Desenvolvimento de ambientes 3D para Web usando Three JS
- 1. Desenvolvimento de ambiente 3D para Web usando Three JS Nathalia Sautchuk Patrício
- 2. Esta obra foi licenciada sob uma Licença Creative Commons Attribution-ShareAlike 3.0 Brazil License.
- 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. 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. Conceitos básicos ! Sistema de coordenadas 3D ! Coordenadas x, y e z
- 6. Sistema de coordenadas Disponível em https://commons.wikimedia.org/wiki/File:3D_coordinate_system.svg
- 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
- 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. 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. 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. 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 !
- 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. 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. 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. Three.js ! Tem suporte a diversos tipos de formatos de arquivo 3D ! É extensível ! Também funciona com o canvas 2D do HTML5
- 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
- 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. 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. 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. Quer saber mais? ! Alguns livros… Disponível em http://oreilly.com/