Resize issues in iframes (Black screen error)

Help & Support
1

Hello PlayCanvas Community.

First, this problem is derived from the question I posted earlier.

Black screen error in iframes when running on low-end PCs and laptops

To summarize.

I have downloaded the playcanvas build and configured a website that communicates through an iframe.

The problem is that on windows laptop and low end pc, playcanvas doesn’t load, just a black screen. If I resize the window, I can see the playcanvas scene looks fine.

I fixed the iframe loading speed and PlayCanvas loading timing issues, and also fixed the CSS aspect-ratio issue in the iframe area, but the black screen error is still there.

After the first loading, the screen appears black, but if you change the style.width value of the canvas element of the PlayCanvas by even 1px, the screen is displayed normally. Also, if I change the iframe’s area by even 1px, the screen looks fine.

I thought that simply calling resizeCanvas(width, height) or resizeCanvas(clientWidth, clientHeight) again would fix this, but it didn’t work.

On the mobile responsive screen, it resizes fine and when I return to the PC screen and change the canvas.style.width value of PlayCanvas to the original px, it goes back to black.

And you will see the following error in the console window.

[.WebGL-0000714011FACE00] GL_INVALID_FRAMEBUFFER_OPERATION: Framebuffer is incomplete: Attachment has zero size.

Can anyone tell me how I can fix this problem?
I would really appreciate it if you could help me.

[1. Desktop Version]

forum0
forum01424×712 80.5 KB

[2. Mobile Version]

forum1
forum11868×880 100 KB

2

I found the reason.
It was because of the script that draws the outline on the Camera entity. Thanks for thinking with me.

3

outline-example

I configured the project using the ApplyOutline script in the following example, and published it elsewhere on the web using an iframe. I then noticed that the initial render was not catching on the embedded graphics PC environment.

The screen would go completely black, and if I resized and went back to the initial px, the screen would go black again.

For example, if the initial iframe width and height were (400,300), the screen went black after resizing to (500,300) → (400,300).

This is the code for ApplyOutline. It becomes initialise() and the code is executed via the prepare() function.

    // create texture and render target for rendering into, including depth buffer
    this.texture = new pc.Texture(this.app.graphicsDevice, {
        width: this.app.graphicsDevice.width,
        height: this.app.graphicsDevice.height,
        format: pc.PIXELFORMAT_R8_G8_B8_A8,
        autoMipmap: true,
        minFilter: pc.FILTER_LINEAR,
        magFilter: pc.FILTER_LINEAR
    });
    //this.renderTarget = new pc.RenderTarget(this.app.graphicsDevice, this.texture, { depth: true });
    this.renderTarget = new pc.RenderTarget({ 
        colorBuffer: this.texture,
        depth: true,
        samples: 8
    });

What I tried here is to use the code the commented out

this.renderTarget = new pc.RenderTarget(this.app.graphicsDevice, this.texture, { depth: true });

And commented out the following code

 this.renderTarget = new pc.RenderTarget({ 
        colorBuffer: this.texture,
        depth: true,
        samples: 8
    });

I’m very grateful to the people who worked with me on this and I’m glad I was able to resolve it. If anyone else encounters the same error in the future, I’d love to hear about it. Also, if anyone knows of a better way to resolve it, please let me know.

4

The commented out render target that takes a graphics device is an old API, which is deprecated and should not be used. The one you commented out is the correct way.

I am not sure why, but when the render target is created the width and height of the graphics device is zero. That is why you get a WebGL crash. If I would guess, it is because when the page loads, the application canvas has zero size due to its parent or something. I would start debugging from iframe size, setting it to some fixed size, instead of percentages.

1 Like
5

Oh, I see! Thanks for letting me know, your help has enriched my knowledge and I look forward to continuing my enjoyable development with PlayCanvas in the future! Thank you!

6

The graphics device will also report zero width and height, if the application is hidden, e.g. CSS style “display:none”.

1 Like
7

Wow, I see that, thank you. One more question I have is that this only happened on laptops and PCs without an additional graphics card. Why did it render fine in environments with an external graphics card?