WebXR Issue with mesh parts disappearing

Questions
1

Hello, this is my first post on the Three forum. I am more familiar with Babylon and I am on the that forum a bit. I got looped into making a game in VR using React Three Fiber for Niantic/8th Wall and I am struggling with an issue I can’t find an exact answer for.


image
image1920×1830 141 KB

We have this big Hive mesh the player stand inside of. It works great when I emulate it on desktop but as soon as I am viewing it on oculus parts of it start to disappear.

It looks like to me the faces are being culled because the engine detects its either not visible or out of the camera frustum.

So a few things I have tried:

  • Setting frustumCulled to false to all child objects
  • Setting depthWrite false on the child meshes if they are transparent.
  • Setting the render order. I tried opaque first and transparent first and it was still broke.
  • And finally calling geometry.computeBoundingSphere() on all child objects.

Sometimes it has worked perfectly fine but most of the time just seems to break.

export default function HiveInterior() {
  const camera = useCamera();
  const { scene } = useGLTF(
    require("../../../../assets/models/hive/hiveInterior.glb")
  );
  const cloneRef = useRef();

  useEffect(() => {
    if (!cloneRef.current) return;
    cloneRef.current.traverse(function(obj) { 
      if(obj.geometry){
      obj.geometry.computeBoundingSphere()  
      }
      obj.frustumCulled = false;
      
       });
  }, []);

  return (
      <mesh 
      ref={cloneRef}
      position={[camera.position.x, 0.1, camera.position.z]}
      >
        <Clone   object={scene} />
      </mesh>
  );
}

Any advice or links for me to read would be much appreicated.

Thank you!

2

Hi Luke, this looks indeed like a culling issue. Would you mind sharing the glb file?

1 Like
3

Hello Hands thanks for the quick reply.
Here is a link where you can download the mesh:

Its pretty big about ~30mb. If there is a better method to share it please let me know. It would not let me upload the model to the forum.

I know the artists created it in Maya. I told him we may have to make some changes to it to get it to work. He broke the honey into their own children meshes but that did not fix the problem.

4

Opaque objects are initially sorted by distance to camera… but all the meshes in your glb have their position at 0,0,0, so you’ll definitely need to set .renderOrder on them to control their ordering.
Make sure you set it on the meshes themselves… and also make sure the transparent honey meshes are marked as material.transparent = true

R.e. file size… You can use mesh compression via DRACO, or meshopt to get the file size way down.

DRACO + textures->jpg exported it down to 7 megs:

hiveInterior.glb (7.9 MB)

(sorry i left a default cube in there… )

Here’s the export settings i used:

image
image1061×687 137 KB

1 Like
5

Hi Luke, I’ve imported the beehive model in the WebXR demo “elements”(https://github.com/beemsoft/webxr-handtracking-playground/tree/master/src/demo/elements/src)
and it looks quite good apart from just a few honeydrop glitches:

These glitches are probably related to this issue:

1 Like
6

@manthrax Thanks man!
I have been moving so fast I forgot that was a thing. I will for sure have to get all the glbs compressed by the time we launch.
@Hans_Beemsterboer
And good news I found a solution.

I guess the artist made the hive core (everything but the honey) into one object at the start. All the honey parts were there own separate object. We went through several different versions to see what worked and found breaking up the walls into smaller objects fixed the issue.

Like I said it works perfectly fine on desktop but in VR it seems to have issues and I have no idea why.

Thanks again I appreciate the help.

2 Likes