View in AR not seethrough

Questions
,
#1

Hi! I’m updating the version of the library I’m using from

        "@babylonjs/core": "5.0.0-alpha.60",
        "@babylonjs/loaders": "5.0.0-alpha.60",
        "@babylonjs/react-native": "0.4.0-alpha.41",

to

        "@babylonjs/core": "5.0.0-alpha.65",
        "@babylonjs/loaders": "5.0.0-alpha.65",
        "@babylonjs/react-native": "0.4.0-alpha.46",

But I’m having a small issue, where the view in AR is not ‘see-through’ or clear. The purple background is showing instead of the camera feed. The movements of the camera through the scene are correct with how I’m moving the phone, so I know everything else is working correctly.
I already found that I now have to add a rendertarget to enterXRAsync, from BabylonReactNative/App.tsx at master · BabylonJS/BabylonReactNative · GitHub
But I still have the purple background.

I did not have this issue in the previous version of the library, and I feel this should be an easy fix but I can’t seem to find it :smiley:, any ideas?

Thanks!

#2

just making sure - are you using babylon web or babylon native?

It seems to be an issue with clearing. Have you tried the latest beta (beta.5)? we have been changing the way we clear the scene in the last few versions

1 Like
#3

This is in native, Babylon React Native specifically.
I’ll try the latest beta, but I wasn’t sure if it would mix well with the Babylon React Native version I’m using.

1 Like
#4

@bghgary - what version of babylon can be used to test?

#5

I just checked and am seeing the same behaviour in the beta.5 version.
Here’s the way I’m starting the XR session now:

const xr = await scene.createDefaultXRExperienceAsync({
    disableDefaultUI: true,
    disableTeleportation: true,
    optionalFeatures: true
});
setFeaturesManager(xr.baseExperience.featuresManager);
const session = await xr.baseExperience.enterXRAsync("immersive-ar", "unbounded", xr.renderTarget);
setXrSession(session);

session.onXRSessionEnded.add(() => {
    setXrSession(undefined);
    setTrackingState(undefined);
});
scene.activeCamera = xr.baseExperience.camera;
setTrackingState(xr.baseExperience.camera.trackingState);
xr.baseExperience.camera.onTrackingStateChanged.add((newTrackingState: WebXRTrackingState) => {
    setTrackingState(newTrackingState);
});

Which is mostly copied from BabylonReactNative/App.tsx at master · BabylonJS/BabylonReactNative · GitHub
Let me know if there’s something I’m missing :smiley:

#6

I tried scene.clearColor = new Color4(0, 0, 0, 0); to see if that makes a difference, but that just gives me a black background instead of purple :woman_shrugging:

#7

Can you try setting scene.autoClear to true? to be sure, something like this:

scene.onBeforeRenderObservable .add(function(){ scene.autoClear = true; });

This is not a solution, I am just wondering if it helps

#8

We haven’t updated a new package for Babylon React Native for a while and I’m guessing we need to for this to work. cc @ryantrem

#9

@Peter please try:
“@babylonjs/react-native”: “0.4.0-alpha.47”
This package should work correctly with Babylon.js 5.0.0-alpha.65.

3 Likes
#10

Thanks! It all works now :smiley:

2 Likes