Transferir como PDF, PPTX
Carregado porNathalia Sautchuk Patricio
Desenvolvimento de ambientes 3D para Web usando Three JS
O documento aborda o desenvolvimento de ambientes 3D para web utilizando a biblioteca three.js e a API WebGL, que permite a renderização de gráficos 3D em navegadores. São apresentados conceitos fundamentais como coordenadas 3D, modelos, materiais, luzes, câmeras, shaders, e as características da three.js como uma engine 3D orientada a objetos e fácil de usar. O texto também oferece recursos e links para aprender mais sobre WebGL e three.js.
Desenvolvimento de ambientes 3D para Web usando Three JS
- 1. Desenvolvimento de ambiente 3Dpara Web usando Three JS Nathalia Sautchuk Patrício
- 2. Esta obra foilicenciada sob uma Licença Creative Commons Attribution-ShareAlike 3.0 Brazil License.
- 3. WebGL ! Novopadrã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 ! É umaAPI ! 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 decoordenadas 3D ! Coordenadas x, y e z
- 6. Sistema de coordenadas Disponívelem https://commons.wikimedia.org/wiki/File:3D_coordinate_system.svg
- 7. Conceitos básicos ! Modelo (oumesh) ! ! 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.
- 9. Conceitos básicos ! Materiais ! ! Texturas ! ! propriedades dasuperfí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 quemovem 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 quedefine 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ãoquase 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.
- 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 engine3D 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 detalhesda renderização 3D ! É orientado a objetos ! É rico em recursos ! É rápido ! Suporta interação ! Faz a matemática
- 17. Three.js ! Temsuporte a diversos tipos de formatos de arquivo 3D ! É extensível ! Também funciona com o canvas 2D do HTML5
- 18. Three.js ! Coisas que aThree.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.
- 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? ! Listaoficial 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? ! Algunslivros… Disponível em http://oreilly.com/
- 24.