Screenshot ignores Element masking

Help & Support
1

Hi guys,

I was checking out the screenshot tutorial example and I found out that the screenshot ignores element masking. I forked the project and made some adjustments (https://playcanvas.com/project/805712), where I masked a text element. In the game the text is invisible, but when I take a screenshot the text becomes visible (see first screenshot). The expected behaviour is that the text stays invisible in the screenshot.

image
image1679×580 104 KB

I also found a second issue. If I make a second screenshot the masking seems to work (see second screenshot), but the darkened model disappears. In this example I created a new layer and I put it on a new, darkened model and on the screenshot camera, so the model should only be visible in the screenshot.

I could fix this problem if I create a new framebuffer for each new screenshot. I’m not sure if it’s good to create a new frame buffer, but it does fix the second issue.

Screenshot.prototype.postRender = function () {
    if (this.triggerScreenshot) {
        this.takeScreenshot('screenshot');
        this.triggerScreenshot = false;
        this.cameraEntity.enabled = false;
        this.framebuffer = this.app.graphicsDevice.gl.createFramebuffer(); // Added to fix the second issue
    }
};

It would be much appreciated if anyone knows how to fix the masking issue.

2

I can’t reproduce the second screenshot issue but do wonder if it’s related to when in the render/update queue that the screenshot is taken and maybe due to the fact that the camera is only active for a single frame. :thinking:

3

Good shout by @mvaligursky that the render target wasn’t setup for stencil use.

Fixed example here: https://playcanvas.com/editor/scene/1179660

2 Likes
4

Hi @mvaligursky and @yaustar , thanks a lot! Both issues are fixed.

5

Awesome, updated tutorial