Specifying z-position or stacking of planes about curtainsjs

[martinlaxenaire]

Hey @ajayns,

glad to see you are pushing the library to its limits! :)

I've noticed the moveToFront method was broken but this should now be fixed with the latest version of the library (6.0) I've just released. You might achieve what you want using this method but I understand this can be limited.

Unfortunately at the moment there are no way to specify a render order for each plane, but this might be a good improvement for a future release so I'll add this to my to do list.

There's however a dirty hack that might work here: translate the plane along the Z axis by a really small amount and force it's model view matrix to update.
Here's a little snippet:

plane._translation.z = 0.0001; // move the plane forward from a really small amount
plane._updateMVMatrix = true; // update its model view matrix to apply the translation

Let me know if that works.

Cheers,

[martinlaxenaire]

Since v6.1 it is now possible to specify a translation along Z axis in pixels with setRelativePosition.
See: https://www.curtainsjs.com/plane-class.html#set-relative-position

This should fix the ugly workaround mentioned above, altho the renderOrder property remains a possible future enhancement.

[ajayns]

Hey Martin,
Thanks again for your responses and quick fixes.

That definitely does do the job for me!
Since planes in this library are meant to closely mimic HTML <img />s itself, what might be self intuitive is a variable that works similar to z-index. An alternative solution would be to include z-coordinate in the setRelativePosition API but I doubt that'd be the best option.

[martinlaxenaire]

Hey @ajayns ,

yes, the idea would be to introduce something like a renderOrder property to the planes similar to how three.js handles this: https://threejs.org/docs/#api/en/core/Object3D.renderOrder

I would have to rewrite the whole draw stack process of the lib. I'll definitely think about it tho and will leave this issue open with the "enhancement" label meanwhile.

As for your suggestion about using the setRelativePosition method, I already thought about that but I think it would be counter-intuitive as the Z value would have to be in webgl units whereas the X and Y values are in pixel units. Thanks for the suggestion tho!

Cheers,

[ajayns]

Ahh I was unaware of those. Still kinda amazed by all the crazy stuff happening under the hood!