[SOLVED] Transparent Material & Rendering Order

I’m trying to create a transparent material in a shader. When I set:

this.material.alphaToCoverage = true;

It looks like this:

But the documentation says this only works with WebGL 2. Without it, it looks like:

I suspect it’s a rendering order thing, but I don’t see a way to specify to render transparent materials last. A brief investigation led me to these sorting functions in the renderer:

I tried changing the layer and _key properties but it did not fix it. I’m wondering if anyone else can verify that this is a rendering order problem and if so, if there’s a way to fix it. Here’s the scene:

https://playcanvas.com/editor/scene/578611

The relevant code file is WaterMaterial.js

Thanks!

That’s very odd. From a quick test, it looks like the alpha of the colour isn’t being applied :confused:

1 Like

Yeah, the reason I think it’s a rendering order issue is because of this thread from 3 years ago:

And it looks like there’s progress on that just this month:

He mentions that:

The idea is to make rendering flexible, so things like that can be done using public API without hacks, while not making it more difficult to do existing things.

So I’m curious, for the time being, what’s a hack for making sure my new transparent material is renderered last?

So it turns out the fix was very simple. It’s about blending, not drawing order. All I had to do was set the new material to:

this.material.blendType = pc.BLEND_NORMAL;

I was surprised to see that transparency worked even if alphaWrite was set to false. So transparency comes from how you blend pixels as you render. Which makes me wonder what the purpose of alphaWrite is then.

3 Likes

Made an account just to say THANK YOU!

3 Likes

saved my live - created a chromakeyshader. working.

1 Like