Hi to all!
Please help with sprite texture quality (Img left - source canvas):
I tried all methods but nothing helps …
Are there any ideas how to improve the quality of textures?
https://jsfiddle.net/vasilii/9un1w8cL/23/
Have you considered to increase the resolution of your canvas texture? Or is there a specific reason for a value of 256x256?
No reasons. If it needs, I can create many textures any sizes and change it’s in material.
The main sprite size in app is about 25x25 pixels. But this size I can’t make without blur.
Using the default minification filter usually yields pretty good results:
minfilter = THREE.LinearMipMapLinearFilter
Is there a specific reason you changed the min filter to LinearMipMapNearestFilter?
Additionally you might be getting blurry results if you’re using a device with high-pixel ratio, like a MacBook, so you could set a higher pixel ratio with: renderer.setPixelRatio(window.devicePixelRatio); see here for more details. Just keep in mind there’s a performance cost, since you’ll be rendering 4x the number of pixels.
1 Like
Thanks. I test all filters from three.js docs
and THREE.LinearMipMapNearestFilter seems to give a slightly better result.
renderer.setPixelRatio(window.devicePixelRatio * 2 ) : Edit fiddle - JSFiddle - Code Playground
is how it should App look. But App works very slow…
You should actually only do this: renderer.setPixelRatio(window.devicePixelRatio);
1 Like
Thanks about idea to change texture size. Play with any variation. I am looking for a way to make clear without renderer.setSize()
I’m not sure where you got the idea to multiply the device pixel ratio by 2. You’re unnecessarily quadrupling the number of pixels to render, and as I mentioned, there’s a performance cost to that. As @Mugen87 said, just use the native pixel ratio of the device, with renderer.setPixelRatio(window.devicePixelRatio);