Hello there,
I have an issue with using one of the sketchfab model in my R3F app. Somehow it gets blur (but not always 
)
This is the model when I zoom in in sketchfab, as it should be.
and this is how I have it in my app:
The weird part is that if I start a new browser then sometimes it’s crispier again (but not always) and generally when I zoom in I lose all the sharpness and get a big blurry models. What could explain this ?
This is my implementation of the model:
<Canvas style={{ background: "black" }} dpr={[1, 2]}>
<axesHelper args={[20]} />
<OrbitControls />
<Center>
<City />
</Center>
<PerspectiveCamera makeDefault />
<EffectComposer>
<N8AO
color={0x00ff00}
intensity={1}
aoRadius={0.5}
distanceFalloff={0.1}
/>
</EffectComposer>
</Canvas>
<City> been the model generated with gltfjsx
I really need it to be sharp all the time but can’t find the trick.
I think i had a similar problem once, i think the problem was the textures mipmapping. Setting the magFilter to THREE.Nearest could fix it.
Here is a resource:
https://sbcode.net/threejs/mipmaps/
1 Like
Thanks ! Sounds like a great hint, I’ll try to find how to do this with R3F and come back if I succeed (or not) 
Ok I have implemented this in my City component:
for (const [key, value] of Object.entries(materials)) {
if (value.isMaterial && value.map) {
value.map.magFilter = THREE.NearestFilter;
value.map.minFilter = THREE.NearestFilter;
}
}
And doesn’t feel like any upgrade, there is still a major sharpness difference between sketchfab (left) and my local rendering… (right) 
Do you mean the Edges of the models or the textures? I thought we talk about texture bluriness:)
The edges can be fixed by adding antialiasing if thats the problem. But in R3F it should automatically be enabled.
Another thing that impacts the sharpness is the DPR set in the renderer. Try using 2 as a value, but that only affects screens that are capable of a DPR higher than 1.
I still have a hard time putting name to the issues maybe it’s not bluriness indeed but something else. Anyway I’d like my model to look the same way as on sketchfab 
For me it looks blurry, no sharp edge, not similar lightning… so many things are different.
For dpr I already have:
<Canvas style={{ background: "black" }} dpr={[1, 2]}>
And from my understanding it should be 2 when available and 1 otherwise. And indeed, AA is on by default so seems to be something else still
Another weird finding: results differ a lot from one browser to another…
Looks cripsier on firefox but everything seem slow (there are some animation)
On safari average quality but orbitsControl not working properly…
I downloaded the blender model and then did an extract to .glb with 100 texture quality and no compression and importing the glb model works perfectly. No idea what’s wrong with the .gltf
