WebGL Video Transitions with Curtains.jsLearn Coder

0
52
Enhancing Insights & Outcomes: NVIDIA Quadro RTX for Information Science and Massive Information AnalyticsLearn Coder

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!

What library?

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!

Curtains.js

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):

A complete lot of very good JavaScript libraries already cope with WebGL nonetheless with most of them it’s sort of a headache to position your meshes relative to the DOM elements of your internet internet web page. Curtains.js was created with merely that concern in ideas.

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!

Our demos

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>

Nevertheless, HTML has on no account been thrilling in HTML demos, so lets check out what JavaScript you need now to get the video in WebGL:

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!

References and Credit score

Recreating the “100 Days of Poetry” Effect with Shader, ScrollTrigger and CSS Grid

LEAVE A REPLY

Please enter your comment!
Please enter your name here