The Mighty WebGL

Conhecer sobre a base do WebGL (Web Graphics Library) e seu ecossistema, além de a usar a mesma tecnologia para criar aplicações web com suporte a realidade virtual ( WebVR ). WebGL é uma API em JavaScript, disponível a partir do elemento canvas do HTML5, que oferece suporte para renderização de gráficos 2D e gráficos 3D.

Transcript

1. THE MIGHTY WEBGL @raphamundi’s
2. RAPHAEL AMORIM IS @RAPHAMUNDI “MENINO DO COMPUTADOR”
3. Momento ba dum tss
4. WebGL?
5. JavaScript API com o foco em rendering de gráficos interativos, 3D e 2D, em qualquer navegador compatível sem o uso de plug-ins. Sendo utilizada em elementos HTML5 <canvas>.
6. Como funciona & Ecossistema. ᐺ΅ԫͺ΄ͩ;΁ͺ͚ͼ扖ͭΔͭΝ͜ғ ᇙ槱;ኞ䙪ᔮ̶
7. Primeiro; "Back to Basics" ᇙ䖀
8. HTMLCanvasElement.getContext
9. CanvasRenderingContext2D * github.com/raphamorim/origami.js
10. WebGLRenderingContext
11. WebGL2RenderingContext OpenGL ES 3.0
12. Objetos
13. Rendering pipeline
14. [ -1, -1, 0 ], [ 1, -1, 0 ], [ 1, 1, 0 ], [ -1, 1, 0 ]
15. Vertex shader recebe esses e outros valores (model-view, projection matrix e outros) e transforma em pontos projetados.
16. Nós precisamos especificar como irá ser desenhado: points, wireframe ou solid
17. O quadrado da projeção sólida se torna "discretizado" no ecrã de saída
18. O sistema preenche os espaços conectando pontos e calculando os pixels no seu display que precisam ser desenhados.
20. O resto é com o fragment shader Ele chama cada um dos pequenos quadrados (ligamentos entre pontos) e preenche com a cor correta.
21. Ecossistema
22. <canvas> WebGL WebVR WebAR • MozVR • A-Frame • Threejs • Processing.js • Pixi.js • Origami.js • [….] • ???
23. WebVR Quando a Web se encontra com a Realidade Virtual
24. O que é Realidade Virtual? ϝЄώϰϸϷίϷϓΰ;΅֜ͽͯ͡Ҙ
25. Supletivo Realidade Virtual ϝЄώϰϸϷίϷϓΰ΄πЀϞαϸͫ΢͵䵉ݥ ϝЄώϰϸϷίϷϓΰ;΅֜ͽͯ͡Ҙ
26. 1838 - Fotos Estereoscópicas & Pinturas ᒈ֛ٟ፥ѿ憙宛ᘏ
27. 1929 - Link Trainer, O primeiro simulador de vôo ϷЀμϕϹЄϗЄ̵ϢήЄφϕϢ϶αϕτϬϲϹЄό
28. 1930s - Ficção Científica prevendo Realidade Virtual ςαεЀφϢΰμτϴЀ΄ᇔ承΅VRΨԨ介ͭΔͭ͵
29. 1950s - Sensorama de Morton Heilig ϯЄϕЀHeilig΄Sensorama
30. 1969 - Realidade Artificial Ոૡ匍䋚ఽ
31. 1995 - Nintendo Virtual Boy ձॠझϝЄώϰϸϩЄα
32. Como isso funciona? ֵ͚ොҘ
33. 3D != Imerssão 3DѺ=αϫЄυϴЀ
38. WebVR
39. iswebvrready.org
40. MozVR mozvr.com
41. A-FRAME aframe.io
42. Caso Responsivo ϹφϪЀτϣξЄφ
43. Flickr VR flickr.com/vr
44. bit.ly/cejs-vr
45. Galeria de fotos VR alimentada por tweets com hashtag específica
46. bit.ly/cejs-firebase
47. Obrigado! @raphamundi