Animating HBO Pre-Roll Animations with WebGL Fragment Shaders

Last Updated On 27 Feb 2020 by

In this tutorial you'll learn how to create video-like animations, using WebGL fragment shaders and HTML canvas.

This is the third part of a series of 4 articles - if you jut landed here you may want to start `there instead`

This example is based on the same techniques as described in the `previous part`

The main difference we have from our perspective here is the color difference.

Instead of being the usual `rgb` value, the color is a noisy grey generated from a random value set equally on each of the `r`, `g` and `b` channels.

Make some noise

When generating noise, we want a way to seed it to control how it evolves. Our input could be for example a float value of the time, but it could also be from two values such as the position of the pixel which is `vec2`.

Therefore we define the random function twice, once for `float` and once for `vec2`

``````float rand(vec2 co){
return fract(sin(dot(co.xy, vec2(12.9898,78.233))) * 43758.5453);
}

float rand(float c){
return rand(vec2(c, 1.0));
}``````

Ultimately in our example we just need the `vec2` version:

``float noise = rand(sin(u_time) + st);``

We then can use this value and apply it independently to the background or to the HBO shape only, for example:

``````// increase noise  on hbo then fade away
hbo = mix(hbo, noise, hbo * (1.0 - mapTime(3.5, 6.5, u_time)));``````

The code above applies the noise texture on the fbo shape, then at 3.5 seconds in gradually fades away until 6.5 seconds. At this point the hbo shape is a plain opaque grey without noise on it.

From there one can get creative by applying different textures to shapes, and animate them over time.

In the `next and last article` of this series, we'll try to recreate the Netflix pre roll and learn more about animating and adding texture to our shapes.

Hope you enjoyed this tutorial! The stuff I write about is a way for me to improve my learnings - probably just like you right now. So please if you catch any issue or want to suggest an edit, use the section below or reach out on twitter. Cheers!