WebGL and Resolution Errors in HTML5

When launching our HTML5 build we get the following errors streamed in the output log:

LogPlayLevel: HTML5LaunchHelper: [1128/153301:ERROR:gles2_cmd_decoder.cc(4161)] [.Offscreen-For-WebGL-000000000413B8B0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawElements: framebuffer incomplete
LogPlayLevel: HTML5LaunchHelper: [1128/153302:ERROR:gles2_cmd_decoder.cc(7306)] [.Offscreen-For-WebGL-000000000413B8B0]GL ERROR :GL_INVALID_VALUE : glFramebufferTexture2D: level out of range
LogPlayLevel: HTML5LaunchHelper: [1128/153302:ERROR:gles2_cmd_decoder.cc(4161)] [.Offscreen-For-WebGL-000000000413B8B0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawElements: framebuffer incomplete

After a short time, these errors hit the display limit and stop being shown.

Additionally, the display resolution acts really weird. Our goal is to set the canvas to 67% of the screen width when not full screen (so it’ll be 1280x720 on a 1920x1080 screen) and set the game resolution to 1280x720 stretched fullscreen when the fullscreen button is pressed.

Using Firefox, pressing fullscreen with the startup resolution at 1280x720 and a desktop resolution of 1920x1080 causes a 1280x720 rendering area in the bottom left corner of the screen, and the interaction area is oriented from the top left corner of the screen, unless we concurrently change the resolution to the desktop resolution. When we do that however, the startup resolution is somehow affected? If we have it set to 1280x720 using r.SetRes when it’s not fullscreen, it looks like the Windowed Incorrect image below. If I call r.SetRes 1920x1080 (the desktop resolution) from that view, it becomes correct, but the fullscreen view isn’t interactable??

[Which is this bug, reported by our producer.][1]

For reference, here’s what it’s supposed to look like (blurred images due to confidentiality reasons):

In windowed mode:

Here’s what happens if I rescale the window while not fullscreen:

and here’s what happens if I don’t set the resolution to the desktop resolution when fullscreen:

And in Chrome it just doesn’t work correctly either way in fullscreen:

at 1280x720:

and at 1920x1080:

Ok, seems I’ve got the display resolution working correctly, but I’m still stuck on the fact the the game is not interactable once I go fullscreen.

To solve the resolution issue, I had to remove the css styling which was overriding my calls to resize the canvas.

Posted a follow up on the interaction here. It’s not “completely” non-interactive.

And also of course the webGL errors that spam the output log/console.

how do you got display resolution working correctly?

See attached.

Fixes inside!

See HTML5 Widget Interaction Area Offset - Platform & Builds - Epic Developer Community Forums

The framebuffer incomplete and level issues have been identified, and these will work if you run on a WebGL 2 capable browser. That being said, it was also identified that these warnings should be benign and not cause visual artifacts in projects. Also fixes to the canvas black borders issues have been identified and pulled upstream. WebAssembly was released just now in Firefox 52, check out a demo of that in action at

That demo showcases a number of the upcoming fixes (needs Firefox 52, preferably 64-bit) and it renders pixel perfectly on the canvas.