# Transparency and Inconsistent Blending

**URL:** <https://discourse.threejs.org/t/transparency-and-inconsistent-blending/28164>\
**Category:** Questions\
**Tags:** transparency, blending\
**Created:** [July 20, 2021, 1:58am UTC](https://discourse.threejs.org/t/transparency-and-inconsistent-blending/28164 "2021-07-20T01:58:11Z")\
**Posts on this page:** 4\
**Page:** 1

<div class="post-metadata">

**Author:** ![viperphase1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/viperphase1/32/43540_2.png) [@viperphase1](https://discourse.threejs.org/u/viperphase1)\
**Post date:** [July 20, 2021, 1:58am UTC](https://discourse.threejs.org/t/transparency-and-inconsistent-blending/28164/1 "2021-07-20T01:58:11Z")

</div>

[View model in Mcurdy Viewer](https://gltf-viewer.donmccurdy.com/#model=https://view.seekxr.com/gee-whiz/test4/fc502dd1561b0d417cbec25063af6c13.glb)

The model above has some transparency issues. The blending of the see-through layers is inconsistent depending on the angle. You’ll see the issue pretty quickly if you rotate around the model. Also the ridged area at the bottom doesn’t add to the blending most of the time. I’ve done a lot of reading on the topic of transparency and I’m about ready to give up trying to make it perfect. I just wanted to see if anyone has found a way to resolve these types of issues. Also we have full creative freedom over the model so if you have any advice about how to redo the model to avoid transparency issues like this I would love to hear it.

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 20, 2021, 3:01am UTC](https://discourse.threejs.org/t/transparency-and-inconsistent-blending/28164/2 "2021-07-20T03:01:52Z")

</div>

I think double-sided materials for the transparent base might help a bit, perhaps reducing the alpha if it becomes too dark. Comparing:

| front-side | double-side |
| --- | --- |
| ![front-sided](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/6/8/6820d24bdc802d3cc53f4823ba75bb463a368696.jpeg) | ![double-sided](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/6/368f4d79a328e54f5445f2a9e98b733ba6ee37dd.jpeg) |

That said, this is a difficult setup for alpha-blended transparency… Splitting the inner and outer shells into two different meshes may help, as well. If you have control over the mesh render order (three.js gives you that, glTF does not) then forcing the inner and outer shells to render in a particular order is also worth a try.

The Khronos Slack has a glTF channel that may have some better advice than mine: [Join KhronosDevs on Slack | Slack](https://khr.io/slack)

---

<div class="post-metadata">

**Author:** ![viperphase1](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/viperphase1/32/43540_2.png) [@viperphase1](https://discourse.threejs.org/u/viperphase1)\
**Post date:** [July 20, 2021, 3:41am UTC](https://discourse.threejs.org/t/transparency-and-inconsistent-blending/28164/3 "2021-07-20T03:41:03Z")

</div>

Thanks for the reply! Btw I appreciated this post XD.

> [@ThreeJS and the transparent problem](https://discourse.threejs.org/t/threejs-and-the-transparent-problem/11553/38):
>
> Seems like this should probably be included somewhere in the thread… grin

We might be able to do some of the curved surfaces as their own objects. I was also thinking about double-sided-ness. When I tried changing the material to be double-sided I got a ton of artifacts though. How did you make it double-sided without introducing artifacts?

---

<div class="post-metadata">

**Author:** ![donmccurdy](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/donmccurdy/32/33209_2.png) [@donmccurdy](https://discourse.threejs.org/u/donmccurdy)\
**Post date:** [July 20, 2021, 3:50am UTC](https://discourse.threejs.org/t/transparency-and-inconsistent-blending/28164/4 "2021-07-20T03:50:07Z")

</div>

I guess I’m seeing some artifacts (along the sides, at certain angles) but less so than when single-sided. I’m pasting the model into [https://gltf.report/](https://gltf.report/) and running the script below:

```javascript
for (const mat of document.getRoot().listMaterials()) {
	if (mat.getAlphaMode() === 'BLEND') {
		mat.setDoubleSided(true);
	}
}

```

The preview there uses [https://modelviewer.dev/](https://modelviewer.dev/), which is still three.js, but may have some different configuration than the defaults.