Please create an example like multiple-textures which supports videos

[rogierhofboer]

After hours of trying, I was not successful in creating a variant of the multi-textures example with videos. The calls to createTexture and setSource do not seem to work for videos and the already existing multi-video-textures example only supports 2 videos (no activeTex / nextTex implemented).

The only working examples I could find for this use an old 6.x version of curtains js, and stop working as soon as this change is made:

var multiTexturesPlane = webGLCurtain.addPlane(planeElements[0], params); to var multiTexturesPlane = new Plane(webGLCurtain, planeElements[0], params);

@martinlaxenaire can you please provide an example on how to do this using the latest version of curtains js?

BTW The most ideal example would support a list of videos and images, but I might be able to figure this out myself if a list of multiple videos works.

Many thanks in advance!

[rogierhofboer]

Codepen for illustration:

https://codepen.io/martinlaxenaire/pen/dBYxBO does not work with the latest version of curtains js (also not when replacing addPlane with new Plane)

[martinlaxenaire]

Hi @rogierhofboer,

This looks like a duplicate of https://github.com/martinlaxenaire/curtainsjs/issues/79

Have a look at this codepen example: https://codepen.io/martinlaxenaire/pen/ZEBNyMV

Cheers,

[rogierhofboer]

Yes, thanks a lot! Unfortunately, I didn't found it while searching for a solution.

It is however still not clear to me why https://codepen.io/martinlaxenaire/pen/dBYxBO does not work with only changing the code to use new Plane and usiing the latest curtains js version. Like I tried here: https://codepen.io/rogierhofboer/pen/oNKxbay

Yesterday I found https://codepen.io/martinlaxenaire/pen/YzpVYLE, and it seems to handle the textures on the plane.onloading, and after chaning the videos, this works for me, so I thought this was key to getting it to work. But the example of #79 does not use this method of handling textures.

Can you explain why https://codepen.io/rogierhofboer/pen/oNKxbay doesn't work?

And another thing... https://codepen.io/martinlaxenaire/pen/ZEBNyMV to the examples and then changing to the latest code:

so: //import {Curtains, Plane} from 'https://cdn.jsdelivr.net/npm/curtainsjs@8.1.0/src/index.mjs'; import {Curtains, Plane} from '../../../src/index.mjs'; Videos go to black after the transition (1700ms)

It still works is 8.1.2 and videos go black from 8.1.3

Thanks!

[martinlaxenaire]

You should maybe use the latest lib version, which is 8.1.6

Here's a working example: https://codepen.io/martinlaxenaire/pen/yLmOJJR

[rogierhofboer]

Ok, thanks. For some reason, I cannot reproduce videos going to black anymore (but I also changed to using gsap for the transitions in the meantime)

Last question for now, because I cannot get my head around it:

https://codepen.io/rogierhofboer/pen/oNKxbay does not work with v8.1.6, and I don't know why.

(the original https://codepen.io/martinlaxenaire/pen/dBYxBO does work, and I only made 2 changes, using the latest library and using the new Plane() syntax)

[martinlaxenaire]

This is because the textures are not correctly created. You should replace this:

var activeTex = plane.createTexture("activeTex");
var nextTex = plane.createTexture("nextTex");

By this:

var activeTex = plane.createTexture({ sampler: "activeTex" });
var nextTex = plane.createTexture({ sampler: "nextTex" });

[rogierhofboer]

This works! Thank you very much for your help! I am closing this issue.