diff options
Diffstat (limited to 'src/library_browser.js')
| -rw-r--r-- | src/library_browser.js | 237 |
1 files changed, 202 insertions, 35 deletions
diff --git a/src/library_browser.js b/src/library_browser.js index d5e35339..0808b9f0 100644 --- a/src/library_browser.js +++ b/src/library_browser.js @@ -1,7 +1,6 @@ //"use strict"; // Utilities for browser environments - mergeInto(LibraryManager.library, { $Browser__deps: ['$PATH'], $Browser__postset: 'Module["requestFullScreen"] = function Module_requestFullScreen(lockPointer, resizeCanvas) { Browser.requestFullScreen(lockPointer, resizeCanvas) };\n' + // exports @@ -13,6 +12,7 @@ mergeInto(LibraryManager.library, { $Browser: { mainLoop: { scheduler: null, + method: '', shouldPause: false, paused: false, queue: [], @@ -196,24 +196,33 @@ mergeInto(LibraryManager.library, { // Canvas event setup var canvas = Module['canvas']; + + // forced aspect ratio can be enabled by defining 'forcedAspectRatio' on Module + // Module['forcedAspectRatio'] = 4 / 3; + canvas.requestPointerLock = canvas['requestPointerLock'] || canvas['mozRequestPointerLock'] || - canvas['webkitRequestPointerLock']; + canvas['webkitRequestPointerLock'] || + canvas['msRequestPointerLock'] || + function(){}; canvas.exitPointerLock = document['exitPointerLock'] || document['mozExitPointerLock'] || document['webkitExitPointerLock'] || + document['msExitPointerLock'] || function(){}; // no-op if function does not exist canvas.exitPointerLock = canvas.exitPointerLock.bind(document); function pointerLockChange() { Browser.pointerLock = document['pointerLockElement'] === canvas || document['mozPointerLockElement'] === canvas || - document['webkitPointerLockElement'] === canvas; + document['webkitPointerLockElement'] === canvas || + document['msPointerLockElement'] === canvas; } document.addEventListener('pointerlockchange', pointerLockChange, false); document.addEventListener('mozpointerlockchange', pointerLockChange, false); document.addEventListener('webkitpointerlockchange', pointerLockChange, false); + document.addEventListener('mspointerlockchange', pointerLockChange, false); if (Module['elementPointerLock']) { canvas.addEventListener("click", function(ev) { @@ -233,6 +242,10 @@ mergeInto(LibraryManager.library, { } #endif var ctx; + var errorInfo = '?'; + function onContextCreationError(event) { + errorInfo = event.statusMessage || errorInfo; + } try { if (useWebGL) { var contextAttributes = { @@ -250,10 +263,6 @@ mergeInto(LibraryManager.library, { contextAttributes.preserveDrawingBuffer = true; #endif - var errorInfo = '?'; - function onContextCreationError(event) { - errorInfo = event.statusMessage || errorInfo; - } canvas.addEventListener('webglcontextcreationerror', onContextCreationError, false); try { ['experimental-webgl', 'webgl'].some(function(webglId) { @@ -341,20 +350,32 @@ mergeInto(LibraryManager.library, { var canvas = Module['canvas']; function fullScreenChange() { Browser.isFullScreen = false; + var canvasContainer = canvas.parentNode; if ((document['webkitFullScreenElement'] || document['webkitFullscreenElement'] || document['mozFullScreenElement'] || document['mozFullscreenElement'] || - document['fullScreenElement'] || document['fullscreenElement']) === canvas) { + document['fullScreenElement'] || document['fullscreenElement'] || + document['msFullScreenElement'] || document['msFullscreenElement'] || + document['webkitCurrentFullScreenElement']) === canvasContainer) { canvas.cancelFullScreen = document['cancelFullScreen'] || document['mozCancelFullScreen'] || - document['webkitCancelFullScreen']; + document['webkitCancelFullScreen'] || + document['msExitFullscreen'] || + document['exitFullscreen'] || + function() {}; canvas.cancelFullScreen = canvas.cancelFullScreen.bind(document); if (Browser.lockPointer) canvas.requestPointerLock(); Browser.isFullScreen = true; if (Browser.resizeCanvas) Browser.setFullScreenCanvasSize(); - } else if (Browser.resizeCanvas){ - Browser.setWindowedCanvasSize(); + } else { + + // remove the full screen specific parent of the canvas again to restore the HTML structure from before going full screen + canvasContainer.parentNode.insertBefore(canvas, canvasContainer); + canvasContainer.parentNode.removeChild(canvasContainer); + + if (Browser.resizeCanvas) Browser.setWindowedCanvasSize(); } if (Module['onFullScreen']) Module['onFullScreen'](Browser.isFullScreen); + Browser.updateCanvasDimensions(canvas); } if (!Browser.fullScreenHandlersInstalled) { @@ -362,12 +383,20 @@ mergeInto(LibraryManager.library, { document.addEventListener('fullscreenchange', fullScreenChange, false); document.addEventListener('mozfullscreenchange', fullScreenChange, false); document.addEventListener('webkitfullscreenchange', fullScreenChange, false); + document.addEventListener('MSFullscreenChange', fullScreenChange, false); } - canvas.requestFullScreen = canvas['requestFullScreen'] || - canvas['mozRequestFullScreen'] || - (canvas['webkitRequestFullScreen'] ? function() { canvas['webkitRequestFullScreen'](Element['ALLOW_KEYBOARD_INPUT']) } : null); - canvas.requestFullScreen(); + // create a new parent to ensure the canvas has no siblings. this allows browsers to optimize full screen performance when its parent is the full screen root + var canvasContainer = document.createElement("div"); + canvas.parentNode.insertBefore(canvasContainer, canvas); + canvasContainer.appendChild(canvas); + + // use parent of canvas as full screen root to allow aspect ratio correction (Firefox stretches the root to screen size) + canvasContainer.requestFullScreen = canvasContainer['requestFullScreen'] || + canvasContainer['mozRequestFullScreen'] || + canvasContainer['msRequestFullscreen'] || + (canvasContainer['webkitRequestFullScreen'] ? function() { canvasContainer['webkitRequestFullScreen'](Element['ALLOW_KEYBOARD_INPUT']) } : null); + canvasContainer.requestFullScreen(); }, requestAnimationFrame: function requestAnimationFrame(func) { @@ -445,6 +474,10 @@ mergeInto(LibraryManager.library, { 0; }, + getMouseWheelDelta: function(event) { + return Math.max(-1, Math.min(1, event.type === 'DOMMouseScroll' ? event.detail : -event.wheelDelta)); + }, + mouseX: 0, mouseY: 0, mouseMovementX: 0, @@ -560,19 +593,13 @@ mergeInto(LibraryManager.library, { setCanvasSize: function(width, height, noUpdates) { var canvas = Module['canvas']; - canvas.width = width; - canvas.height = height; + Browser.updateCanvasDimensions(canvas, width, height); if (!noUpdates) Browser.updateResizeListeners(); }, windowedWidth: 0, windowedHeight: 0, setFullScreenCanvasSize: function() { - var canvas = Module['canvas']; - this.windowedWidth = canvas.width; - this.windowedHeight = canvas.height; - canvas.width = screen.width; - canvas.height = screen.height; // check if SDL is available if (typeof SDL != "undefined") { var flags = {{{ makeGetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'i32', 0, 1) }}}; @@ -583,9 +610,6 @@ mergeInto(LibraryManager.library, { }, setWindowedCanvasSize: function() { - var canvas = Module['canvas']; - canvas.width = this.windowedWidth; - canvas.height = this.windowedHeight; // check if SDL is available if (typeof SDL != "undefined") { var flags = {{{ makeGetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'i32', 0, 1) }}}; @@ -593,8 +617,55 @@ mergeInto(LibraryManager.library, { {{{ makeSetValue('SDL.screen+Runtime.QUANTUM_SIZE*0', '0', 'flags', 'i32') }}} } Browser.updateResizeListeners(); - } + }, + updateCanvasDimensions : function(canvas, wNative, hNative) { + if (wNative && hNative) { + canvas.widthNative = wNative; + canvas.heightNative = hNative; + } else { + wNative = canvas.widthNative; + hNative = canvas.heightNative; + } + var w = wNative; + var h = hNative; + if (Module['forcedAspectRatio'] && Module['forcedAspectRatio'] > 0) { + if (w/h < Module['forcedAspectRatio']) { + w = Math.round(h * Module['forcedAspectRatio']); + } else { + h = Math.round(w / Module['forcedAspectRatio']); + } + } + if (((document['webkitFullScreenElement'] || document['webkitFullscreenElement'] || + document['mozFullScreenElement'] || document['mozFullscreenElement'] || + document['fullScreenElement'] || document['fullscreenElement'] || + document['msFullScreenElement'] || document['msFullscreenElement'] || + document['webkitCurrentFullScreenElement']) === canvas.parentNode) && (typeof screen != 'undefined')) { + var factor = Math.min(screen.width / w, screen.height / h); + w = Math.round(w * factor); + h = Math.round(h * factor); + } + if (Browser.resizeCanvas) { + if (canvas.width != w) canvas.width = w; + if (canvas.height != h) canvas.height = h; + if (typeof canvas.style != 'undefined') { + canvas.style.removeProperty( "width"); + canvas.style.removeProperty("height"); + } + } else { + if (canvas.width != wNative) canvas.width = wNative; + if (canvas.height != hNative) canvas.height = hNative; + if (typeof canvas.style != 'undefined') { + if (w != wNative || h != hNative) { + canvas.style.setProperty( "width", w + "px", "important"); + canvas.style.setProperty("height", h + "px", "important"); + } else { + canvas.style.removeProperty( "width"); + canvas.style.removeProperty("height"); + } + } + } + } }, emscripten_async_wget: function(url, file, onload, onerror) { @@ -652,8 +723,59 @@ mergeInto(LibraryManager.library, { // PROGRESS http.onprogress = function http_onprogress(e) { - var percentComplete = (e.position / e.totalSize)*100; - if (onprogress) Runtime.dynCall('vii', onprogress, [arg, percentComplete]); + if (e.lengthComputable || (e.lengthComputable === undefined && e.totalSize != 0)) { + var percentComplete = (e.position / e.totalSize)*100; + if (onprogress) Runtime.dynCall('vii', onprogress, [arg, percentComplete]); + } + }; + + // Useful because the browser can limit the number of redirection + try { + if (http.channel instanceof Ci.nsIHttpChannel) + http.channel.redirectionLimit = 0; + } catch (ex) { /* whatever */ } + + if (_request == "POST") { + //Send the proper header information along with the request + http.setRequestHeader("Content-type", "application/x-www-form-urlencoded"); + http.setRequestHeader("Content-length", _param.length); + http.setRequestHeader("Connection", "close"); + http.send(_param); + } else { + http.send(null); + } + }, + + emscripten_async_wget2_data: function(url, request, param, arg, free, onload, onerror, onprogress) { + var _url = Pointer_stringify(url); + var _request = Pointer_stringify(request); + var _param = Pointer_stringify(param); + + var http = new XMLHttpRequest(); + http.open(_request, _url, true); + http.responseType = 'arraybuffer'; + + // LOAD + http.onload = function http_onload(e) { + if (http.status == 200 || _url.substr(0,4).toLowerCase() != "http") { + var byteArray = new Uint8Array(http.response); + var buffer = _malloc(byteArray.length); + HEAPU8.set(byteArray, buffer); + if (onload) Runtime.dynCall('viii', onload, [arg, buffer, byteArray.length]); + if (free) _free(buffer); + } else { + if (onerror) Runtime.dynCall('viii', onerror, [arg, http.status, http.statusText]); + } + }; + + // ERROR + http.onerror = function http_onerror(e) { + if (onerror) Runtime.dynCall('viii', onerror, [arg, http.status, http.statusText]); + }; + + // PROGRESS + http.onprogress = function http_onprogress(e) { + if (onprogress) Runtime.dynCall('viii', onprogress, [arg, e.loaded, e.lengthComputable || e.lengthComputable === undefined ? e.total : 0]); }; // Useful because the browser can limit the number of redirection @@ -674,6 +796,8 @@ mergeInto(LibraryManager.library, { }, emscripten_async_prepare: function(file, onload, onerror) { + Module['noExitRuntime'] = true; + var _file = Pointer_stringify(file); var data = FS.analyzePath(_file); if (!data.exists) return -1; @@ -693,6 +817,8 @@ mergeInto(LibraryManager.library, { }, emscripten_async_prepare_data: function(data, size, suffix, arg, onload, onerror) { + Module['noExitRuntime'] = true; + var _suffix = Pointer_stringify(suffix); if (!Browser.asyncPrepareDataCounter) Browser.asyncPrepareDataCounter = 0; var name = 'prepare_data_' + (Browser.asyncPrepareDataCounter++) + '.' + _suffix; @@ -743,7 +869,7 @@ mergeInto(LibraryManager.library, { document.body.appendChild(script); }, - emscripten_set_main_loop: function(func, fps, simulateInfiniteLoop) { + emscripten_set_main_loop: function(func, fps, simulateInfiniteLoop, arg) { Module['noExitRuntime'] = true; Browser.mainLoop.runner = function Browser_mainLoop_runner() { @@ -775,12 +901,30 @@ mergeInto(LibraryManager.library, { return; } + // Signal GL rendering layer that processing of a new frame is about to start. This helps it optimize + // VBO double-buffering and reduce GPU stalls. +#if FULL_ES2 + GL.newRenderingFrameStarted(); +#endif +#if LEGACY_GL_EMULATION + GL.newRenderingFrameStarted(); +#endif + + if (Browser.mainLoop.method === 'timeout' && Module.ctx) { + Module.printErr('Looks like you are rendering without using requestAnimationFrame for the main loop. You should use 0 for the frame rate in emscripten_set_main_loop in order to use requestAnimationFrame, as that can greatly improve your frame rates!'); + Browser.mainLoop.method = ''; // just warn once per call to set main loop + } + if (Module['preMainLoop']) { Module['preMainLoop'](); } try { - Runtime.dynCall('v', func); + if (typeof arg !== 'undefined') { + Runtime.dynCall('vi', func, [arg]); + } else { + Runtime.dynCall('v', func); + } } catch (e) { if (e instanceof ExitStatus) { return; @@ -805,11 +949,13 @@ mergeInto(LibraryManager.library, { if (fps && fps > 0) { Browser.mainLoop.scheduler = function Browser_mainLoop_scheduler() { setTimeout(Browser.mainLoop.runner, 1000/fps); // doing this each time means that on exception, we stop - } + }; + Browser.mainLoop.method = 'timeout'; } else { Browser.mainLoop.scheduler = function Browser_mainLoop_scheduler() { Browser.requestAnimationFrame(Browser.mainLoop.runner); - } + }; + Browser.mainLoop.method = 'rAF'; } Browser.mainLoop.scheduler(); @@ -818,6 +964,11 @@ mergeInto(LibraryManager.library, { } }, + emscripten_set_main_loop_arg__deps: ['emscripten_set_main_loop'], + emscripten_set_main_loop_arg: function(func, arg, fps, simulateInfiniteLoop) { + _emscripten_set_main_loop(func, fps, simulateInfiniteLoop, arg); + }, + emscripten_cancel_main_loop: function() { Browser.mainLoop.scheduler = null; Browser.mainLoop.shouldPause = true; @@ -909,8 +1060,11 @@ mergeInto(LibraryManager.library, { var callbackId = msg.data['callbackId']; var callbackInfo = info.callbacks[callbackId]; if (!callbackInfo) return; // no callback or callback removed meanwhile - info.awaited--; - info.callbacks[callbackId] = null; // TODO: reuse callbackIds, compress this + // Don't trash our callback state if we expect additional calls. + if (msg.data['finalResponse']) { + info.awaited--; + info.callbacks[callbackId] = null; // TODO: reuse callbackIds, compress this + } var data = msg.data['data']; if (data) { if (!data.byteLength) data = new Uint8Array(data); @@ -937,6 +1091,8 @@ mergeInto(LibraryManager.library, { }, emscripten_call_worker: function(id, funcName, data, size, callback, arg) { + Module['noExitRuntime'] = true; // should we only do this if there is a callback? + funcName = Pointer_stringify(funcName); var info = Browser.workers[id]; var callbackId = -1; @@ -955,12 +1111,23 @@ mergeInto(LibraryManager.library, { }); }, + emscripten_worker_respond_provisionally: function(data, size) { + if (!inWorkerCall) throw 'not in worker call!'; + if (workerResponded) throw 'already responded with final response!'; + postMessage({ + 'callbackId': workerCallbackId, + 'finalResponse': false, + 'data': data ? new Uint8Array({{{ makeHEAPView('U8', 'data', 'data + size') }}}) : 0 // XXX copy to a new typed array as a workaround for chrome bug 169705 + }); + }, + emscripten_worker_respond: function(data, size) { if (!inWorkerCall) throw 'not in worker call!'; - if (workerResponded) throw 'already responded!'; + if (workerResponded) throw 'already responded with final response!'; workerResponded = true; postMessage({ 'callbackId': workerCallbackId, + 'finalResponse': true, 'data': data ? new Uint8Array({{{ makeHEAPView('U8', 'data', 'data + size') }}}) : 0 // XXX copy to a new typed array as a workaround for chrome bug 169705 }); }, |