How can I increase texture sharpness

Hello,

I am trying putting sharpness here, because my works look a little but blurry.

It is just an example. Left one is our work on threejs.

Also I have another question here.
This blue one is ironing board.

When I see it tilt position, it blur too. It looks like DOF.
Can I remove this option?

Thanks,

2 Likes

Try setting the anisotropy level of your texture:

const texture = new THREE.TextureLoader().load( 'yourJeansTexture.png' );
texture.anisotropy = renderer.getMaxAnisotropy();

It may go some way towards resolving your issue.

4 Likes

Thank you!
I get a way better result thanks to you.
It surly works.

However I hope I can develop something. I uploaded a file on Sketchfab the same file.
Saturation, Contrast, Brightness etc. are applied here.

Could you please let me know those kinds of options?

You can change the tone mapping type and set the exposure and whitepoint in the WebGLRenderer. See the docs and the WebGL / ToneMapping example.

However the overall brightness and contrast are probably being applied as post processing effects - have a look at postprocessing / nodes to see an example of this.

I’m not sure about the sharpness setting specifically - but all the rest of the settings you linked can be applied as post processing. Have a look through the postprocesing examples, you’ll find DOF, SSAO, Grain and lots of other effects being used.

3 Likes

I’m also having a blurry texture problem - I’m not seeing any change in appearance after adding a call to renderer.capabilities.getMaxAnisotropy(). :-/ I opened a StackOverflow question with some more details of my problem here: https://stackoverflow.com/questions/51410357/rendering-sharp-text-as-a-three-js-texture

… And just as I decide to post here I solved my issue, by increasing the source image’s resolution and adding material.map.minFilter = THREE.LinearFilter;

5 Likes