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

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.

Raphael Amorim

December 05, 2015
Tweet

More Decks by Raphael Amorim

Other Decks in Programming

Transcript

  1. The Power of
    WebGL
    @raphamundi
    HACKING YOUR GPU WITH JAVASCRIPT

    View Slide

  2. RAPHAEL AMORIM
    raphamundi raphamorim
    raphamorim.com

    View Slide

  3. View Slide

  4. Shaders

    View Slide

  5. Graphic procedures
    e.g: surfacing and texturing, lighting and shadowing, texture and
    geometry generation.

    View Slide

  6. The "3D" Effect
    * A thanks Jaume Sanchez for the awesome resource!

    View Slide

  7. [ -1, -1, 0 ], [ 1, -1, 0 ], [ 1, 1, 0 ], [ -1, 1, 0 ]

    View Slide

  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

    View Slide

  9. We need to specify how to draw it:
    points, wireframe or solid

    View Slide

  10. The solid projected square gets "discretised"
    base on the output display

    View Slide

  11. The system fills the space connecting these dots
    and calculates what pixels on your display
    need to be drawn

    View Slide

  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.

    View Slide

  13. GPU
    Graphics Processing Unit

    View Slide

  14. GPU
    Run! Run! As fast as you can!

    View Slide

  15. WebGL
    Web Graphics Library

    View Slide

  16. View Slide


  17. WebGL Context
    Define the Geometry and
    Store it in the Buffer Objects
    Create and Compile the Shaders
    ( Vertex && Fragment )

    View Slide

  18. Atributes

    View Slide

  19. Atributes
    Uniforms

    View Slide

  20. Atributes
    Uniforms
    Varyings

    View Slide

  21. WebGL Water
    http://madebyevan.com/webgl-water/

    View Slide

  22. WebGL Blossom
    http://www.bongiovi.tw/experiments/
    webgl/blossom/

    View Slide

  23. Google Maps Cube
    http://www.playmapscube.com/

    View Slide

  24. WebGL is very hot
    Damn God!
    “ ”

    View Slide

  25. View Slide

  26. ~= 80ºC!!!

    View Slide

  27. ~= 80ºC!!!
    WebGL makes your
    macbook hot. Yeah,
    literally.

    View Slide

  28. FPS
    Frame Per Second

    View Slide

  29. View Slide

  30. Where are the graphics
    costs?

    View Slide

  31. The first rule of any
    optimization is to find
    where the performance
    problem is.

    View Slide

  32. Strategies for
    optimizing for GPU vs.
    CPU are quite different.

    View Slide

  33. CPU optimization

    View Slide

  34. GPU: Optimizing Model
    Geometry

    View Slide

  35. GPU: Texture Compression
    and Mipmaps

    View Slide

  36. DrawCalls

    View Slide

  37. WebVR
    Bringing Virtual Reality to the Web

    View Slide

  38. View Slide

  39. Okay,
    we already tried a lot.

    View Slide

  40. till now:

    View Slide

  41. WebVR is an API
    http://mzl.la/1IK6pnf

    View Slide

  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/)

    View Slide

  43. MozVR
    mozvr.com

    View Slide

  44. bit.ly/1lDsdLR

    View Slide

  45. Thanks! :)

    View Slide

  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/)

    View Slide

  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)

    View Slide

  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 )

    View Slide