Newbie question about sprites not showing within an "inside out" mesh

Hello there !

I’m brand new to Babylon.js and am loving everything I’ve seen and learned so far. So first off, tell me if I’m doing or saying anything wrong here, I’m not used to developers forums. ^^

I’ve run into a problem when I tried to create Sprites within a sphere map. So I got a mesh with a ClockWiseSideOrientation texture (inside out), and the camera is supposed to be locker at the center of it, to replicate kind of a skybox with a 360° photo texture.

The issues is the sprites just don’t show. Through the inspector, and by moving to an ArcRotateCamera, I’ve found that the sprites are there, but only show when the Mesh.BoundingBox is displayed, AND if the mesh itself has a visibility < 1.

I set up a straight forward playground here for demonstration.
Toggle the two lines at the end to see the issue.

I assume this is a completely normal and expected behaviour, probably because the sprite is actually inside a solid sphere, but I would like to know more about this issue, and the possible work arounds. It seems like a pretty basic case, so I imagine some already ran into it and found some solutions.

Thanks anyway for reading this ! Glad I discovered Babylon.js ! :smiley:

EDIT : Thanks to @Evgeni_Popov ! The explanation made sense and the bug has since been fixed in the source code. :slight_smile:

Welcome aboard and congrats, you have found a bug!

Here’s the PR:

The CCW state was not reset by the sprite renderer, so it inherited the one currently in effect, which is CW in your PG because you set it for the sphere that way.

1 Like

Thank you for your reply !

Given my inexperience, I generally try to avoid jumping to the ‘it’s a bug’ accusation, so I didn’t suspect this at all !

What does CCW stand for ? Is it about the face culling ?
I would love to understand the reason and the fix a little better, but if it is a bit too deep down the source code to grasp easily, I’d understand.
I approved the PR, but I guess I don’t have the power to validate the request. Do you know how long the implementation could take ?

It means CounterClockWise and it is the default setting to render front faces of meshes.

Not really, it’s quite simple to understand. The default setting for the front face culling is CCW, meaning faces that have their vertices in counter clock wise order (after projection to the screen) will be visible, and those having their vertices in clock wise order won’t.

You set mat.sideOrientation = BABYLON.Material.ClockWiseSideOrientation (CW) to have the back faces of the sphere visible instead of the front faces, and because of the bug this setting remains in effect when the sprite is rendered, which makes the sprite invisible because the sprite geometry is built in such a way that it is visible when the current front face state is CCW. The fix is simply to reset the state to CCW before rendering the sprite.

It should be approved and merged today and the fix will be available in the Playground / in this directory after the next nightly following the fix merging (probably today too, pacific time).


Oh, yeah, that makes sense !

I think I see what’s happening. So it’s just a matter of toggling before rendering ? I don’t get how the and the visibility properties interact with this issue though.

Thanks again for your time ! I’ll keep an eye on the fix implementation before I mark your post as the answer. :slight_smile:

That’s the tricky part :wink:

The will trigger a drawing (the bbox) that resets the front face to CCW. With this setting alone, the drawing order is:

  • sphere => sets CW
  • sprite => use CW as set by the sphere
  • bounding box => sets CCW

As you can see, it’s still not ok.

When you set visibility = 0.9, you make the engine handle the sphere as a transparent object. Transparent objects are rendered after opaque and sprite objects, so the order is now:

  • sprite => use CCW as set by the bounding box rendering of the previous frame
  • sphere => sets CW
  • bounding box => sets CCW

And it is now ok!

1 Like

Oh, okay ! So there are different rendering cycles, the order of which successively affects the faces orientation. Sounds tricky indeed !

Thank you for explaining ! I’ve seen the fix has been merged. I guess I have to update the Babylon dependency in my project before I can benefit from it ? Or will it only be part of the next minor release ? (sorry if the answer’s obvious)

You need to get the packages from Babylon.js/dist/preview release at master · BabylonJS/Babylon.js · GitHub.

If you are using npm, however, you will need to wait a bit longer as I think we build the npm packages only every 2 weeks or so.