Pixel Shader-based UI Components and Let’s Write Your First Pixel Shader
summary
Shows how pixel shaders written in GLSL for WebGL can be used in web UIs instead of large sprite sheets, and demonstrates a live workshop that implements a reusable animated spinner as a 79-line parameterized shader to replace dozens of multi‑megabyte frames. Covers techniques used in the shader such as sector/arc functions, anti‑aliasing, and timing with sin/smoothstep to animate smoothly; attendees need a laptop, ShaderToy, and a Chrome copy‑paste helper to follow along.
AI-written summary · about
chapters (17)
- 0:00Introduction
- 3:53Shader history and purpose
- 8:16First simple pixel shader
- 12:02Spinner performance issue
- 15:42Workshop setup
- 19:00Spinner math and animation
- 27:14Spinner customization and optimization
- 29:29Shader demo
- 31:01Web app shader integration
- 32:24Shader benefits
- 33:45Q&A
- 42:21Business use cases
- 45:43Learning resources
- 47:14Device support
- 49:00Performance optimization
- 51:18Performance tools
- 54:42Text rendering with shaders
related talks
01h 01mUI Components on Pixel Shaders — Write Your First Shader
53mPixel Shaders for Web Developers
05mA Brief Intro to GPU Shader Programming in WebGL
26mCreative experiments with WebGL shaders in JavaScript
39mLife of a pixel: A visual explanation of rendering performance
25mHow to Program Your GPU (and Not Do It Alone)
32mDemystifying Pixel Shaders (AGSL)
44mWebGL and Shaders: Programming Light