Pro Yearly is on sale from $80 to $50! »

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.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

June 04, 2016
Tweet

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.
  19. None
  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Ѻ=αϫЄυϴЀ

  34. None
  35. None
  36. None
  37. None
  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