Real-Time Video Processing


The purpose of this demonstration is to show how WebGL enables powerful concepts not possible with HTML and Javascript. Using WebGL, this example is processing every frame of the video with a pixel shader. The frames of the video are modified based on the clicks of the user.


Click anywhere on the video to create a circular distortion effect. Click multiple times for a larger distortion. Distortions that are placed close to each other will combine and interact with each other.


Radius (0.0)
Distortion (0.0)
Start Demo