Forum

Controlling texture quality on specific objects?

19 May 2016 18:39 #9633
In example I have a 3d explorer of a product with interface buttons linked to the camera.
When I publish the app and it loads in high quality setting the png button images look a bit blurred/fuzzy.
When I put the app into ultra quality the png text elements become super crisp but now the app doesn't perform as well on lower end devices as it does in high quality mode.

My question, is there a way for me to keep the png buttons/text at a crisp quality while the app is in overall high quality mode without having to go to ultra mode on everything?

Is this something I would have to control from the API or can it be done in blender/logic.nodes or texture settings?

Thanks.

19 May 2016 22:54 #9640
ok, I did just realize that there is a LEVELS_OF_QUALITY material node and going to try that.
20 May 2016 08:29 #9646
So I tried the LEVELS_OF_QUALITY node but didn't do anything in regards of the blurry text quality with a png.
LEVELS_OF_QUALITY doesn't seam to let me set ultra quality, only high/low.

I also noticed something odd when switching between high and low quality, the text png image actually looks less blurred/much better under low quality setting verse high quality. This was happening to the title text png only and didn't seam to effect other text png's. I was also messing around with the Z Offset under the material>Transparency roll out.

How is this happening? if I could only get the text png images to look sharp like in low quality across all levels of quality it would be amazing.



If someone has a way to get specific text based png's to look sharp and not blurred please let me know.

Thanks
20 May 2016 09:06 #9647
Ok, so I noticed when turning Anti-Aliasing to "None" the text png's look great but if set to "Low" or "Medium" the text png's get really blurry. When setting it to "High" it's almost as good as having it set to "none" so that works for me!!! :)

So I guess with the API i could also set the app to never use low or medium anti-aliasing. For low quality setting i will set anti-aliasing to none and anything above to high setting and this way the text png's can stay as sharp as possible.

20 May 2016 12:14 #9657
Hi Adam,

Sorry, we weren't able to pick your question up yesterday evening so you had to struggle on your own. I'll ask our guys to recommend you the best practices regarding text anti-aliasing.
Development Lead | Twitter
20 May 2016 13:22 #9662
Hi, Adam!

My question, is there a way for me to keep the png buttons/text at a crisp quality while the app is in overall high quality mode without having to go to ultra mode on everything?
The best way, of course, is to use HTML/CSS for creating the interface, since every object in a 3d scene can be affected by different post-processing effects and every texture can be filtered by a special algorithm on the GPU .

So, in case of 3d interface these problems always exist, but can be reduced in some way.

Ok, so I noticed when turning Anti-Aliasing to "None" the text png's look great but if set to "Low" or "Medium" the text png's get really blurry. When setting it to "High" it's almost as good as having it set to "none" so that works for me!!! :)
Yes, we use the FXAA algorithm here and it is less accurate on low and medium settings. It's applied to the whole final image - that's why other solutions like using the LEVELS_OF_QUALITY node or tuning a certain texture/object won't work.

So I guess with the API i could also set the app to never use low or medium anti-aliasing. For low quality setting i will set anti-aliasing to none and anything above to high setting and this way the text png's can stay as sharp as possible.
Currently, we don't have an API for selecting the concrete AA quality profile, but one can turn off the AA completely upon the app initialization. So, the solution would be to set the quality to "High" in Blender and turn it off in your application if needed.
Anyway, it's turned off automatically on low quality settings.

There is also another one parameter that changes when switching the app quality. It is called "canvas_resolution_factor" and it's higher for "High" and even more higher for "Ultra" settings. That means increased canvas resolution and better visual quality. So, tweaking this option (it's possible via API) can reduce those text artifacts.


Blend4Web Team
20 May 2016 17:30 #9673
Thanks Ivan, I'm just now starting to work with the API and looking good.

Yuri, no problem, we have the time zone difference and I will most likely be posting when you guys are already at home or sleeping, so it's all good. :)
 
Please register or log in to leave a reply.