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
2. RAPHAEL AMORIM raphamundi raphamorim raphamorim.com
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 display
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
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! “ ”
26. ~= 80ºC!!!
27. ~= 80ºC!!! WebGL makes your macbook hot. Yeah, literally.
28. FPS Frame Per Second
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
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 )