closed FrameBuffer browser warnings shown by console

[paleRider]

Dear all:

I'm here again with several FRAMEBUFFER errors I thought has been solved migrating to BJS 3.1. (please take a look to closed topic http://www.html5gamedevs.com/topic/35352-strange-problem-when-using-highlight-layers/)

On dektop (Win10 64bit), FF Developer Edition (59.0b13 - 64-bit) shows these kind of WebGL console warnings (excerpt):

Error: WebGL warning: clear: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height babylon.3.1.custom.min.js:5:4633
Error: WebGL warning: clear: Framebuffer must be complete. babylon.3.1.custom.min.js:5:4633
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete. babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: The dimensions of `level_base` are not all positive.

Also on Win10, my Chrome browser (64.0.3282.186 - 64 bit) shows awful lines like these (excerpt again) :

.Offscreen-For-WebGL-00000233101348E0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glClear: framebuffer incomplete
.Offscreen-For-WebGL-00000233101348E0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawElements: framebuffer incomplete
.Offscreen-For-WebGL-00000233101348E0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering

Running Safari browser on macOSX (High Sierra) works OK. Tomorrow I'll look console outputs for WebGL warnings.

Well I get all these warnings but, at least, the 3D contents are all (Win10 and High Sierra) shown as intended.

The real problem comes when I load the code on Android Chrome (64.0.3282.137), as it renders black all my PBR textures, while showing the following lines through DevTools>Remote devices>Console (that is I'm debugging here mobile Chrome from desktop Chrome):

[.Offscreen-For-WebGL-0xb917a020]RENDER WARNING: texture bound to texture unit 2 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
85[.Offscreen-For-WebGL-0xb917a020]RENDER WARNING: texture bound to texture unit 3 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
43[.Offscreen-For-WebGL-0xb917a020]RENDER WARNING: texture bound to texture unit 1 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
42[.Offscreen-For-WebGL-0xb917a020]RENDER WARNING: texture bound to texture unit 4 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
21[.Offscreen-For-WebGL-0xb917a020]RENDER WARNING: texture bound to texture unit 5 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
main.html#page-mixer:1 WebGL: too many errors, no more errors will be reported to the console for this context.

Under Safari for iOS  I get my models rendered as is expected. Tomorrow I'll be able to inspect console output.

As said in the thread, all my textures are power of 2 (512x512). I can't reproduce this behavior on PG, as this is a really complex development.

I welcome any suggestion about how to have my code clean of warnings and, mainly, about the way to have my PBR materials not being renderered black on Android Chrome.

Best regards.

[Guest]

Hello, this seems a rather complex issue. I can help if you can give me a link to a page which highlights the issue (also please reference babylon.max.js to enable debugging)

Other idea: did you try debugging using spector.js

[paleRider]

Hi Deltakosh:

Thank you very much for your time and help.

I'm going to give a try to spector.js.

I'll come back to you if I find difficulties. I hope you won't mind. 

Best regards.

[paleRider]

Hi again all there:

Well I've easily managed to solve the last error I marked in my question. It was only a syntax error, ... my fault! .

About the main errors (FrameBuffer ones) they seem to be related with the Highlight Layers again (http://www.html5gamedevs.com/topic/35352-strange-problem-when-using-highlight-layers/), as they disappear when I comment the following line(s) in my code:

_layerH1.addMesh(_meshMixerHandle,_GRB_HIGHLIGHT_COLOR);
_layerH1.addMesh(_meshThermoFlowTap,_GRB_HIGHLIGHT_COLOR);
_layerH1.addMesh(_meshThermoTemperatureTap,_GRB_HIGHLIGHT_COLOR);

Of course I'm setting stencil as true in the Engine creation, as advised at docs:

_Engine=new BABYLON.Engine(canvas,true,{stencil: true});
_Scene=new BABYLON.Scene(_Engine);
...
_layerH1=new BABYLON.HighlightLayer("hl",_Scene);

Any help with this?

This is my complete console log Highlight Layer errors for FF Developer Edition (59.0b14 _ 64-bit):

Error: WebGL warning: clear: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:4633
Error: WebGL warning: clear: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:4633
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: clear: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:4633
Error: WebGL warning: clear: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:4633
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: clear: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:4633
Error: WebGL warning: clear: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:4633
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer not complete. (status: 0x8cd6) COLOR_ATTACHMENT0 has no width or height
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Framebuffer must be complete.
babylon.3.1.custom.min.js:5:19516
Error: WebGL warning: drawElements: Active texture 0 for target 0x0de1 is 'incomplete', and will be rendered as RGBA(0,0,0,1), as per the GLES 2.0.24 $3.8.2: The dimensions of `level_base` are not all positive.
babylon.3.1.custom.min.js:5:19516

And this from Chrome ( 64.0.3282.186 _64 bits) :

main-dev.html#page-mixer:1 [.Offscreen-For-WebGL-0000016696721D80]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glClear: framebuffer incomplete
8 [.Offscreen-For-WebGL-0000016696721D80]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawElements: framebuffer incomplete
2 main-dev.html#page-mixer:1 [.Offscreen-For-WebGL-0000016696721D80]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glClear: framebuffer incomplete
2 main-dev.html#page-mixer:1 [.Offscreen-For-WebGL-0000016696721D80]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.

Thanks for your time.

P.S. 1: Despite the console errors, highlight layer is shown right.

P.S. 2: BJS 3.2 dumps the same errors

[Guest]

Unfortunately we cannot help without a repro

[paleRider]

Hi Deltakosh:

Testing the same code with FF and Chrome (both for Windows), but running on a different HW (nVidia Quadro) the errors are gone. This way I suppose they are very related to the used GPU (?).

Thanks for your time.

[Guest]

I'm not a big fan of vanishing errors

Keep us posted if you see it again

[Jim Gale]

Hi @Deltakosh, I have this issue too, with babylon v4 as well. The error happens 50% of the time, likely some kind of race condition.

Specifically, this code in my whole set causes it:

var hl = new BABYLON.HighlightLayer("hl1", scene);

hl.addMesh(itwData.spheres.earth["sphere"], new BABYLON.Color3(0, 0, 0.5));

hl.addMesh(itwData.spheres.earth["sphere"], new BABYLON.Color3(0.5, 0.5, 1), true);

This is adding a color as/to a mesh, not based on a size anywhere.

Let me know if you need to see this.

Thanks,

Jim

[Guest]

Please post your question on the new forum:
https://forum.babylonjs.com/