promo image of gin

The client wished to have a web application which would do realtime green screen keying to display a video “on” the label of the bottle.

Prototype

I created a proof-of-concept webgl application to see if the green label could be keyed out reliably enough. The prototype was functional but it required the user to “select” the label using touch to get the correct HSV range for any light condition.

Final Application

After successfully testing the prototype I moved on to the final application.

I used Vite framework and TypeScript to make the file and class management easier. Vite is very helpful when working with WebGL shader code because it enables the importing of shader source files as raw strings which allows me to keep the GLSL code in separate files.

Keying Improvement

shot of the phone screen effect

The HSV range keying method was still lacking reliability in my eyes. So I experimented with using LAB color space instead for keying out the green colors. This worked out great. The keying of green label on the input video was supprisingly extremely stable. There was no need for the user to “select” the color ranges anymore. It just worked with hardcoded values!