[SOLVED] GLB + info hotspot = weird clipping?

Help & Support
1

I’m seeing some weird clipping / depth order issues when using a GLB model and an info hotspot-type functionality. When using a primitive, there are no issues, but with GLB models, the hotspots are clipped at weird agles.

Used this code to load the GLB: Loading glTF GLBs | Learn PlayCanvas
And this for the info hotspots: Information hotspots | Learn PlayCanvas

Project here: PlayCanvas 3D HTML5 Game Engine

Recording to show issue:

2

Office Hours video:

TLDR, it’s a transparent layer render order issue where the engine thinks the sides of the box that are being rendered on the transparent layer is closer to the camera than the hotspot and therefore renders last. This is fixed by ensuring the hotspots are rendered last through the use of render layers

Fixed project: [SOLVED] GLB + info hotspot = weird clipping?
SpectorJS: https://spector.babylonjs.com/

2 Likes
3

:clap: :clap: :clap:

Thank you! Well explained and really helpful! Thank for taking the time to do that video, and pointing to the SpectorJS tool :+1:

Good point about the quads, I had no idea they were rendered on the transparency layer. I assume - as the textures are meant to be basic diffuse layers - the model isn’t set up in an ideal/correct way. Will look into that.

Edit: I assume the reason for the clipping for the GLB is because it’s broken into quads while the primitives are one object, so the draw order gets a bit messy? I.e. nothing to do with the imported model being GLB?

4

That’s correct, it’s not related to being a GLB.

It’s the just that the materials used for the sides are rendered on the same transparent layer as the hotspot and as you say, the draw order becomes incorrect at certain angles.

1 Like