Transparent Textures Different Between Editor and Launch

[vincent.lo]

Hello,

When I press Launch to preview my scene, the transparent materials appear to be slightly brighter/washed out. In addition, some white pixels (particularly around the blue icon look more pronounced).

The glowing texture sheet was made in Photoshop, and I attached pictures of the material settings.
The other transparent material (to the right of the glowing sprite sheet) has no textures applied. I attached pictures of its material settings as well.

How can I fix these transparent materials so that the Editor and the Launched versions of my scene look identical?

[Leonidas]

Hi @vincent.lo and welcome,

Not sure if it’s the same problem, but do check the following post and the links provided they may offer some insight on a possible fix:

Artifacts on our 2D assets

Okay, I’m really going to need some help with this artifact issue, I’ve tried every trick I’ve found online. I’ve clamped the U. I’ve clamped the V. Using point looks extremely low quality compared to the exported asset from photoshop. linear looks exactly like photoshop, but has these artifacts that are driving me nuts. We’re getting close to launching and these minor details are really bad for the look. (https://gyazo.com/3cbb15f0a59ac77645ced0c6c45e0b55.png You can see an example of the ar…

[yaustar]

Is it possible to share the project or a new project with some of the problematic sprites/textures?

The fringing I’ve seen before in the thread linked. Not seen setting getting brighter though.

[vincent.lo]

I’m trying to recreate the problem in a brand new project, but the textures are appearing fine in my new project when Launched… I then compared the new project and the old one and found the culprit.

The old project has “Transparent Canvas” checked ON under Settings/Rendering, and that causes the color differences when Launched.

In my new project, where I’m trying to re-create the problem, having “Transparent Canvas” checked ON doesn’t make a difference. Editor and Launched versions look identical.

This is a collaborative project with many hands in it, and I hear we need “Transparent Canvas” ON to support AR.

Are there additional settings I’m missing to make sure the transparent items look one-to-one while that feature is on…?

[yaustar]

Without seeing the project, it’s difficult to really be sure. It seems like only the transparent entities are ‘brighter’ so maybe there’s two of them on top of each other at runtime?

Are you loading scenes/templates at runtime?

Different clear colours on the camera? Different background colour?

Can you fork the project and remove everything but one entity that shows the problem and make that public?

[vincent.lo]

My co-worker is linking this:

https://playcanvas.com/editor/project/723752

It has the glowing texture and the material’s emission is set to 0. It shows a similar brightness issue as before but… not as drastic of a difference…

[yaustar]

Found the issue, it’s to do with the HTML body background colour. Because it’s a transparent canvas, it’s ‘merging’ with the body colour even though you can see it.

I’m having trouble replicating the effect in the Editor view (even when hacking around the CSS)

If you want to change the colour of the HTML body for the app, you will have to write some JS code to add the CSS.

If you make it so that it’s the same colour as the camera clear colour, they should match.

[yaustar]

I’ve made a fork that changes the body color to match the camera clear colour which helps but it’s still not exactly right: https://playcanvas.com/editor/scene/1000167

[yaustar]

Changing the material to use pre multiplied alpha gets me the closest to what the Editor looks like

[vincent.lo]

I set my transparent materials to Premultiplied Alpha, and it seems to look identical now! I guess there’s something up with my textures. If we run into these issues later with the full build, we will try out the clear color code.

We’ll run with this for now. Thanks for looking into this!