Hi all!
I’m trying to do some image transitions, and I’m not sure where I’m going wrong. I can confirm that my canvas is transparent, and will reveal some test text below it if remove everything from the camera’s view, but only if I stop clearing the color buffer on the camera.
I’m trying to recreate a form of this tutorial project:
https://playcanvas.com/editor/scene/960638
in order to make a basic image transition library.
If I do clear the color buffer, then I’ll always get the clearColor, regardless of what the alpha is set to.
Even weirder is if I don’t clear the color buffer, my ‘mask’ image element is visible (but the content under the canvas is now visible) from the material being assigned.
However, that artifacting disappears if I restore the clear color buffer selection on the camera.
More annoyingly, the result in the editor is correct.
I can confirm that the same “mask is visible” behavior appears in the tutorial project if clearColorBuffer is disabled. And that reducing the Alpha on the camera’s clear color has no effect when clearColorBuffer is enabled.
Any thoughts or ideas would be supremely helpful.
Some new information,
A capture from Spector.js reveals that the mask is being drawn first, and then the image meant to be manipulated is drawn on top:
I’m not sure what to do with that information. In a script, would I want to clone the defaultScreenSpaceImageMaterial and then apply the opacity settings to the cloned material?
Update: Ahhhh! Cloning the defaultScreenSpaceImageMaterial and then setting the opacityMap, alphaTest, and opacityMapChannel got the desired results. This leads to a more straightforward question.
Is is possible make a material in the editor that more closely aligns with the defaultScreenSpaceImageMaterial? It will make testing on this library so much easier if that was possible.
Update 2: Ohhhhhh! I think my last update points to a different issue. After looking at a new Spector.js capture, I realized that removing my custom material and cloning the default was actually defaultScreenSpaceImageMaskMaterial not defaultScreenSpaceImageMaterial which would explain why the behavior is so odd when supplying a material as opposed to copying the default and changing the properties on it.
I see here in components/element/image-element.js that a check is being done for whether the element is a mask and what material is assigned:
I’m assuming this has something to do with it.
