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

More Decks by Raphael Amorim

Other Decks in Programming


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

  2. RAPHAEL AMORIM raphamundi raphamorim raphamorim.com

  3. None
  4. Shaders

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

    and geometry generation.
  6. The "3D" Effect * A thanks Jaume Sanchez for the

    awesome resource!
  7. [ -1, -1, 0 ], [ 1, -1, 0 ],

    [ 1, 1, 0 ], [ -1, 1, 0 ]
  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
  9. We need to specify how to draw it: points, wireframe

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

  11. The system fills the space connecting these dots and calculates

    what pixels on your display need to be drawn
  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.
  13. GPU Graphics Processing Unit

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

  15. WebGL Web Graphics Library

  16. None
  17. <canvas/> WebGL Context Define the Geometry and Store it in

    the Buffer Objects Create and Compile the Shaders ( Vertex && Fragment )
  18. Atributes

  19. Atributes Uniforms

  20. Atributes Uniforms Varyings

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

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

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

  24. WebGL is very hot Damn God! “ ”

  25. None
  26. ~= 80ºC!!!

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

  28. FPS Frame Per Second

  29. None
  30. Where are the graphics costs?

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

    the performance problem is.
  32. Strategies for optimizing for GPU vs. CPU are quite different.

  33. CPU optimization

  34. GPU: Optimizing Model Geometry

  35. GPU: Texture Compression and Mipmaps

  36. DrawCalls

  37. WebVR Bringing Virtual Reality to the Web

  38. None
  39. Okay, we already tried a lot.

  40. till now:

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

  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/)
  43. MozVR mozvr.com

  44. bit.ly/1lDsdLR

  45. Thanks! :)

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