Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Liberty Global)
0 likes561 views
The document discusses the use of pixel shaders for web development, particularly using GLSL alongside traditional web technologies like HTML, CSS, and JavaScript. It highlights the benefits of GLSL for optimizing graphics rendering in web applications and explains the practical implementation through example code and resources. The historical context of GLSL's introduction in OpenGL v2 and its advantages for efficient parallel processing on GPUs are also covered.
More Related Content
Similar to Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Liberty Global) (20)
Пиксельные шейдеры для Web-разработчиков. Программируем GPU / Денис Радин (Liberty Global)
- 1. Pixel shaders for Web developers And how they can be used in regular Web apps
- 4. State of the art games engineering
- 5. + Using React/Redux for managing HTML UI and game graphics
- 7. How many languages are well supported on the Web? We all know four
- 8. HTML, CSS, JS, SVG Here they are
- 9. Actually there are more HTML, CSS, JS, SVG, …?
- 10. GLSL It is cool and special
- 11. GLSL works everywhere OpenGL do JS, C++, C#, Java, Unity, Swift etc.
- 12. Technology behind games visual effects
- 13. Technology behind parallel processing on GPU
- 14. So you can mine cryptocurrencies with GLSL
- 15. And of course you can develop UI components with GLSL
- 16. Got interested enough? In diving deeper?
- 17. History of GLSL When? and why?
- 18. OpenGL pipeline before GLSL
- 19. Not customizable
- 20. Fog please!
- 22. fogValue = distanceToCamera * fogDensity; pixelColor = currentColor * (fogColor * fogValue); For every pixel
- 24. GLSL shaders introduced in OpenGL v2 2004
- 25. OpenGL pipeline with GLSL
- 26. GLSL features Because it is really special
- 27. So runs on a <canvas /> A part of WebGL
- 28. Compiles on GPU Quiсkly and close to hardware
- 29. Cross platform Since compiled every time
- 30. Highly optimized Since compiled on hardware for hardware
- 31. Parallel execution GTX 970 runs 1664 shader processes at once
- 32. Parallel execution Means the data is sent once per whole pass for all elements
- 33. Strict typing float, integer, boolean, vec2, vec3, vec4 mat2, mat3, mat4
- 34. Designed for math distance, dot, clamp, min / max, abs, pow, mod, sin, cos, tan, artan etc.
- 37. Once a fall morning...
- 38. Once a fall morning... I`ve got an issue on JIRA
- 40. It was ok But sometimes...
- 45. Reimplementing with GPU transformations shift towards opacity
- 47. Reimplementing with GPU transformations shift towards opacity
- 48. No repaints! Win, win, win!
- 49. Next day... Denis please make us same spinner which is blue and other width of a line
- 50. 8.5 Mb RAM+100 Kb to load for a single spinner 150*120*120*4=8,64 mb of RAM to keep layers textures And every sprite sheet itself is 100 Kb to load...
- 52. We have a problem Approach is just not flexible enough
- 53. GLSL to the rescue Shaders allow to render component flexibly still keeping it on GPU
- 54. editor.thebookofshaders.com Please open this URL to get hands on shader development experience
- 55. Refined Github Please install this browser extension
- 56. github.com/PixelsCommander/ pixel-shaders-workshop Please open this repo and check commits there
- 58. URL Please open this URL to get hands on shader development experience
- 59. How to use GLSL component in your Web application?
- 60. npm i glsl-component <glsl-component style=”width:100px; height:100px;”> Your shader code </glsl-component>
- 62. The book of shaders Might be the next step