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 articleof 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!
