PNG texture quality.

[Gtttoo]

Hi everyone.  

I have some problem that irritating me a lot, and I've try to find solution for days, but ineffectively. 

The point is that  Babylon routinely decreas quality of texture added  to material ,after render  it looks like a little bit  blurred comparing to native png. file.

How can I change that , I want to have my texture looks exacly like in native file. Is it possible at all? What is the cause of that. How can I hange it, how can I improve quality of my textures.  

I'll by very thankfull for answer.   

[Wingnut]

Hi @Gtttoo, welcome to the BJS forum!

     I think it might be normal... to see some resolution anomalies when images change from context2D canvas... to context3D canvas... but not sure.  All in all, I built this playground.  It attempts to do a comparison... of the same 512x512 image in both contexts.  To be frank, I don't see any significant differences, but I guess that depends upon how a person defines "significant".

Naturally, you'll want to avoid any scaling on the mesh object, which would likely stretch the texture, and cause "fuzzies".  Neither of these textures are scaled, as far as I know.  BUT... keep in mind that I just "eyeball-guessed" the size of the plane... to try to match the 2D/3D sizes.  It is VERY LIKELY that the 3D version is scaled up/down a tiny amount, and possibly unavoidable.  Hopefully, experts with more experience with textures than I... will soon add to the comments.

In the playground listed above, the 2D image will disappear after 15 seconds... to get out of the way of the editor... so you can make further edits and tests.  Change the value in line 38 to change the image element's display duration. 

Hope this helps.  You pose an interesting question.  I think BJS follows the WebGL 1.0 spec... so you might want to do research about 2D images in 3D contexts... there, or in other Khronos or W3C areas.  Good luck, tell us of your discoveries... and be patient.  Better experts than I... are nearby, and will be returning from weekend fun, soon. 

[V!nc3r]

Can you post a screenshot of your problem ?

I don't know if BJS generate mipmaps, but it may be a lead to follow ?

[dbawel]

@V!nc3r -

In Mr. @Wingnut's reponse, he assumes you're using power of two textures. If you're not, then that is most likely the issue. Otherwise, please keep in mind that many operations in HTML5 and WebGL interpolate to true power of 2 textures. I wee this most often when building GUIs, however, it's obvious in many functions. So make certain that you know what resolution is being rendered, which is not necessarily the resolution you saved to disk. Always note this, and if you want to truly avoid ANY blurring, then use a true power of 2 texture above what is rendered to screen - and remember, this can vary dramatically from device to device.

But I can tell you that the only reason for a blurred texture is that it is rendered larger than its image resolutio on disk - inless you have set fog density in our scene - which I'm certain you would have already found this as the culprit.

Cheers,

DB