The Power of WebGL - Hackeando sua GPU com JavaScript

The Power of WebGL - Hackeando sua GPU com JavaScript

Vamos aprender a hackear placas de vídeo com Javascript usando WebGL (Web Graphics Library) e a usar a mesma tecnologia para criar realidade virtual usando MozVR. WebGL é uma API em JavaScript, disponível a partir do novo elemento canvas da HTML5, que oferece suporte para renderização de gráficos 2D e gráficos 3D.

Ed35943d3199ea37b1b60c39615e8163?s=128

Raphael Amorim

December 05, 2015
Tweet

Transcript

  1. 3.
  2. 4.
  3. 7.

    [ -1, -1, 0 ], [ 1, -1, 0 ],

    [ 1, 1, 0 ], [ -1, 1, 0 ]
  4. 8.

    Vertex shader takes this data, and some other values (model-view

    and projection matrix, and others) and turns the 4 points into 4 projected points
  5. 11.

    The system fills the space connecting these dots and calculates

    what pixels on your display need to be drawn
  6. 12.

    The rest is up to the fragment shader It gets

    called for each of these small squares, and the correct output color is calculated.
  7. 16.
  8. 17.

    <canvas/> WebGL Context Define the Geometry and Store it in

    the Buffer Objects Create and Compile the Shaders ( Vertex && Fragment )
  9. 18.
  10. 25.
  11. 29.
  12. 36.
  13. 38.
  14. 40.
  15. 42.

    WebVR • Sechelt (http://mozvr.com/projects/sechelt/) • Quake III (http://media.tojicode.com/q3bsp/) • vizor.io

    (http://vizor.io/fthr/vr_cube/edit) • Primoseeditor (https://www.primroseeditor.com/#fullscreen) • Inspirit (http://inspirit.unboring.net/)
  16. 46.

    References: • Shaders! What are they and what can they

    do for me? - 
 Jaume Sanchez (https://www.clicktorelease.com/talks/ scotlandjs-2015/) • Dive into 0.016 seconds of WebGL - @yomotsu (https:// speakerdeck.com/yomotsu/dive-into-0-dot-016-seconds-of-webgl) • Getting started with three.js and WebGL - 
 Jaume Sanchez (https://www.clicktorelease.com/talks/ jsconfbp-2015/)
  17. 47.

    References: • The Road To WebVR • Replacing reality with

    JavaScript - 
 Jaume Sanchez (https://www.clicktorelease.com/talks/ fullstackfest-2015/slides/#0) • WebGL tutorial MDN (https://developer.mozilla.org/en-US/docs/ Web/API/WebGL_API/Tutorial) • The Rise and Fall and Rise of Virtual Reality (http:// www.theverge.com/a/virtual-reality/oral_history)
  18. 48.

    References: • 6 Virtual Reality Devices From the Past (http://

    www.cheatsheet.com/technology/a-trip-down-virtual-reality-road-6- systems-of-the-past.html )