Download as PDF, PPTX
![[ -1, -1, 0 ], [ 1, -1, 0 ], [ 1, 1, 0 ], [ -1, 1, 0 ]](https://image.slidesharecdn.com/webgl-pdf-151207174529-lva1-app6891/85/The-Power-of-WebGL-Hackeando-sua-GPU-com-JavaScript-7-320.jpg)
![[ -1, -1, 0 ], [ 1, -1, 0 ], [ 1, 1, 0 ], [ -1, 1, 0 ]](https://image.slidesharecdn.com/webgl-pdf-151207174529-lva1-app6891/75/The-Power-of-WebGL-Hackeando-sua-GPU-com-JavaScript-7-2048.jpg)
Uploaded byRaphael Amorim
The Power of WebGL - Hackeando sua GPU com JavaScript
The document discusses the capabilities of WebGL, including how it utilizes GPU for graphics processing, the role of shaders, and the basics of creating 3D graphics within web applications. It touches on optimization techniques for CPU and GPU, performance considerations, and introduces WebVR for virtual reality experiences on the web. The document also includes various references and resources for further exploration of WebGL and related technologies.
More Related Content
![[1A3]지금까지 상상한 표현의 한계를 넘자 WebGL](https://cdn.slidesharecdn.com/ss_thumbnails/1a3webgl-140927231531-phpapp02-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
![[9xD] 개발자, 스터디로 성장하기](https://cdn.slidesharecdn.com/ss_thumbnails/9x-160527072623-thumbnail.jpg?width=600ounds&width=560&fit=bounds)
Similar to The Power of WebGL - Hackeando sua GPU com JavaScript
The Power of WebGL - Hackeando sua GPU com JavaScript
- 1. The Power of WebGL @raphamundi HACKINGYOUR GPU WITH JAVASCRIPT
- 2.
- 4.
- 5. Graphic procedures e.g: surfacingand 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 takesthis data, and some other values (model-view and projection matrix, and others) and turns the 4 points into 4 projected points
- 9. We need tospecify how to draw it: points, wireframe or solid
- 10. The solid projectedsquare gets "discretised" base on the output display
- 11. The system fillsthe space connecting these dots and calculates what pixels on your display need to be drawn
- 12. The rest isup to the fragment shader It gets called for each of these small squares, and the correct output color is calculated.
- 13.
- 14. GPU Run! Run! Asfast as you can!
- 15.
- 17. <canvas/>WebGL Context Define theGeometry and Store it in the Buffer Objects Create and Compile the Shaders ( Vertex && Fragment )
- 18.
- 19.
- 20.
- 21.
- 22.
- 23.
- 24. WebGL is veryhot Damn God! “ ”
- 26.
- 27. ~= 80ºC!!!WebGL makesyour macbook hot. Yeah, literally.
- 28.
- 30. Where are thegraphics costs?
- 31. The first ruleof any optimization is to find where the performance problem is.
- 32. Strategies for optimizing forGPU vs. CPU are quite different.
- 33.
- 34.
- 35. GPU: Texture Compression andMipmaps
- 36.
- 37. WebVR Bringing Virtual Realityto the Web
- 39. Okay, we already trieda lot.
- 40.
- 41. WebVR is anAPI 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.
- 44.
- 45.
- 46. References: • Shaders! Whatare 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 RoadTo 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 VirtualReality Devices From the Past (http:// www.cheatsheet.com/technology/a-trip-down-virtual-reality-road-6- systems-of-the-past.html )