# How can I improve my transparent textures?

**URL:** <https://discourse.threejs.org/t/how-can-i-improve-my-transparent-textures/24064>\
**Category:** Questions\
**Tags:** transparency, materials, textures\
**Created:** [March 4, 2021, 5:33pm UTC](https://discourse.threejs.org/t/how-can-i-improve-my-transparent-textures/24064 "2021-03-04T17:33:00Z")\
**Posts on this page:** 3\
**Page:** 1

<div class="post-metadata">

**Author:** ![Turmolt](https://avatars.discourse-cdn.com/v4/letter/t/bb73d2/32.png) [@Turmolt](https://discourse.threejs.org/u/Turmolt)\
**Post date:** [March 4, 2021, 5:33pm UTC](https://discourse.threejs.org/t/how-can-i-improve-my-transparent-textures/24064/1 "2021-03-04T17:33:00Z")

</div>

I am working on a project for a client and we are finding that some of the transparent logos have a very ugly looking dark border around them when they are used in threejs. I have tried so many things with no luck so I would love help getting the alpha to look nicer.

Threejs vs the supplied image:

[![enter image description here](https://i.stack.imgur.com/zjqYf.png)](https://i.stack.imgur.com/zjqYf.png)[![enter image description here](https://i.stack.imgur.com/1qLnR.png)](https://i.stack.imgur.com/1qLnR.png)

It is very faint but when you zoom in (which they can to an extent in the application) you can see the border:

[![enter image description here](https://i.stack.imgur.com/d9z6q.png)](https://i.stack.imgur.com/d9z6q.png)

Things I have tried:

- Setting texture’s min + mag filters to LinearFilter/NearestFilter. This is the most common suggestion but you can see in my codesandbox that this does not help. If I set it to NearestFilter then the logos start to become pixelated and alias when the camera moves around.

- I changed the blend modes of the standard material and I got weird colors on the edges.

- I wrote my own custom shader that blends between the image color and white based on the supplied image’s alpha but I still get a weird color leaking through. If I crank up the alpha cutoff the edges start to look aliased and not so great.

- I played with the alphaTest value but this ends up causing the edges to end abruptly/not look great.

I demonstrate all of my approaches here:

> **[bitter-sunset-njis4 - CodeSandbox](https://codesandbox.io/s/interesting-wozniak-povk1?file=%2Fsrc%2FApp.js)**
>
> bitter-sunset-njis4 by Turmolt using @react-spring/three, @react-three/drei, react, react-dom, react-scripts, react-three-fiber, three

I think that my shader is close but not perfect. I would really appreciate any advice on the right way to approach and solve this problem.

Thank you!

---

<div class="post-metadata">

**Author:** ![Oxyn](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/oxyn/32/12902_2.png) [@Oxyn](https://discourse.threejs.org/u/Oxyn)\
**Post date:** [March 5, 2021, 2:14pm UTC](https://discourse.threejs.org/t/how-can-i-improve-my-transparent-textures/24064/2 "2021-03-05T14:14:53Z")

</div>

There is no perfect solution for cutout textures, choose your poison.

My personal trick is using higher textures resolution, then drowning the black borders into boosted antialiasing. You do this by overscaling render at 1.5 pixel ratio.

`renderer.setPixelRatio( window.devicePixelRatio * 1.5 );`

---

<div class="post-metadata">

**Author:** ![gkjohnson](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/gkjohnson/32/2298_2.png) [@gkjohnson](https://discourse.threejs.org/u/gkjohnson)\
**Post date:** [March 6, 2021, 1:34am UTC](https://discourse.threejs.org/t/how-can-i-improve-my-transparent-textures/24064/3 "2021-03-06T01:34:28Z")

</div>

I haven’t dealt with this a lot myself so I can’t necessarily give in depth guidance on dealing with this but it looks like an issue with the source image and the stored RGB color of the transparent pixels. Take a look at this article on these types of issues with transparent textures:

> **[Beware of Transparent Pixels - Adrian Courrèges](http://www.adriancourreges.com/blog/2017/05/09/beware-of-transparent-pixels/)**
>
> If you use sprites with transparency in your game — and you most likely do for the UI at least — you’ll probably want to pay …

Specifically the section on fixing it and flooding the RGB color of the transparent background. The article suggests some Photoshop or Gimp plugins but they should have a way to control the pixel value for each channel manually without any plugins.