Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Simplify EGL/GLFW/SDL/GLUT/Browser canvas access. NFC #23614

Merged
merged 1 commit into from
Feb 6, 2025
Merged

Simplify EGL/GLFW/SDL/GLUT/Browser canvas access. NFC #23614

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
40 changes: 21 additions & 19 deletions src/lib/libbrowser.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,6 +37,8 @@ var LibraryBrowser = {
preloadedImages: {},
preloadedAudios: {},

getCanvas: () => Module['canvas'],

init() {
if (Browser.initted) return;
Browser.initted = true;
Expand Down Expand Up @@ -153,12 +155,13 @@ var LibraryBrowser = {
// Canvas event setup

function pointerLockChange() {
Browser.pointerLock = document['pointerLockElement'] === Module['canvas'] ||
document['mozPointerLockElement'] === Module['canvas'] ||
document['webkitPointerLockElement'] === Module['canvas'] ||
document['msPointerLockElement'] === Module['canvas'];
var canvas = Browser.getCanvas();
Browser.pointerLock = document['pointerLockElement'] === canvas ||
document['mozPointerLockElement'] === canvas ||
document['webkitPointerLockElement'] === canvas ||
document['msPointerLockElement'] === canvas;
}
var canvas = Module['canvas'];
var canvas = Browser.getCanvas();
if (canvas) {
// forced aspect ratio can be enabled by defining 'forcedAspectRatio' on Module
// Module['forcedAspectRatio'] = 4 / 3;
Expand All @@ -182,8 +185,8 @@ var LibraryBrowser = {

if (Module['elementPointerLock']) {
canvas.addEventListener("click", (ev) => {
if (!Browser.pointerLock && Module['canvas'].requestPointerLock) {
Module['canvas'].requestPointerLock();
if (!Browser.pointerLock && Browser.getCanvas().requestPointerLock) {
Browser.getCanvas().requestPointerLock();
ev.preventDefault();
}
}, false);
Expand All @@ -192,7 +195,7 @@ var LibraryBrowser = {
},

createContext(/** @type {HTMLCanvasElement} */ canvas, useWebGL, setInModule, webGLContextAttributes) {
if (useWebGL && Module['ctx'] && canvas == Module['canvas']) return Module['ctx']; // no need to recreate GL context if it's already been created for this canvas.
if (useWebGL && Module['ctx'] && canvas == Browser.getCanvas()) return Module['ctx']; // no need to recreate GL context if it's already been created for this canvas.

var ctx;
var contextHandle;
Expand Down Expand Up @@ -253,7 +256,7 @@ var LibraryBrowser = {
if (typeof Browser.lockPointer == 'undefined') Browser.lockPointer = true;
if (typeof Browser.resizeCanvas == 'undefined') Browser.resizeCanvas = false;

var canvas = Module['canvas'];
var canvas = Browser.getCanvas();
function fullscreenChange() {
Browser.isFullscreen = false;
var canvasContainer = canvas.parentNode;
Expand Down Expand Up @@ -428,9 +431,8 @@ var LibraryBrowser = {
calculateMouseCoords(pageX, pageY) {
// Calculate the movement based on the changes
// in the coordinates.
var rect = Module['canvas'].getBoundingClientRect();
var cw = Module['canvas'].width;
var ch = Module['canvas'].height;
var canvas = Browser.getCanvas();
var rect = canvas.getBoundingClientRect();

// Neither .scrollX or .pageXOffset are defined in a spec, but
// we prefer .scrollX because it is currently in a spec draft.
Expand All @@ -448,8 +450,8 @@ var LibraryBrowser = {
// the canvas might be CSS-scaled compared to its backbuffer;
// SDL-using content will want mouse coordinates in terms
// of backbuffer units.
adjustedX = adjustedX * (cw / rect.width);
adjustedY = adjustedY * (ch / rect.height);
adjustedX = adjustedX * (canvas.width / rect.width);
adjustedY = adjustedY * (canvas.height / rect.height);

return { x: adjustedX, y: adjustedY };
},
Expand Down Expand Up @@ -508,12 +510,12 @@ var LibraryBrowser = {
resizeListeners: [],

updateResizeListeners() {
var canvas = Module['canvas'];
var canvas = Browser.getCanvas();
Browser.resizeListeners.forEach((listener) => listener(canvas.width, canvas.height));
},

setCanvasSize(width, height, noUpdates) {
var canvas = Module['canvas'];
var canvas = Browser.getCanvas();
Browser.updateCanvasDimensions(canvas, width, height);
if (!noUpdates) Browser.updateResizeListeners();
},
Expand All @@ -527,7 +529,7 @@ var LibraryBrowser = {
flags = flags | 0x00800000; // set SDL_FULLSCREEN flag
{{{ makeSetValue('SDL.screen', '0', 'flags', 'i32') }}};
}
Browser.updateCanvasDimensions(Module['canvas']);
Browser.updateCanvasDimensions(Browser.getCanvas());
Browser.updateResizeListeners();
},

Expand All @@ -538,7 +540,7 @@ var LibraryBrowser = {
flags = flags & ~0x00800000; // clear SDL_FULLSCREEN flag
{{{ makeSetValue('SDL.screen', '0', 'flags', 'i32') }}};
}
Browser.updateCanvasDimensions(Module['canvas']);
Browser.updateCanvasDimensions(Browser.getCanvas());
Browser.updateResizeListeners();
},

Expand Down Expand Up @@ -745,7 +747,7 @@ var LibraryBrowser = {

emscripten_get_canvas_size__proxy: 'sync',
emscripten_get_canvas_size: (width, height, isFullscreen) => {
var canvas = Module['canvas'];
var canvas = Browser.getCanvas();
{{{ makeSetValue('width', '0', 'canvas.width', 'i32') }}};
{{{ makeSetValue('height', '0', 'canvas.height', 'i32') }}};
{{{ makeSetValue('isFullscreen', '0', 'Browser.isFullscreen ? 1 : 0', 'i32') }}};
Expand Down
6 changes: 3 additions & 3 deletions src/lib/libegl.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -356,7 +356,7 @@ var LibraryEGL = {
EGL.contextAttributes.majorVersion = glesContextVersion - 1; // WebGL 1 is GLES 2, WebGL2 is GLES3
EGL.contextAttributes.minorVersion = 0;

EGL.context = GL.createContext(Module['canvas'], EGL.contextAttributes);
EGL.context = GL.createContext(Browser.getCanvas(), EGL.contextAttributes);

if (EGL.context != 0) {
EGL.setErrorCode(0x3000 /* EGL_SUCCESS */);
Expand Down Expand Up @@ -422,10 +422,10 @@ var LibraryEGL = {
// Existing Android implementation seems to do so at least.
return 1;
case 0x3057: // EGL_WIDTH
{{{ makeSetValue('value', '0', "Module['canvas'].width", 'i32') }}};
{{{ makeSetValue('value', '0', "Browser.getCanvas().width", 'i32') }}};
return 1;
case 0x3056: // EGL_HEIGHT
{{{ makeSetValue('value', '0', "Module['canvas'].height", 'i32') }}};
{{{ makeSetValue('value', '0', "Browser.getCanvas().height", 'i32') }}};
return 1;
case 0x3090: // EGL_HORIZONTAL_RESOLUTION
{{{ makeSetValue('value', '0', '-1' /* EGL_UNKNOWN */, 'i32') }}};
Expand Down
94 changes: 50 additions & 44 deletions src/lib/libglfw.js
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -467,7 +467,7 @@ var LibraryGLFW = {
Browser.calculateMouseEvent(event);
}

if (event.target != Module['canvas'] || !GLFW.active.cursorPosFunc) return;
if (event.target != Browser.getCanvas() || !GLFW.active.cursorPosFunc) return;

if (GLFW.active.cursorPosFunc) {
#if USE_GLFW == 2
Expand Down Expand Up @@ -496,7 +496,7 @@ var LibraryGLFW = {
onMouseenter: (event) => {
if (!GLFW.active) return;

if (event.target != Module['canvas']) return;
if (event.target != Browser.getCanvas()) return;

#if USE_GLFW == 3
if (GLFW.active.cursorEnterFunc) {
Expand All @@ -508,7 +508,7 @@ var LibraryGLFW = {
onMouseleave: (event) => {
if (!GLFW.active) return;

if (event.target != Module['canvas']) return;
if (event.target != Browser.getCanvas()) return;

#if USE_GLFW == 3
if (GLFW.active.cursorEnterFunc) {
Expand All @@ -520,7 +520,7 @@ var LibraryGLFW = {
onMouseButtonChanged: (event, status) => {
if (!GLFW.active) return;

if (event.target != Module['canvas']) return;
if (event.target != Browser.getCanvas()) return;

// Is this from a touch event?
const isTouchType = event.type === 'touchstart' || event.type === 'touchend' || event.type === 'touchcancel';
Expand Down Expand Up @@ -602,7 +602,7 @@ var LibraryGLFW = {
delta = (delta == 0) ? 0 : (delta > 0 ? Math.max(delta, 1) : Math.min(delta, -1)); // Quantize to integer so that minimum scroll is at least +/- 1.
GLFW.wheelPos += delta;

if (!GLFW.active || !GLFW.active.scrollFunc || event.target != Module['canvas']) return;
if (!GLFW.active || !GLFW.active.scrollFunc || event.target != Browser.getCanvas()) return;
#if USE_GLFW == 2
{{{ makeDynCall('vi', 'GLFW.active.scrollFunc') }}}(GLFW.wheelPos);
#endif
Expand Down Expand Up @@ -923,8 +923,9 @@ var LibraryGLFW = {
},

onClickRequestPointerLock: (e) => {
if (!Browser.pointerLock && Module['canvas'].requestPointerLock) {
Module['canvas'].requestPointerLock();
var canvas = Browser.getCanvas();
if (!Browser.pointerLock && canvas.requestPointerLock) {
canvas.requestPointerLock();
e.preventDefault();
}
},
Expand All @@ -935,11 +936,12 @@ var LibraryGLFW = {

switch (mode) {
case 0x00033001: { // GLFW_CURSOR
var canvas = Browser.getCanvas();
switch (value) {
case 0x00034001: { // GLFW_CURSOR_NORMAL
win.inputModes[mode] = value;
Module['canvas'].removeEventListener('click', GLFW.onClickRequestPointerLock, true);
Module['canvas'].exitPointerLock();
canvas.removeEventListener('click', GLFW.onClickRequestPointerLock, true);
canvas.exitPointerLock();
break;
}
case 0x00034002: { // GLFW_CURSOR_HIDDEN
Expand All @@ -948,8 +950,8 @@ var LibraryGLFW = {
}
case 0x00034003: { // GLFW_CURSOR_DISABLED
win.inputModes[mode] = value;
Module['canvas'].addEventListener('click', GLFW.onClickRequestPointerLock, true);
Module['canvas'].requestPointerLock();
canvas.addEventListener('click', GLFW.onClickRequestPointerLock, true);
canvas.requestPointerLock();
break;
}
default: {
Expand Down Expand Up @@ -1088,6 +1090,9 @@ var LibraryGLFW = {
for (i = 0; i < GLFW.windows.length && GLFW.windows[i] == null; i++) {
// no-op
}

const canvas = Browser.getCanvas();

var useWebGL = GLFW.hints[0x00022001] > 0; // Use WebGL when we are told to based on GLFW_CLIENT_API
if (i == GLFW.windows.length) {
if (useWebGL) {
Expand All @@ -1101,7 +1106,7 @@ var LibraryGLFW = {
// TODO: Make GLFW explicitly aware of whether it is being proxied or not, and set these to true only when proxying is being performed.
GL.enableOffscreenFramebufferAttributes(contextAttributes);
#endif
Browser.createContext(Module['canvas'], /*useWebGL=*/true, /*setInModule=*/true, contextAttributes);
Browser.createContext(canvas, /*useWebGL=*/true, /*setInModule=*/true, contextAttributes);
} else {
Browser.init();
}
Expand All @@ -1111,7 +1116,6 @@ var LibraryGLFW = {
if (!Module['ctx'] && useWebGL) return 0;

// Initializes the framebuffer size from the canvas
const canvas = Module['canvas'];
var win = new GLFW_Window(id, width, height, canvas.width, canvas.height, title, monitor, share);

// Set window to array
Expand Down Expand Up @@ -1157,7 +1161,7 @@ var LibraryGLFW = {
if (typeof Browser.lockPointer == 'undefined') Browser.lockPointer = true;
if (typeof Browser.resizeCanvas == 'undefined') Browser.resizeCanvas = false;

var canvas = Module['canvas'];
var canvas = Browser.getCanvas();
function fullscreenChange() {
Browser.isFullscreen = false;
var canvasContainer = canvas.parentNode;
Expand Down Expand Up @@ -1262,7 +1266,7 @@ var LibraryGLFW = {
calculateMouseCoords(pageX, pageY) {
// Calculate the movement based on the changes
// in the coordinates.
const rect = Module['canvas'].getBoundingClientRect();
const rect = Browser.getCanvas().getBoundingClientRect();

// Neither .scrollX or .pageXOffset are defined in a spec, but
// we prefer .scrollX because it is currently in a spec draft.
Expand Down Expand Up @@ -1319,7 +1323,7 @@ var LibraryGLFW = {

adjustCanvasDimensions() {
if (GLFW.active) {
Browser.updateCanvasDimensions(Module['canvas'], GLFW.active.width, GLFW.active.height);
Browser.updateCanvasDimensions(Browser.getCanvas(), GLFW.active.width, GLFW.active.height);
Browser.updateResizeListeners();
}
},
Expand Down Expand Up @@ -1395,19 +1399,20 @@ var LibraryGLFW = {
GLFW.devicePixelRatioMQL = window.matchMedia('(resolution: ' + GLFW.getDevicePixelRatio() + 'dppx)');
GLFW.devicePixelRatioMQL.addEventListener('change', GLFW.onDevicePixelRatioChange);

Module['canvas'].addEventListener('touchmove', GLFW.onMousemove, true);
Module['canvas'].addEventListener('touchstart', GLFW.onMouseButtonDown, true);
Module['canvas'].addEventListener('touchcancel', GLFW.onMouseButtonUp, true);
Module['canvas'].addEventListener('touchend', GLFW.onMouseButtonUp, true);
Module['canvas'].addEventListener('mousemove', GLFW.onMousemove, true);
Module['canvas'].addEventListener('mousedown', GLFW.onMouseButtonDown, true);
Module['canvas'].addEventListener('mouseup', GLFW.onMouseButtonUp, true);
Module['canvas'].addEventListener('wheel', GLFW.onMouseWheel, true);
Module['canvas'].addEventListener('mousewheel', GLFW.onMouseWheel, true);
Module['canvas'].addEventListener('mouseenter', GLFW.onMouseenter, true);
Module['canvas'].addEventListener('mouseleave', GLFW.onMouseleave, true);
Module['canvas'].addEventListener('drop', GLFW.onDrop, true);
Module['canvas'].addEventListener('dragover', GLFW.onDragover, true);
var canvas = Browser.getCanvas();
canvas.addEventListener('touchmove', GLFW.onMousemove, true);
canvas.addEventListener('touchstart', GLFW.onMouseButtonDown, true);
canvas.addEventListener('touchcancel', GLFW.onMouseButtonUp, true);
canvas.addEventListener('touchend', GLFW.onMouseButtonUp, true);
canvas.addEventListener('mousemove', GLFW.onMousemove, true);
canvas.addEventListener('mousedown', GLFW.onMouseButtonDown, true);
canvas.addEventListener("mouseup", GLFW.onMouseButtonUp, true);
canvas.addEventListener('wheel', GLFW.onMouseWheel, true);
canvas.addEventListener('mousewheel', GLFW.onMouseWheel, true);
canvas.addEventListener('mouseenter', GLFW.onMouseenter, true);
canvas.addEventListener('mouseleave', GLFW.onMouseleave, true);
canvas.addEventListener('drop', GLFW.onDrop, true);
canvas.addEventListener('dragover', GLFW.onDragover, true);

// Overriding implementation to account for HiDPI
Browser.requestFullscreen = GLFW.requestFullscreen;
Expand All @@ -1416,7 +1421,7 @@ var LibraryGLFW = {

Browser.resizeListeners.push((width, height) => {
if (GLFW.isHiDPIAware()) {
var canvas = Module['canvas'];
var canvas = Browser.getCanvas();
GLFW.onCanvasResize(canvas.clientWidth, canvas.clientHeight, width, height);
} else {
GLFW.onCanvasResize(width, height, width, height);
Expand All @@ -1433,24 +1438,25 @@ var LibraryGLFW = {
window.removeEventListener('keypress', GLFW.onKeyPress, true);
window.removeEventListener('keyup', GLFW.onKeyup, true);
window.removeEventListener('blur', GLFW.onBlur, true);
Module['canvas'].removeEventListener('touchmove', GLFW.onMousemove, true);
Module['canvas'].removeEventListener('touchstart', GLFW.onMouseButtonDown, true);
Module['canvas'].removeEventListener('touchcancel', GLFW.onMouseButtonUp, true);
Module['canvas'].removeEventListener('touchend', GLFW.onMouseButtonUp, true);
Module['canvas'].removeEventListener('mousemove', GLFW.onMousemove, true);
Module['canvas'].removeEventListener('mousedown', GLFW.onMouseButtonDown, true);
Module['canvas'].removeEventListener('mouseup', GLFW.onMouseButtonUp, true);
Module['canvas'].removeEventListener('wheel', GLFW.onMouseWheel, true);
Module['canvas'].removeEventListener('mousewheel', GLFW.onMouseWheel, true);
Module['canvas'].removeEventListener('mouseenter', GLFW.onMouseenter, true);
Module['canvas'].removeEventListener('mouseleave', GLFW.onMouseleave, true);
Module['canvas'].removeEventListener('drop', GLFW.onDrop, true);
Module['canvas'].removeEventListener('dragover', GLFW.onDragover, true);
var canvas = Browser.getCanvas();
canvas.removeEventListener('touchmove', GLFW.onMousemove, true);
canvas.removeEventListener('touchstart', GLFW.onMouseButtonDown, true);
canvas.removeEventListener('touchcancel', GLFW.onMouseButtonUp, true);
canvas.removeEventListener('touchend', GLFW.onMouseButtonUp, true);
canvas.removeEventListener('mousemove', GLFW.onMousemove, true);
canvas.removeEventListener('mousedown', GLFW.onMouseButtonDown, true);
canvas.removeEventListener('mouseup', GLFW.onMouseButtonUp, true);
canvas.removeEventListener('wheel', GLFW.onMouseWheel, true);
canvas.removeEventListener('mousewheel', GLFW.onMouseWheel, true);
canvas.removeEventListener('mouseenter', GLFW.onMouseenter, true);
canvas.removeEventListener('mouseleave', GLFW.onMouseleave, true);
canvas.removeEventListener('drop', GLFW.onDrop, true);
canvas.removeEventListener('dragover', GLFW.onDragover, true);

if (GLFW.devicePixelRatioMQL)
GLFW.devicePixelRatioMQL.removeEventListener('change', GLFW.onDevicePixelRatioChange);

Module['canvas'].width = Module['canvas'].height = 1;
canvas.width = canvas.height = 1;
GLFW.windows = null;
GLFW.active = null;
},
Expand Down
Loading