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)
Último
Último (6)
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/