I made a png image of a leaf in Photoshop and used it as a plane in blender. The original resolution was 2048X2048, however when creating the tree below I did scale the leaf plane to an arbitrary size after adding vertices and curving it. I’m using react-three-fiber and the useGLTF() hook from drei to load the gltf. it loads fine except when zoomed out on desktop and anytime on mobile it has this very pixelated look. Additionally, I intend to have this scene’s orbit controls auto rotate which results in this really ugly wavy look along the edges of the model as it rotates. If anyone has any insight on how to fix this even in photoshop or blender I would greatly appreciate it. The two reference images are below, the first one is zoomed in and is the expected look, the second one makes me uncomfortable. Thank you to whoever can help! 
Wow it really seems like there’s really nothin to fix this. Is this just something that’s inherent to loading png as planes? Even giving me some insight on this would help me greatly.
- Try setting pixelRatio of the renderer to
2.0(in react-three-fiber you can do that in the Canvas element:<Canvas pixelRatio={2.0}>.) - Make sure textures use
LinearFilterfiltering. - Try using mipmaping or setting anisotropy to a higher value (docs.)
Great thank you so much, setting the pixel ratio made it look acceptable. Couple other questions.:
Does changing the pixelRatio affect load times or usage of the gpu?
Where can I access the texture object ( so I can get to linearFilter, mipmapping, and anisotropy) given I’m loading a GTLF with textures already on it and using react-three-fiber?
Sorry if these are newbie questions, thanks again for the help!
Does changing the pixelRatio affect load times […] ?
Nope.
Does changing the pixelRatio affect […] the gpu?
A lot. So if not absolutely necessary, keep pixelRatio at 1 (especially on low-end devices.) Increasing pixel ratio effectively scales up the screen resolution.
I see, cool thank you. For the second question can I access mipmapping and anisotropy on a texture that is loaded with the gtlf? or how could I access those settings, because I see in the docs you can access those functions from a new THREE.textureloader
Unfortunately still having trouble with this…
Though setting pixelRatio={2} made it look better, I would like to get it to where the model looks like what I’m seeing in blender before render. Just want to list some points and questions incase anyone here has any insight on how to fix this.
- I’ve tried setting the pixel ratio to window.devicePixelRatio with no effect
- I can’t seem to access texture settings like linear filtering, mipmapping, or anisotropy given that the textures are coming with the .gltf file. Or I’m at least naive on how to access them like this.
- I haven’t viewed the model stand alone except for in the browser in my code and on an online .gltf viewer. both have the same issue, which leads me to believe that it may be my render.
- If it is my render I’m wondering if there are any blender people here that can direct me to a fix within blender.
- As you can see it’s only the leaf edges that are pixelated. They are png images as planes that I added vertices to. The tree trunk doesn’t seem to have a problem. I’m unsure why this is.
Any and all help is really appreciated, Thank you so much.
Logged my materials and noticed (magFilter: 1006, minFilter at 1005). Ended up going directly into the gltf object and editing the “samplers” array from (magFilter: 9729 minFilter: 9986) to (magFilter: 1000, minFilter: 1000). The minFilter and magFilter of my logged material changed to (magFilter: 1006, minFilter: 1008). I honestly have no idea what any of this means, but it works A LOT better now without any noticeable difference in load time or performance. Guess I’m putting this up here incase I did something terribly wrong so someone can stop me, or if I did something right and it helps someone else.
1006 = THREE.LinearFilter
1008 = THREE.LinearMipmapLinearFilter
These are actually the default values for magFilter and minFilter properties and provide best quality.
Oh wow sick!