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
   

   View Slide

2. RAPHAEL AMORIM
   IS
   @RAPHAMUNDI
   “MENINO DO COMPUTADOR”
   

   View Slide

3. Momento ba dum tss
   

   View Slide

4. WebGL?
   

   View Slide

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 .
   

   View Slide

6. Como funciona &
   Ecossistema.
   ᐺ΅ԫͺ΄ͩ;΁ͺ͚ͼ扖ͭΔͭΝ͜ғ
   ᇙ槱;ኞ䙪ᔮ̶
   

   View Slide

7. Primeiro;
   "Back to Basics"
   ᇙ䖀
   

   View Slide

8. HTMLCanvasElement.getContext
   

   View Slide

9. CanvasRenderingContext2D
   * github.com/raphamorim/origami.js
   

   View Slide

10. WebGLRenderingContext
    

    View Slide

11. WebGL2RenderingContext
    OpenGL ES 3.0
    

    View Slide

12. Objetos
    

    View Slide

13. Rendering pipeline
    

    View Slide

14. [ -1, -1, 0 ], [ 1, -1, 0 ], [ 1, 1, 0 ], [ -1, 1, 0 ]
    

    View Slide

15. Vertex shader recebe esses e outros
    valores (model-view, projection matrix e
    outros) e transforma em pontos
    projetados.
    

    View Slide

16. Nós precisamos especificar
    como irá ser desenhado:
    points, wireframe ou solid
    

    View Slide

17. O quadrado da projeção sólida se torna
    "discretizado" no ecrã de saída
    

    View Slide

18. O sistema preenche os espaços
    conectando pontos e
    calculando os pixels no seu display que
    precisam ser desenhados.
    

    View Slide

19. View Slide

20. O resto é com o fragment shader
    Ele chama cada um dos pequenos
    quadrados (ligamentos entre pontos) e
    preenche com a cor correta.
    

    View Slide

21. Ecossistema
    

    View Slide

22. 
    WebGL
    WebVR
    WebAR
    • MozVR
    • A-Frame
    • Threejs
    • Processing.js
    • Pixi.js
    • Origami.js
    • [….]
    • ???
    

    View Slide

23. WebVR
    Quando a Web se encontra com a Realidade Virtual
    

    View Slide

24. O que é Realidade Virtual?
    ϝЄώϰϸϷίϷϓΰ;΅֜ͽͯ͡Ҙ
    

    View Slide

25. Supletivo Realidade Virtual
    ϝЄώϰϸϷίϷϓΰ΄πЀϞαϸͫ΢͵䵉ݥ
    ϝЄώϰϸϷίϷϓΰ;΅֜ͽͯ͡Ҙ
    

    View Slide

26. 1838 - Fotos Estereoscópicas & Pinturas
    ᒈ֛ٟ፥ѿ憙宛ᘏ
    

    View Slide

27. 1929 - Link Trainer,
    O primeiro simulador de vôo
    ϷЀμϕϹЄϗЄ̵ϢήЄφϕϢ϶αϕτϬϲϹЄό
    

    View Slide

28. 1930s - Ficção Científica
    prevendo Realidade Virtual
    ςαεЀφϢΰμτϴЀ΄ᇔ承΅VRΨԨ介ͭΔͭ͵
    

    View Slide

29. 1950s - Sensorama de Morton Heilig
    ϯЄϕЀHeilig΄Sensorama
    

    View Slide

30. 1969 - Realidade Artificial
    Ոૡ匍䋚ఽ
    

    View Slide

31. 1995 - Nintendo Virtual Boy
    ձॠझϝЄώϰϸϩЄα
    

    View Slide

32. Como isso funciona?
    ֵ͚ොҘ
    

    View Slide

33. 3D != Imerssão
    3DѺ=αϫЄυϴЀ
    

    View Slide

34. View Slide

35. View Slide

36. View Slide

37. View Slide

38. WebVR
    

    View Slide

39. iswebvrready.org
    

    View Slide

40. MozVR
    mozvr.com
    

    View Slide

41. A-FRAME
    aframe.io
    

    View Slide

42. Caso Responsivo
    ϹφϪЀτϣξЄφ
    

    View Slide

43. Flickr VR
    flickr.com/vr
    

    View Slide

44. bit.ly/cejs-vr
    

    View Slide

45. Galeria de fotos VR alimentada por tweets com hashtag específica
    

    View Slide

46. bit.ly/cejs-firebase
    

    View Slide

47. Obrigado!
    @raphamundi
    

    View Slide