Multiple Canvas + Locomotive Scroll V5 about curtainsjs

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