# Glb object turn dark from certain angles

**URL:** <https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [August 19, 2022, 2:55pm UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622 "2022-08-19T14:55:17Z")\
**Posts on this page:** 8\
**Page:** 1

<div class="post-metadata">

**Author:** ![Jeff\_Boker](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jeff_boker/32/22518_2.png) [@Jeff\_Boker](https://discourse.threejs.org/u/Jeff_Boker)\
**Post date:** [August 19, 2022, 2:55pm UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622/1 "2022-08-19T14:55:17Z")

</div>

I am overlaying an NRRD file with a transparent gltf model. However, I noticed that at certain angles, the gltf model turns dark and at other angles it looks transparent as I want.

Here is a transparent gltf duck model overlaid with the NRRD model from top view and side view:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/e/5eb576a71f08cc9aa10c811ed37d318e6f9273e7.png) ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/5/8/587e672828f4a961d749e5d8397b11b7b7debcfb.png)

But when I look at it from the opposite side or different side view angle , it appears darker:  
 ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/3/b/3be9b8f6dd4f73dbf35992b10a4fbcc693de9acf.png) ![image](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/a/6/a6035e5367382175845a57f0c04f753d28a2d44b.png)

At first I thought it was because of my lights, but I am using hemisphere light which should light up all the areas:

```javascript
const hemiLight = new THREE.HemisphereLight( 0xffffff, 0xffffff);
hemiLight.position.set( 0, 100, -100 );
scene.add( hemiLight );

```

But this does not seem to help. How can I make the duck look transparent from all viewing angles?

---

<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:** [August 19, 2022, 3:09pm UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622/2 "2022-08-19T15:09:03Z")

</div>

I would suggest trying both `.depthWrite = false` and `.depthWrite = true` on any materials where you have set `.transparent = true`. If the original glTF file used alpha blending transparency then GLTFLoader will set `.depthWrite = false` automatically, but if you’re modifying materials later you’d need to do it yourself.

Note that transparent objects are sorted by the center of their bounding box, and rendering is very sensitive to sort order. Since you appear to have two interlocking transparent objects centered at the same point here, there’s little the renderer can do to ensure that triangles are rendered in the expected order, this is a very error-prone situation.

---

<div class="post-metadata">

**Author:** ![Jeff\_Boker](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jeff_boker/32/22518_2.png) [@Jeff\_Boker](https://discourse.threejs.org/u/Jeff_Boker)\
**Post date:** [August 20, 2022, 2:12am UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622/3 "2022-08-20T02:12:06Z")

</div>

What about certain transparent parts in the gltf model suddenly appearing and disappearing as I rotate around the model? A gltf model with multiple parts inside sometimes pop up in the view and then disappear.

---

<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:** [August 20, 2022, 11:10pm UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622/4 "2022-08-20T23:10:06Z")

</div>

This is also related to sorting. The issue is common with interlocking transparent parts. Disabling depthWrite can help a bit, but there is no universal solution with alpha blending. There might be case-specific workarounds depending on specifically what you’re trying do display, for example: [Material: Add .alphaHash and .alphaHashScale by donmccurdy · Pull Request #24271 · mrdoob/three.js · GitHub](https://github.com/mrdoob/three.js/pull/24271)

---

<div class="post-metadata">

**Author:** ![Jeff\_Boker](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jeff_boker/32/22518_2.png) [@Jeff\_Boker](https://discourse.threejs.org/u/Jeff_Boker)\
**Post date:** [August 30, 2022, 2:44pm UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622/5 "2022-08-30T14:44:14Z")

</div>

The transparency looks exactly what I want from one side which is the nrrd object is seen at all times and the gltf is transparently shown. But the opposite side always gives the wrong effect which is the transparent model does not let the nrrd model be seen through it. Is there a solution to take the effect that I get on one side and transfer it to the opposite viewing angle?

---

<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:** [August 30, 2022, 3:22pm UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622/6 "2022-08-30T15:22:51Z")

</div>

You’ll need to think about this in terms of render order. Transparent objects must be sorted back-to-front to render correctly. Sometimes this requires sorting individual triangles. Sometimes it isn’t possible to get a perfect sort when triangles or objects interlock. If it looks wrong from a particular viewing angle, you may need to do something to force a particular render order, or to separate interlocking parts of objects. There is no one-size solution here, so I can only give general suggestions in response to the screenshots above and my guess at what you might be seeing.

---

<div class="post-metadata">

**Author:** ![Jeff\_Boker](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/jeff_boker/32/22518_2.png) [@Jeff\_Boker](https://discourse.threejs.org/u/Jeff_Boker)\
**Post date:** [August 30, 2022, 7:15pm UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622/7 "2022-08-30T19:15:54Z")

</div>

Thanks, that does make sense to me now why I get my above results. From one side it is rendering from back to front with the expected transparency effect. But if I move my camera to the opposite side, I am now looking at the back which prevents me from seeing the front show through the transparent model.

So how can I manipulate the rendering order in Three Js?

---

<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:** [August 30, 2022, 7:21pm UTC](https://discourse.threejs.org/t/glb-object-turn-dark-from-certain-angles/41622/8 "2022-08-30T19:21:53Z")

</div>

If the centers of the objects’ bounding boxes are in the same location, the easiest way to change the render order is to shift the objects very slightly. three.js sorts by the bbox center, by default.

Alternatively you can disable default object sorting (`renderer.sortObjects = false`) and specify a specific order for the objects with [`object.renderOrder = order`](https://threejs.org/docs/?q=object3d#api/en/core/Object3D.renderOrder).

In cases where a single object is occluding itself you can sort triangles be reordering `geometry.index`, but this shouldn’t be necessary if one object is occluding another object.