# PNG texture looks grayer with small size

**URL:** <https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953>\
**Category:** Questions\
**Tags:** mipmaps, textures\
**Created:** [January 9, 2020, 7:15am UTC](https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953 "2020-01-09T07:15:05Z")\
**Posts on this page:** 7\
**Page:** 1

<div class="post-metadata">

**Author:** ![ToniFF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toniff/32/7604_2.png) [@ToniFF](https://discourse.threejs.org/u/ToniFF)\
**Post date:** [January 9, 2020, 7:15am UTC](https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953/1 "2020-01-09T07:15:05Z")

</div>

![Topstitch04](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/f/fe69a85355d6b8c27bd2ee36d794652bd6d6b49a.png)  
Hi,  
This png image looks too gray when rendered with small size.  
When the camera is close, it looks like this, which is nice:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/8/84e2e64912e9ef906ec849e229b0c7ec8a68c249.jpeg)  
But when the camera moves farther, I get this:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/b/bd3db01aee646ea80c575d61d9c9eceedf69c8ab.png)  
What I want:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/6/667cbcb3646a309249d1a7488a16ae4860ea0ea8.png)  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/2X/5/587cb2db05dce747343f3b410271cd04650fd942.png)  
I guess it’s mipmap’s fault. Maybe the sampling way is not good so it takes `(0, 0, 0)` rgb color from the transparent pixel to mix with other pixels.  
Set mipmaps with specific sampling way manually is hard for me. And it may be ineffient as OpenGL generates mipmaps on video cards directly.  
Any suggestion will be great. Thanks very much.

---

<div class="post-metadata">

**Author:** ![trymoremore](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/trymoremore/32/1855_2.png) [@trymoremore](https://discourse.threejs.org/u/trymoremore)\
**Post date:** [January 9, 2020, 9:20am UTC](https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953/2 "2020-01-09T09:20:14Z")

</div>

you can set the minFilter of texture,see this [https://threejs.org/docs/index.html#api/en/textures/Texture.minFilter](https://threejs.org/docs/index.html#api/en/textures/Texture.minFilter)

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 9, 2020, 9:24am UTC](https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953/3 "2020-01-09T09:24:27Z")

</div>

> [@ToniFF](#):
>
> Does `WebGLRenderingContext.generateMipmap()` work on CPU or GPU?

I think the following post at stackoverflow answers this question:

> <https://stackoverflow.com/questions/23017317/mipmap-generation-in-opengl-is-it-hardware-accelerated>

It’s in context of OpenGL but I think it’s also true for WebGL. WebGL just uses the underlying native 3D API e.g. OpenGL, DirectX etc.

---

<div class="post-metadata">

**Author:** ![ToniFF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toniff/32/7604_2.png) [@ToniFF](https://discourse.threejs.org/u/ToniFF)\
**Post date:** [January 9, 2020, 11:37am UTC](https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953/4 "2020-01-09T11:37:41Z")

</div>

What kind of minFilter way could solve this theoretically? I tried every kind of filters and none of them gives me better result. `(_\>﹏\<_)′

---

<div class="post-metadata">

**Author:** ![Mugen87](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/mugen87/32/5645_2.png) [@Mugen87](https://discourse.threejs.org/u/Mugen87)\
**Post date:** [January 9, 2020, 11:58am UTC](https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953/5 "2020-01-09T11:58:00Z")

</div>

Can’t just just modulate the color of the material in order to fine-tune the result?

Besides, this could also be a color-space issue. If your renderer has a configured output encoding, you also have to set `Texture.encoding` to a proper value. Most probably `THREE.sRGBEncoding`.

---

<div class="post-metadata">

**Author:** ![ToniFF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toniff/32/7604_2.png) [@ToniFF](https://discourse.threejs.org/u/ToniFF)\
**Post date:** [January 9, 2020, 1:15pm UTC](https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953/6 "2020-01-09T13:15:38Z")

</div>

😟The texture is given by clients. They found that the render result is different from their modeling software. The images about what I want come from that software. We use the same shader code, so the render results look same at most of time.  
I use my own shader material and do gamma correction myself. I add a image rendered with closer camera and the color is nice. So I think this has no relation with color space.

---

<div class="post-metadata">

**Author:** ![ToniFF](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/toniff/32/7604_2.png) [@ToniFF](https://discourse.threejs.org/u/ToniFF)\
**Post date:** [January 11, 2020, 2:02pm UTC](https://discourse.threejs.org/t/png-texture-looks-grayer-with-small-size/11953/7 "2020-01-11T14:02:21Z")

</div>

Finally, I decide to compute mipmaps myself for png image, because the alpha channel must be taken into account : [https://entropymine.com/imageworsener/resizealpha/](https://entropymine.com/imageworsener/resizealpha/)