Poor render quality, distrotion, alignment


#1

First customer tought that things aren’t alligned.But as you can see everything is alligned and there is white space between text. Texts aren’t touching black property borders.

Texts seem to goes over the border. Logo images(dynamically loaded) and stuff as you go further get distorted, text is not crisp, everything is blurry.
![19|537x500](upload://lG1M8I8

rh447pEZSHZvfCwRaHel.png)

Am I doing something wrong.


#2

The first thing you might try is to set the Anisotropy for each Image to a value higher than 1. Perhaps 2 or 3.
https://developer.playcanvas.com/en/user-manual/assets/textures/

Next, you might want to try unchecking the convert to Powers of Two feature that causes PlayCanvas to resample your imported images to dimensions that are Powers of Two. For instance, 64, 128, 256, 512 etc.

Settings / Asset Tasks / Textures POT
Uncheck this box so that your image is not resampled to a Powers of Two. Having this checked causes PlayCanvas to automatically upsample your image to nearest (but larger dimensioned) power of 2 size. Note that you’ll have to reimport an image to test this.

But doing this may not be optimal. I think having non- Power of 2 dimensioned images will disable mipmapping for those. the ideal would be to create your images from scratch with Powers of 2 dimensions at the appropriate scale.

From Max ([SOLVED] Recommended Image Size & Type for Skybox/Cubemap?)

In WebGL in order to get mipmaps generated and have good textures quality, webgl needs to use power of two resolution, which is: 2, 4, 8, 16, 32, 64, 128, 256, 512, 1024, 2048, 4096, 8192, etc.
By default uploaded textures will be resized to PoT resolution. CubeMap wont work if it is not PoT resolution.

So yes, you want to upload PoT textures to preserve best quality.

If it were me, I’d seriously consider (or at least experiment with) using text elements and not images. Or perhaps even 3D objects. That way the text gets rendered optimally and you don’t have to worry about pixels getting re-sampled.

I have no clue regarding the overlap unless, perhaps the images are offset from the board by a significant degree.


#3

I think you might you are right that mipmaps sizing is one of the problems.
Board is 1024x1024
Cards are 256x512.
If we refer to skybox cubmap, I’m not using playcanvas world skybox, but custom cube mesh with texture 8192x4096
But I also load textures runtime(see logo on the board in prev post). Near logo is more or less ok, but further is distorted and not smooth(I can see squares)

Texts are text elements as you can see not images as we need to be dynamic. But as you can see bellow 2second text of orage field looks like goes over or at least touching the line.


I think some float point calculation aren’t very precise… . Looking from the top “look at the cards” quality is better.


#4

Looking at an older version of your project, the text elements are higher than the board so when you look at it from an angle, it is offset.

If you look from the side view, this is where your text is:
image

And this is where your board is
image


This is what it looks like at the moment
image

If I move the point closer to the base height, this is what it looks like:
image


#5

In regards to the blurry text, that’s more difficult as there is no API to handle the font texture properties such as anisotropy or mip mapping. You might have to dig into the engine code to look for a way to set the anisotropy on the font assets.


#6

Its is offsetted from the board cause if not it won’t be visible? Or I’m doing something dumb.


#7

You are right that it needs to be offset, but it doesn’t need to be as much as you have done. Just a little above the board and you should be fine.


#8

Intersting Yau. Board was at y=-0.1. Text was at Y=0. when you zoom as you did and side view they look like text is up of the board. When I drag it down showing -0.04 it looks better at least at this position of camera. Not ice the diff at brown filed “The VIt”



There is space from the brown rect as it should be.


#9

I think I’m doing wrong. Ex. I’ve board texture 1024x1024. How big should the plane primitive be? Current Scale is 10,1,10. I’m not sure what metrics system in Playcavnas vs Unity.?? Logo image element on the field is 1px x 1px. Fonts size are 0.15. Am I crazy?


#10

I’d put it as close as possible. If the board is at -0.1, I’d try -0.099 and step it up in increments of 0.001 if needed in order to avoid interference or render anamolies.