How can I increase texture sharpness

Questions
, ,
1

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,

1 Like
2

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.

3 Likes
3

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?

4

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
5

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

6

… 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