TLDR Web Dev · ARTICLES & TUTORIALS
A FLOWING WEBGL GRADIENT, DECONSTRUCTED
Summary from the TLDR Web Dev newsletter
A flowing WebGL gradient effect is a great tutorial for teaching basic shader concepts while creating the final product. This post goes over how to write shaders, color mapping, gradient noise, and use WebGL to improve performance. It also goes over creative rendering techniques, like creating animated waves using stacked sine waves and simplex noise, implementing dynamic blur, and using gradient textures for more flexible color mapping.