No glutReshapeFunc() callback on browser window resizing

[erik-larsen]

In the test hello_world_gles.c,
the callback registered to glutReshapeFunc() is not being called when the browser window is resized, even when using html which stretches the canvas to cover the browser window ('soft fullscreen').

Here's a live example of the problem (try resizing the browser window):
https://erik-larsen.github.io/emscripten-glut-resizable/hello_world_gles.html

And here's a fix:
https://erik-larsen.github.io/emscripten-glut-resizable/hello_world_gles_resizable.html

The fix detects canvas size changes on redraws and explicitly calls glutReshapeWindow(). This doesn't seem ideal though, as the canvas size check has to be done on every frame, plus this seems like something the GLUT implementation should handle under the hood. As well, the SDL2 implementation does send resize window callbacks under similar circumstances.

I put together a repository for this issue and the workaround fix here:
https://github.com/erik-larsen/emscripten-glut-resizable

-Erik

[erik-larsen]

The problem appears to be updateResizeListeners is never called on browser window resize. For comparison, when resizing the window with an SDL sample, updateResizeListeners is called via this stack:

updateResizeListeners (hello_triangle.js:5795)
setCanvasSize (hello_triangle.js:5802)
_emscripten_set_canvas_size (hello_triangle.js:9718)
_Emscripten_HandleResize (hello_triangle.js:134253)
dynCall_iiii (hello_triangle.js:168663)
handlerFunc (hello_triangle.js:7171)
jsEventHandler (hello_triangle.js:6973)

There's no _Emscripten_HandleResize nor _emscripten_set_canvas_size in the GLUT sample, so browser resize events never make it to updateResizeListeners.

[erik-larsen]

Would a reasonable fix here involve adding

document.addEventListener('resize', GLUT.onResize, true);
to _glutInit()?

And then do the appropriate stuff in GLUT.onResize (which does not exist yet).

[erik-larsen]

Here is a proposed fix which adds an onResize handler to GLUT.

It fixes the issue in my initial tests, but I'll do some more testing around it.

Wondering if anyone sees an issue with this general approach?

The core of the fix:

onResize:function (event) {
        var rect = Module['canvas'].getBoundingClientRect();
         _glutReshapeWindow(rect.width,rect.height);
      }

[erik-larsen]

Needs to handle fullscreen properly, working on that.

[erik-larsen]

After a couple of testing iterations, I think I have a GLUT-side fix for this.

The fix is to add a resize event listener and call _glutReshapeWindow on resize. Resize events due to entering/exiting fullscreen have to be excluded, and this is done two ways. On entering fullscreen, fullscreen document state is checked and the resize event listener is removed. On exiting fullscreen, the resize event listener is restored.

If this seems like a reasonable solution I can put together a pull request.

[kripken]

@erik-larsen Sounds good to open a pull request, we can discuss details there. Can see if the tests pass there, too.

[stale]

This issue has been automatically marked as stale because there has been no activity in the past year. It will be closed automatically if no further activity occurs in the next 7 days. Feel free to re-open at any time if this issue is still relevant.