# Gltf material depth issues in three.js but looks fine in other viewers

**URL:** <https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705>\
**Category:** Questions\
**Tags:** gltf-loader\
**Created:** [February 22, 2021, 3:46am UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705 "2021-02-22T03:46:39Z")\
**Posts on this page:** 13\
**Page:** 1

<div class="post-metadata">

**Author:** ![Tids](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tids/32/16549_2.png) [@Tids](https://discourse.threejs.org/u/Tids)\
**Post date:** [February 22, 2021, 3:46am UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/1 "2021-02-22T03:46:39Z")

</div>

Hi guys,

I’m loading a gltf model (from Cinema4D with baked materials) using the standard GLTFLoader method from the docs/examples. Looks exactly how it should in [threejs.org/editor](http://threejs.org/editor) and gltfViewer, but I’m getting strange depth issues with the materials (or maybe vertices) when I load into three.js.

Here’s what it looks like in any viewer/editor:

 ![Screenshot 2021-02-22 at 01.54.08](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/9/1948d0f76abf19cf2df70a14b29807b8dda333ab.jpeg)

and this is using the latest methods in a three.js app:

 ![Screenshot 2021-02-22 at 01.55.03](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/f/ffc7477f6a9bd6457c73d51b3cc7c71771cdd318.jpeg)  
 ![Screenshot 2021-02-22 at 01.55.16](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/8/2/82cf59f696b9c1ab5a8ac79a0796e107b9a9f2f9.png)

I’ve tried a the latest r125 - same issue. It seems to happen on all models (that ship with the master files) so I’m wondering if I’m missing something obvious, maybe enabling depthTesting on materials (though I have tried a couple of ways and nothing seems to work).

Any pointers would be helpful.

Cheers, Tids

---

<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:** [February 22, 2021, 10:36am UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/2 "2021-02-22T10:36:13Z")

</div>

Do you mind sharing the glTF asset in this topic?

---

<div class="post-metadata">

**Author:** ![Tids](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tids/32/16549_2.png) [@Tids](https://discourse.threejs.org/u/Tids)\
**Post date:** [February 22, 2021, 1:53pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/3 "2021-02-22T13:53:29Z")

</div>

Hi Mugen. Sure, it’s only a test model I threw together to test the C4D \> Three.js workflow but here they are (might not be positioned or scaled properly)

[house.gltf](https://discourse.threejs.org/uploads/short-url/fZGcWa3vPEYMsS6vs1lsKMTIiWI.gltf) (165.4 KB)

and the binary version:  
[house.glb](https://discourse.threejs.org/uploads/short-url/haOauzd3rOmx4BA5L4HLMaJ0939.glb) (117.6 KB)

I’m having the same issue with any glTF file so I must be missing something obvious / my workflow is wrong.

Tids

---

<div class="post-metadata">

**Author:** ![elysium11](https://avatars.discourse-cdn.com/v4/letter/e/8e7dd6/32.png) [@elysium11](https://discourse.threejs.org/u/elysium11)\
**Post date:** [February 22, 2021, 2:35pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/4 "2021-02-22T14:35:31Z")

</div>

work in my case , i ve just changed material cause i wasnt able to see if there is a problem with original ( too light cause your emmisive input )  
so i have imported in blender change color to green , and i ve seen your house is clean and have the same result in web … ( dont forget to reset origin of your object ) [house2.glb](https://discourse.threejs.org/uploads/short-url/kSpxAdiVIpAzkcI35w7fibU0V9z.glb) (16.9 KB)

---

<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:** [February 22, 2021, 4:16pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/5 "2021-02-22T16:16:54Z")

</div>

The assets look indeed fine so there must be something wrong with your code. Do you mind sharing your setup?

---

<div class="post-metadata">

**Author:** ![Tids](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tids/32/16549_2.png) [@Tids](https://discourse.threejs.org/u/Tids)\
**Post date:** [February 23, 2021, 1:15am UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/6 "2021-02-23T01:15:59Z")

</div>

Thanks for the replies guys, it’s obviously user error but good to know the model exporting/loading works, thanks for that!

I’ll start from one of the examples files that works and see how I get on. If I’m still missing something I’ll let you know. I’ll do my best to solve it first though.

Many thanks again

Tids

---

<div class="post-metadata">

**Author:** ![Tids](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tids/32/16549_2.png) [@Tids](https://discourse.threejs.org/u/Tids)\
**Post date:** [February 23, 2021, 3:38pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/7 "2021-02-23T15:38:24Z")

</div>

Right I’ve finally got it all working but with some interesting findings/anomalies - maybe there’s a simple explanation for them.

This code works fine, the model loads perfectly with no artefacts, but only when I work in very small scale in Three.js - scaling my model down by 0.00009:

```javascript
loader = new GLTFLoader();

    loader.load( 'models/house/house.gltf', function ( data ) {

        gltf = data;

        const object = gltf.scene;
        
        // scaling my models right down removes artefacts
        const modScale = 0.00009;
        object.scale.set( modScale, modScale, modScale );

        scene.add( object );

    }, undefined, function ( error ) {

        console.error( error );

    } );

```

Which renders this:

 ![Screenshot 2021-02-23 at 15.23.54](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/1/7/1772e6e7fcd95c8af840796dadca74f37ddb1b80.jpeg)

However if I try and work in a larger scale in Three to closer match my scale units in C4D - where I’m working in centimetre scale - so less scaling down of the models, I get this sh\*t-show:

 ![Screenshot 2021-02-23 at 15.25.17](https://canada1.discourse-cdn.com/flex035/uploads/threejs/original/3X/f/9/f9d61fcf2cc48f946ab6339c82eb22f00b8b3424.jpeg)

which is easily fixed by enabling the logarithmic depth buffer, but is there any overheads to either approach; Either Scaling everything down by 0.00009x, or enabling the logarithmic depth buffer and working on a larger and more manageable scale?

I can’t see any difference in performance between either approach but my scene is too lightweight at the moment I’m guessing.

Thanks again for any pointers,

Tids

---

<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:** [February 23, 2021, 3:51pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/8 "2021-02-23T15:51:06Z")

</div>

It seems that your modeling has an issue if you need for a simple house model a logarithmic depth buffer. I suggest you author the model in real world sizes, then things will work out of the box.

---

<div class="post-metadata">

**Author:** ![Tids](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tids/32/16549_2.png) [@Tids](https://discourse.threejs.org/u/Tids)\
**Post date:** [February 23, 2021, 4:09pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/9 "2021-02-23T16:09:23Z")

</div>

I’m not sure I follow @Mugen87. do you mean change my modelling world scale to meters for example - real world scale? Then my models would need even greater scaling down in Three?

Is there an overhead for using logarithmic depth buffer and working at larger scales? Would be handy to know before I start modelling the whole environment.

Thanks for your advice,

Tids

---

<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:** [February 23, 2021, 4:19pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/10 "2021-02-23T16:19:52Z")

</div>

> [@Tids](#):
>
> do you mean change my modelling world scale to meters for example - real world scale? Then my models would need even greater scaling down in Three?

In `three.js` (and most other engines) one world unit is considered to be 1 meter. A single-family house with let’s say 150 square meters living area should have a AABB with a size of maybe (10,7.5,10).

---

<div class="post-metadata">

**Author:** ![Tids](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tids/32/16549_2.png) [@Tids](https://discourse.threejs.org/u/Tids)\
**Post date:** [February 23, 2021, 4:28pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/11 "2021-02-23T16:28:48Z")

</div>

That’s great that’s a metric I’d much rather work in, it’s just at the moment my model is 60x50x40cm, but when I try and render it at it’s native size with the camera positioned accordingly and a further camera.far limit I get all the crappy artefacts (with logarithmic depth buffer disabled), but scaling it down to minute size it renders fine.

So if I were to work in meters so my model is even larger, I’m only assuming I’d have the same issue or worse and would have to enable logarithmic depth buffer?

I won’t push my luck on this thread, I’ll do some experiments later and see what’s what - I’m relatively new to a modelling + Three.js workflow so just picking up the best practices.

Cheers,

Tids

---

<div class="post-metadata">

**Author:** ![elysium11](https://avatars.discourse-cdn.com/v4/letter/e/8e7dd6/32.png) [@elysium11](https://discourse.threejs.org/u/elysium11)\
**Post date:** [February 23, 2021, 5:07pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/12 "2021-02-23T17:07:15Z")

</div>

hello,

my setting in blender  
unit system : metric  
length : centimeter ( = display of all length )

and when i export my scene , 1 meter in blender become 1 in three.js so there is no surprise

perhaps you have the same type of setting in your software?

---

<div class="post-metadata">

**Author:** ![Tids](https://yyz1.discourse-cdn.com/flex035/user_avatar/discourse.threejs.org/tids/32/16549_2.png) [@Tids](https://discourse.threejs.org/u/Tids)\
**Post date:** [February 23, 2021, 6:34pm UTC](https://discourse.threejs.org/t/gltf-material-depth-issues-in-three-js-but-looks-fine-in-other-viewers/23705/13 "2021-02-23T18:34:02Z")

</div>

Ah ok I think I understand the concept now. Thanks @elysium11

Thanks guys, appreciate all the advice!