Clear Camera render of 8th wall camera Before switch to playcanvas camera

Help & Support
1

Hey guys,

I am building an AR application using playcanvas with an 8th wall. I am facing an issue with camera render. App has 2 modes of AR and Non-AR(3D-view) mode.
The app starts in AR mode so we can place the content in the world space. All okay until here. But when I switch to Non-AR mode then I stopped the 8th wall camera with XR8.pause() then the camera stop and store the last frame information. I need to clear the camera to render before the camera start renders 3D-view.
I tried to activate the sphere so the user can’t see the last frame info but the transparent object clip the sphere and show the last frame info.

Thank you.

2

IIRC, 8th Wall relies on a transparent canvas to show the camera feed and a clear colour on the camera with an alpha value of 0.

If you change the clear colour to an alpha value of 1, that should stop the canvas from being transparent and therefore not show the feed.

3

Thanks for the response, I tried to change alpha but still the same issues. below code

var color = this.entity.camera.clearColor;
color.a = 1;
this.entity.camera.clearColor = color;

4

Do you have a small demo project that showcases the issue?

5

I have created a demo project but I didn’t add the 8th wall key. project URL: https://playcanvas.com/editor/scene/1033026

6

Cool, I see if I can give it a go when I get the chance.

7

yeah sure, thanks

8

@Akshay_Kumar, I’m running a fork of the app with my app key. Should I be seeing the video feed in the background?

Also, there’s a Slack group for 8th Wall, maybe they can help in the meantime?

https://www.8thwall.com/resources

9

thanks, Video feed should not show because camera stop. only last frame info visible. only transparent object show that info.

Okay, I will check with the slack group. thank you :slight_smile:

10

@Akshay_Kumar Did you manage to get to the bottom of this?

11

Hello,

I asked in 8th wall slack also but still not resolved.

12

@Akshay_Kumar I’ve created a test project (no App code) that pauses and resumes the video feed every time you tap the screen: https://playcanvas.com/editor/scene/1037260

// initialize code called once per entity
Main.prototype.initialize = function() {
    var camera = this.entity.findByName('Camera').camera;
    if (this.app.touch) {
        this.app.touch.on(pc.EVENT_TOUCHSTART, function () {
            if (!XR8.isPaused()) {
                XR8.pause();
                camera.clearColor = pc.Color.BLUE;   
            } else {
                XR8.resume();
                camera.clearColor = new pc.Color(0, 0, 0, 0);
            }
        }, this);
    }
};
13

Thanks for the effort. I used that code but still not working. camera not clear the last frame feed info . Even I hide the camera feed info put a big sphere(skydome) side. but if we have transparent objects then that transparent object over clip the skydome.
To resolve this either clear the camera info or something else so transparent object can’t overclip the skydome. please suggest.

14

It works fine on my phone. When I tap the screen, the background goes solid blue.

If that’s not working for you in your own project, I need a reproducible project that easily shows your issue. The one you shared before unfortunately doesn’t do that.

15

Yes, you are right but If there is transparent object in scene then you see the issue (grab pass issue).

Thanks for your effort.

16

Using premultiplied alpha on the material fixed the issue for me:

image
image956×716 31.9 KB

https://playcanvas.com/editor/scene/1037260

If you do run into anymore issues, it would really help to have a test case project that I can work against rather than guessing what the issue is here.

17

Thank you for your effort. it’s resolved and working fine. you saved me. :slight_smile:

1 Like