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:
https://playcanvas.com/project/955066/overview/text-issues
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.
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 worldLayer.id
Quick example fork: https://playcanvas.com/project/955080/overview/f-text-issues
Alternatively, camera stacking could work here as well?
camera stacking has larger overhead.
Excellent, thank you.