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.

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