Multiple Canvas + Locomotive Scroll V5

[Ahlecss]

Hi !

Thanks for your great library,

That's not really a bug that i'm exposing here, but more like a performance improvement question :

I'm currently running multiple Canvas (3) on the same page, to run different custom shaders.

The main goal is to control their respective drawings and onRender update, only when they are in view (to boost performance).

For precisions : i'm also using Locomotive Scroll V5 beta.

My first idea was to put one canvas in fixed position and fullscreen, and then use plane.relativeTranslate (to the current Loco scroll) in the unique curtains.onRender(), depending on my current Scroll, thanks to that, the canvas will behave like a "view", with the plane moving in the scene and be drawn or not.

It's quite working, but not really as expected : on scroll, the shader is not really moving, but a black rectangle coming from bottom.

Then I thought it was because I had to move the vertexPosition.y. Which could work, but not quite sure if it means my planes outside the viewport would be drawn or not, unless I pair it with plane.relativeTranslate.y update.

Plus, i'm thinking about the unique curtains.onRender(), if I use it, should I put some conditions inside to know what plane should update it's uniforms ? Are if() not too unperformant ? Is there a better way ?

Anyway, do you have some tips, rendering multiple shader for multiple planes ? One canvas or many ? One onRender or many ? If so, what is the best way to do it ?

Thanks !

[Ahlecss]

Oh and the most important !

As i'm working on Next, I use React-curtains, is it aligned with V8 of Curtains.js ? I believe it's the major cause on why my planes are not updating (I mean, because it's not reactive)

Have a nice day !

[martinlaxenaire]

Hi @Ahlecss,

well, that's a lot of questions.

It's a bit difficult to figure out what you're trying to do exactly, especially without a minimal code example. Let me try to clear things out a bit.

1. Except for very specific use cases (such as having multiple webgl layers with HTML content between them), you should always use one and only one canvas and webgl context.
2. There's an official example on how to use the lib with a smooth scroll library. I haven't tried Locomotive scroll v5 but there's no reason the concept wouldn't be the same.
3. The lib is taking care internally of what plane should or shouldn't be drawn based on frustum culling (see this example and play with the various transform values). If you're messing with the vertices positions in your shader, considering using the drawCheckMargins property.
4. It's up to you to decide what various onRender callback to use. Plane.onRender callbacks are useful to update things relative to the plane itself, such as its uniforms or transform values. Curtains.onRender is just called once at each requestAnimationFrame tick. There's nothing wrong in putting conditional statements in there.
5. react-curtains should use the latest curtainsjs version. If that's not the case, then you could fill a bug in the appropriate repo.

Hope that helps.

Cheers,

[Ahlecss]

Thanks for all your replies !

1. I manage to do it on only one canvas, even if I needed in fact multiple webgl layers with HTML content between them (playing on transparency shader), because perf are more important.
2. Thanks, Loco works great.
3. I understand, but I have one more question : Is there any Raycast-like feature on Curtainsjs ? I would like to fire an event when I hover a plane, but I don't really move the plane, I move the vertexPosition.x, assuming that playing with vertex needs less calculation that moving with plane.relativeTranslation.x, and then call curtains.needRender (and maybe plane.updatePosition ?), is that the case ?
4. Thanks for the precise response !
5. Same thing !

Have a nice day !