[ENGINE ONLY] Rendering issue of glb model

I’m using Vue.js, the playcanvas engine, draco and mesh optimizer to load .glb models into my scene. I used portions of code from the playcanvas viewer to set up my app.

I can successfully load glb models, however, when I zoom out a lot, my model is rendered in a weird way. Not sure if this is caused by the setup, renderer or camera settings.

This is how it looks in my app:

And this is how it should look, as in playcanvas viewer:

Does anyone have a clue what went wrong here?

In my scene I changed the light and shadow settings and since I’m not using a skybox, the model looks a bit darker (I guess). Textures work too.

Some of that looks like z fighting of meshes. Does the issue only happen you zoom out?

1 Like

Yes, only when I zoom out a lot. Close up it looks normal.
I thought about z-fighting too and checked if the model got added multiple times, but my asset registry seems to only have it once, as it contains:

  • modelfile.glb
  • texture_0
  • modelfile.glb/model/0
  • modelfile.glb/material/0

Not sure if that alone excludes z-fighting though.

What is the min/far clip values for the camera?

1 Like

Oh gosh, thank you @yaustar
nearClip was 0.0001 and that caused the issue.
At 0.01 it still happens, but only at about orbitCamera.distance > 200.
At 0.1 it’s all good.

This is known as Depth Buffer Precision where the range between your near and far clip is too large: https://www.khronos.org/opengl/wiki/Depth_Buffer_Precision

1 Like

That is really good to know. Thanks for the reference!