emscripten-glut-resizable

Emscripten GLUT/OpenGLES test with fix for browser resizing

This is a modified version of Emscripten’s test, hello_world_gles.c, fixed to handle browser window resizing.

Emscripten issues logged here and here.

Steps to reproduce

Issue:

  1. Run the original version.
  2. Resize the browser window. Note the resolution (300x300) doesn’t change regardless of browser window resizing.

Fix #1:

  1. Run the client-side fixed version.
  2. Resize the browser window. Note the full window resolution is now used, and the window aspect ratio is properly handled.

Fix #2:

  1. Run the GLUT fixed version.
  2. Resize the browser window. Note the full window resolution is now used, and the window aspect ratio is properly handled.

To build:

emcc hello_world_gles.c -s WASM=0 -o hello_world_gles.js
emcc hello_world_gles_resizable_CLIENT_fix.c -s WASM=0 -o hello_world_gles_resizable_CLIENT_fix.js

Fix

The issue is that the glutReshapeFunc() callback is not being called when the browser window is resized.

The client-side fix is to detect when the HTML canvas has changed size in the glutDisplayFunc() callback, and explicitly call glutReshapeWindow() with the updated canvas size. This then invokes glutReshapeFunc() callback with the updated canvas size. Note this solution doesn’t handle fullscreen correctly.

The GLUT 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. This solution does handle fullscreen correctly, so long as the ‘Resize canvas’ box is checked (the original and client-side fix do not work even if Resize canvas is checked).

Also note the default html generated by Emscripten (-o hello_world_gles.html) does not show this issue because the canvas is not resizable. To demonstrate the issue, HTML which stretches the canvas to fill the entire browser window is provided.