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.

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. MozVRmozvr.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 )