Imported image quality

Does anyone know what’s going on here? I’ve tried different sizes (all POT), bumping up anisotropy, tried importing with and without the Textures POT import setting…

I am adding the png as a texture to an Element component, inside a 2D Screen in 3D space.

Actual text element, using a font resource renders nice and clear, it’s just imported PNGs like these that are having issues…


PNG settings:

Source PNG below:

Another example:

The fringing and fuzziness on the edges is most likely due to this issue looking at the texture: Artifacts on our 2D assets - #16 by yaustar

As the background color of the PNG is black

You can see it looks a lot better when the background it’s against is closer to the PNG’s background color

I don’t know how close you are zooming in but evening against white, I’m not getting that ‘dotiness’

Hmm, I just had a crash course into mipmapping and texture dilation.

Although I managed to get rid of the ‘fringing’ on the white line, I’m still getting the ‘dotting’ on the text, in my original project:

But when I create a blank project, I’m not getting the dotting. .

I’ll have to have a look at it again tomorrow.

I am doing some crazy stuff with the hotspot.js and follow-world-target.js… tbc

Did you try to set Address U and Address V to Clamp instead of Repeat?

Tried that too… doesn’t seem to make a difference.

Are you using any texture compression (legacy or basis)? Multi camera setups? Rendering to textures?

Hi both,

Sorry got waylaid with other work. Took a while to pinpoint the issue, but I think I found it. It seems to be to do with using a separate layer for the hotspot elements and using posteffect-fxaa.js. I’m seeing it with both imported textures as well as PC internal text:


As soon as I don’t use the hotspots layer I created or disable FXAA post-effect, the issue goes away.

Project here:

I wonder if it’s to do with element sizes and how fxaa renders it as it seems to happen more at a distance, not so much close up.

Perhaps you can use CameraComponent | PlayCanvas API Reference
to avoid FXAA (and all other post effects) to be applied on your hotspots layer?

Render all 3d layers, use last of those for post-processing, and then render hotspots on top of postprocessed image.

1 Like

Thanks @mvaligursky, looks like a good solution. Just trying to figure out how to get the layerID of the custom layer. Being bit daft (covid fuzziness doesn’t help!), but how do I get hold of the LayerComposition created by the engine by default (so I can do getLayerByName)?

something like

            const worldLayer = app.scene.layers.getLayerByName("World");
            // use

Quick example fork:

Alternatively, camera stacking could work here as well?

camera stacking has larger overhead.

1 Like

Excellent, thank you.