Magazine for designers and web developers
26 Collect

The Rise of Shaders, Filters and Effects in Web Projects.

Article by Awwwards in Web Design -
Today we present a selection of elements taken from our collection Filters and Effects. Over the last few years the line between web projects and the audiovisual field has blurred and the rise in popularity of WebGL, and the optimization of video and 3D in terms of weight and loading time, has paved the way for trends such as glitch aesthetics.

The notable improvement of graphics performance, thanks to GPU acceleration, allows us to experiment with numerous effects and even add them to videos in realtime and interactive post-processing filters.

What is the procedure for implementing these visual effects? Although they can be applied directly with the WebGL API using pixel and fragment shaders programmed in GLSL language, the most common workflow is using frameworks like Three.js or PixiJS.

You can start programming shaders with this easy tutorial: A Gentle Introduction to Shaders with PixiJS

In this collection we present a specially curated selection of some of the latest filters and effects that help give a unique look to your projects, featuring visual effects like heat distortion, multiple types of wave effect, many different glitch shaders, kaleidoscopic effects, lens distortion and the most common - post-processing 2D filters applied to images, videos or 3D scenes.

RELATED COLLECTIONS

Are you interested in creating your own filters? You can dig deep into the world of shaders in the following collections: Shaders are Easy, WebGL Shaders + Code