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?
Cheers
Edit:
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!
