Upgrade to Pro — share decks privately, control downloads, hide ads and more …

The Mighty WebGL

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.

Raphael Amorim

June 04, 2016
Tweet

More Decks by Raphael Amorim

Other Decks in Programming

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