How to achieve a 2D transparency look?

I’d like to achieve the “intended” look from the below image. Obviously when I apply a 50% opacity to the materials it doesn’t look the same. How can I best approach this?

Thanks.

@BenUnbnd I can’t really tell how you are applying the opacity to the material but is it possible you want to overlay a 2D screen on top of your screen and then apply the opacity to that? I am not really an expert at doing so but something I have done was to create an 2D screen in front of the camera that basically allowed me to fade or dull things in the background. Here are the settings I used.

image

I think in most cases you have to be careful with the color selected as it could throw off the colors behind it. I hope this helps and maybe someone else offers some of their tips as well.

@Leonidas @mvaligursky Any ideas from a custom shader point of view

I’m wondering a depth pass can be rendered first on a layer and then colour afterwards

Had a quick go here https://playcanvas.com/project/1013871/overview/solid-transparency and it looks like doing something with the shader would be the best way to go.

1 Like

Possible solution:

  1. start with a normal character
  2. create a layer that renders before world … lets call it First.
  3. find render components on your character, clone the entity as a child (so that it renders exactly at the same place), but set up its material to only render the depth and not the color, and add it to First layer.
  4. adjust the normal character material to use depthFunc FUNC_EQUAL (this I think needs to be set up using a script)

And all might work.

2 Likes

Updated the project to give it a try and it looks good! https://playcanvas.com/project/1013871/overview/solid-transparency

You will have to keep the clone in sync with the original in terms of animation which could be a challenge?

1 Like

Wondering if you can have a layer just render depth? That way the character can be on both layers rather than duplicating Entities

We don’t have a feature to do this.
But not sure you need to keep anything in sync. When you clone a node entity with render component, just set it as a child of its original entity, so that it will use the same node transform - that should work.

As it’s a character, I was thinking more of animation and state graphs. That said, the render component can reference the same root bone so that wouldn’t be needed :thinking:

Added animation to the example https://playcanvas.com/project/1013871/overview/solid-transparency

4 Likes

Works great! Thank you!