How does WebcamToy get weird effects on top of getUserMedia() webcam video?

Question

I know how to access the webcam using getUserMedia() in Javascript. However, I am impressed by all the effects that have been added in webcamtoy.com - especially effects such as "Top mirror", "Tunnel", "Shuffle" and so on. It seems like these are not plain CSS filters [1]. It is impressive to see them working "live" in the browser.

I am wondering if anyone here knows what the technique used is? .. and if there are any websites which explain how this can be done?

[1] https://webrtc.github.io/samples/src/content/getusermedia/filter/

Answer 1

I figured out a way to do it. The idea is to setup a WebGL canvas and use the webcam as the source for the texture. Then weird effects can be added by modifying the fragment shader.

I am testing the technique here: https://www.html5fun.com/webgl/webglswirl2.php