[SOLVED] Material (shader) transparency order

Help & Support
1

Hi

I have a little trouble with transparency.

What i have:

I have 2 inverted spheres (negative scale) for 360 images. Primary has -1000 scale, Secondary has -500 scale.

1864×639 159 KB

Then i have 13 materials for them (has “view” in their name and low quality emissive texture)

1293×218 69.1 KB

And then i have those camera settings (look at ClearColor)

What i need to do:

I need to animate from old material to new.

What i did:

I use 2 spheres to animate from old material to new.

On start i disable Secondary sphere (s2), and enable Primary(s1).

When i need to animate i have 2 materials: old and new. I enable s2 and change it’s material to oldMaterial. Then i assign newMaterial to s1. (We can’t see s1, 'cose s2 is opaque, so nothing is changed for viewer yet). Then we set animation flag.

Every tick we execute this code:

if(ViewSwitcher.animating){
        
        ViewSwitcher.animationTime+=Math.min(dt,0.06);   
        
        if (ViewSwitcher.animationTime > this.animDuration) {
            ViewSwitcher.animating=false;
            ViewSwitcher.animationTime=0;
            ViewSwitcher.animSphereEntity.model.meshInstances[0].material.opacity=1;
            ViewSwitcher.animSphereEntity.model.meshInstances[0].material.update();

            ViewSwitcher.animSphereEntity.enabled=false;
            return;
        }
        
        var percent = ViewSwitcher.animationTime / this.animDuration;
        var opacityValue = this.opacityCurve.value(percent);

        
        ViewSwitcher.animSphereEntity.model.meshInstances[0].material.opacity=opacityValue;
        ViewSwitcher.animSphereEntity.model.meshInstances[0].material.update();
    }

We animating s2’s opacity and after it’s reached 0 we disable s2, as we can’t see it. In the end we see just s1 with newMaterial.

What i got:

Do you remember this bad boy?

When i execute that code i have consistent result:
when moving from material1 to material2 - everything is fine, smooth transition. BUT when i move from material2 to material1 i see that PINK color instead of material1! (it can be any materials, but tendency is clear, there is some consistent transparency order)

You can try it yourself (https://playcanv.as/p/4pIoNgIe/)
When loaded press or look at this:

everything is smooth, yeah?

Then turn around and press or look at this:

PINK all the way!

I changed every possible material property.
Code is exactly same. So, what should i do?

EDIT: i forgot to link material settings:

323×732 25.1 KB

2

Haalp, my project is coming to deadline :sweat_smile:

3

Without access to the project, it’s a little hard to debug and look at what’s really going on. I’m guessing that the render order may need to manually tweaked depending on the transition.

In WebVR Lab, there is some code there that changes the render layer of a mesh which may help https://playcanvas.com/editor/code/446331?tabs=6108752

There other consideration is that maybe there is a bug in your code when you transition back? E.g The opacity of s1 material is still at 0 when you transition back? It’s just hard to tell without access to the project.

4

Nah, i debugged opacity, so it’s all clear.
I’ll check layers and if it doesn’t work - i will link the project.
Thanks for link.

5

Yap, it’s working.

I looked for something like “order” and “layer” in material and shader, but it was in mesh xD

Thanks bruh :grin:

1 Like
6

You can also try to disable the “depth write” property in “Other” section of your materials.

7

I tried, doesn’t work. :relaxed:
But it’s over now, horray