Pixel shaders based UI components + writing your first pixel shader
1 like1,011 views
The document discusses the use of pixel shaders, specifically GLSL (OpenGL Shading Language), for web development and game graphics. It highlights GLSL's capabilities for creating flexible and optimized UI components, offering advantages such as parallel processing on GPUs. Additionally, it provides instructions for integrating GLSL components into web applications and references resources for further exploration of shader development.
Pixel shaders based UI components + writing your first pixel shader
- 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. You can develop UI components with GLSL
- 14. Technology behind parallel processing on GPU
- 15. So you can mine cryptocurrencies with GLSL
- 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.
- 36. Once a fall morning...
- 37. Once a fall morning... I`ve got an issue in JIRA
- 39. It was ok But sometimes...
- 44. Reimplementing with GPU transformations shift towards opacity
- 46. No repaints! Win, win, win!
- 47. Next day... Denis please make us same spinner which is blue and other width of a line
- 48. 8,64 Mb VRAM +10 Mb RAM +100 Kb to load for a single spinner
- 49. We have a problem Approach is just not flexible enough
- 50. GLSL to the rescue Shaders allow to render component flexibly still keeping it on GPU
- 51. github.com/PixelsCommander/ pixel-shaders-workshop Please open this repo and check commits there
- 52. Refined Github Please install this browser extension
- 53. editor.thebookofshaders.com Please open this URL to get hands on shader development experience
- 55. URL Please open this URL to get hands on shader development experience
- 56. How to use GLSL component in your Web application?
- 57. npm i glsl-component <glsl-component style=”width:100px; height:100px;”> Your shader code </glsl-component>
- 59. The book of shaders Might be the next step