We’ve completed some crazy polygon transitions, and sooner than that some WebGL Image Transitions. Nevertheless plenty of individuals have been asking strategies to translate these strategies into the video world. And I agree, one can’t underestimate the importance of video on the web. So let’s do this!
For as we converse’s demos we’ll be using curtains.js, a really good WebGL software program for animating pictures and flicks. It was created by Martin Laxenaire and the model new mannequin is crammed with good choices. Go check out the docs for many who didn’t study it however!
Three.js is the commerce commonplace for creating WebGL outcomes, nonetheless we already had an entire lot of demos using it. And there are an entire lot of various superior WebGL libraries in the marketplace. All with a novel sort of focus and performance. So let’s dive into one in every of them!
This library was made by Martin Laxenaire. It was solely lately updated with an entire lot of cool stuff, and so I decided to utilize it for this demo.
The primary goal of this library is (from the homepage):
Positive, exactly, connecting the DOM with WebGL! That’s pretty straightforward with curtains.js; one in every of many demos showcased is that this:
And that’s not it! We also have a postprocessing, FBOs, and full administration over all of it with our custom-made shaders!
So, yeah, curtains.js is pretty cool and I really recommend you to aim it. Nevertheless let’s get once more to our idea of animating films in WebGL.
Appears it’s ridiculously easy with curtains.js. Proper right here is the HTML we may be using:
<div id="canvas"></div> <div class="wrapper"> <div class="airplane"> <video src="https://tympanus.web/codrops/2020/10/07/webgl-video-transitions-with-curtains-js/1.mp4" data-sampler="first"></video> <video src="https://tympanus.web/codrops/2020/10/07/webgl-video-transitions-with-curtains-js/2.mp4" data-sampler="second"></video> </div> </div> <!-- and some custom-made shaders, on account of we may be using them --> <script id="vertexShader">...</script> <script id="fragmentShader">...</script>
const curtains = new Curtains( container: "canvas", pixelRatio: Math.min(1.5, window.devicePixelRatio), ); const params = vertexShaderID: "vertexShader", fragmentShaderID: "fragmentShader", uniforms: transition: title: "uTransition", type: "1f", price: 0, , , ; const multiTexturesPlane = new Plane( curtains, [...document.getElementsByClassName("plane")], // is likely to be many Planes params );
Properly, that’s it! On account of the principle goal of this library is shaders linked to the DOM, we don’t have any Digicam or Scene concepts proper right here. And the setup turns into pretty straightforward. That hooked me up immediately and I decided to share that with you guys, by using it on this demo.
In spite of everything this isn’t the complete code. On account of it’s a video we would like some sort of client movement to play it. After which, we moreover need some animation for the transition between the films. Nevertheless that half is pretty widespread to all these sort of outcomes. In curtain.js events are used for that:
multiTexturesPlane .onReady(() => // navigation click on on events // play button ) .onRender(() => // updating time or one thing );
And with that kind code you’re in a position to do any shader transitions like this one:
The entire magic is happening in shaders, and easily to level out you that pictures and flicks are the similar in WebGL, I used one in every of many outcomes from my previous demo. Should you want to be taught shaders, I counsel you to be taught the fantastic Book Of Shaders.
I hope you most well-liked this temporary tutorial on getting films into WebGL. Go get the availability and play with the code!