Emscripten full screen and antialiasing of 2d-shapes do not work anymore

[Jonathhhan]

I get this message when i press full screen:

Uncaught TypeError: Module.requestFullScreen is not a function
    at HTMLInputElement.onclick ((index):1)

And the circle isnt antialiased, while it is when I compile for desktop. And both were working with Emscripten before (I guess until OF 0.11.0). Here for example works both: https://arturocastro.net/files/of-emscripten/polygonExample/
And here not (my example - but it seems the same for the other examples): http://puredatagui.handmadeproductions.de/
Antialiasing fonts does work now, after I made this change: #6745
Tested with OF 0.11.2 / Emscripten 1.40.1 / Ubuntu 20.04

[Jonathhhan]

Maybe the full screen issue is related to that:
emscripten-ports/SDL2#8
OGRECave/ogre#1698
OGRECave/ogre#1289

[Jonathhhan]

Regarding the fullscreen issue (not sure if it is helpful): If I use Module.requestFullscreen with a lower case "s" like in my example above, I can enter a black fullscreen without an error message, but if I switch back the webassembly canvas is gone (or minimized to the size 0x0).
emscripten-core/emscripten#4318

[ofTheo]

Thank you for digging into this.

I added this to our 0.12.0 tracking issue.
If you find solutions to either feel free to submit a PR. :)

[ofTheo]

From the forum this works for me for the fullscreen issue:
<input type="button" value="Fullscreen" onclick="Module['canvas'].requestFullscreen()">

I can toggle back and forth and things work as expected.

[Jonathhhan]

You can also use pointerlock with "Module['canvas'].requestPointerLock()". What does not work with this method is recalculating the mouse position and resizing the canvas. For that I had to change set_canvas_element_size to set_canvas_size in ofxAppEmscriptenWindow.cpp (and use Module.requestFullscreen()). set_canvas_size is deprecated, but it is still used for fullscreen in https://github.com/emscripten-core/emscripten/blob/main/src/library_browser.js:

void ofxAppEmscriptenWindow::setWindowShape(int w, int h){
    emscripten_set_canvas_size(w,h);
}

glm::vec2 ofxAppEmscriptenWindow::getWindowPosition(){
	return glm::vec2(0,0);
}

glm::vec2 ofxAppEmscriptenWindow::getWindowSize(){
	int width;
	int height;
	int isFullscreen;
    emscripten_get_canvas_size(&width, &height, &isFullscreen);
	return glm::vec3(width,height,isFullscreen);
}

And in the Emscripten library library_html5.js I changed this, so the mouse is also recalculated if the canvas is not resized:

#if !DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR
    if (Module['canvas']) {
      var rect = __getBoundingClientRect(Module['canvas']);
      HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.canvasX / 4 }}}] = (e.clientX - rect.left) * (Module['canvas'].width / rect.width);
      HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.canvasY / 4 }}}] = (e.clientY - rect.top) * (Module['canvas'].height / rect.height);
    } else { // Canvas is not initialized, return 0.
      HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.canvasX / 4 }}}] = 0;
      HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.canvasY / 4 }}}] = 0;
    }
#endif
    var rect = __getBoundingClientRect(target);
    HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.targetX / 4 }}}] = (e.clientX - rect.left) * (target.width / rect.width);
    HEAP32[idx + {{{ C_STRUCTS.EmscriptenMouseEvent.targetY / 4 }}}] = (e.clientY - rect.top) * (target.height / rect.height);

[ofTheo]

wow thanks @Jonathhhan !
will put this all together in a PR.

[Jonathhhan]

@ofTheo thanks. Here you can test how fullscreen works with the changes from above: https://simplesequencer.handmadeproductions.de/

Not really related, but I also found a way to use DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=1.
For that I had to replace target with "#canvas" in this line var domElement = specialHTMLTargets[target] || (typeof document !== 'undefined' ? document.querySelector(target) : undefined); in https://github.com/emscripten-core/emscripten/blob/main/src/library_html5.js and replace canvasX / canvasY with targetX / targetY in https://github.com/openframeworks/openFrameworks/blob/master/addons/ofxEmscripten/src/ofxAppEmscriptenWindow.cpp But since it is easier to use the flag DISABLE_DEPRECATED_FIND_EVENT_TARGET_BEHAVIOR=0 than to edit an external file, I am not sure if it makes sense.

[Jonathhhan]

And antialiasing works again if I add antialias = true to webGLContextAttributes in https://github.com/emscripten-core/emscripten/blob/main/src/library_webgl.js (I also needed to change webgl to webgl2, because I use webgl2):

    // Returns the context handle to the new context.
    createContext: function(canvas, webGLContextAttributes) {
    webGLContextAttributes.antialias = true;

Only maybe not very practical to change a lot of Emscripten files...

[Jonathhhan]

Maybe it would make sense to change a few additional webGLContextAttributes parameters (not sure, but I have the feeling it improves the performance slightly)?
I tried:

        webGLContextAttributes.alpha = true;
        webGLContextAttributes.antialias = true;
        webGLContextAttributes.powerPreference = "high-performance";
        webGLContextAttributes.majorVersion = 2;

console.log(webGLContextAttributes):

{alpha: true, depth: true, stencil: false, antialias: true, majorVersion: 2, …}
alpha: true
antialias: true
depth: true
majorVersion: 2
minorVersion: 0
powerPreference: "high-performance"
stencil: false

About alpha I found:
"Avoid alpha:false, which can be expensive
Specifying alpha:false during context creation causes the browser to composite the WebGL-rendered canvas as though it were opaque, ignoring any alpha values the application writes in its fragment shader. On some platforms, this capability unfortunately comes at a significant performance cost. The RGB back buffer may have to be emulated on top of an RGBA surface, and there are relatively few techniques available in the OpenGL API for making it appear to the application that an RGBA surface has no alpha channel. It has been found that all of these techniques have approximately equal performance impact on affected platforms.

Most applications, even those requiring alpha blending, can be structured to produce 1.0 for the alpha channel. The primary exception is any application requiring destination alpha in the blending function. If feasible, it is recommended to do this rather than using alpha:false."
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/WebGL_best_practices

And about powerPreference:
emscripten-core/emscripten#10000