UI Components on Pixel Shaders — Write Your First Shader
summary
Shows how to use WebGL/GLSL pixel shaders to render UI components (example: a spinner) instead of heavy sprite textures. Demonstrates a small (~70-line) GLSL implementation integrated via a glsl-component with Canvas, using smoothstep for anti-aliasing and sinusoidal easing for animation to save tens of megabytes compared to bitmap textures, plus a workshop repo editor for hands-on use.
AI-written summary · about
chapters (9)
- 0:00Pixel shader intro
- 3:38GLSL history
- 7:37GLSL features
- 10:36First shader theory
- 14:30Spinner optimization
- 21:14Animated spinner
- 32:52Web app shader
- 37:14GLSL future
- 48:03Q&A
related talks
56mPixel Shader-based UI Components and Let’s Write Your First Pixel Shader
33mPainting by Functions
32mDemystifying Pixel Shaders (AGSL)
39mLife of a pixel: A visual explanation of rendering performance
53mPixel Shaders for Web Developers
26mCreative experiments with WebGL shaders in JavaScript
01h 08mThe quest for the graphical web
43mWebGL 2D Rendering with PixiJS