idTech 4 WebAssembly port – Doom 3 Demo<\/title>\n <style>\n body {\n font-family: arial;\n margin: 0;\n background-color: black;\n }\n\n .emscripten {\n position: relative;\n padding-right: 0;\n margin-left: auto;\n margin-right: auto;\n display: block;\n }\n\n div.emscripten {\n margin-top: 5px;\n text-align: center;\n color: white;\n }\n\n div.emscripten_border {\n border: 0px solid black;\n position: relative;\n }\n\n \/* the canvas *must not* have any border or padding, or mouse coords will be wrong *\/\n canvas.emscripten {\n border: 0px none;\n background-color: black;\n }\n\n .spinner {\n height: 30px;\n width: 30px;\n margin: 0;\n margin-top: 0px;\n margin-left: 20px;\n display: inline-block;\n vertical-align: top;\n\n -webkit-animation: rotation .8s linear infinite;\n -moz-animation: rotation .8s linear infinite;\n -o-animation: rotation .8s linear infinite;\n animation: rotation 0.8s linear infinite;\n\n border-left: 0px solid rgb(235, 235, 235);\n border-right: 0px solid rgb(235, 235, 235);\n border-bottom: 0px solid rgb(235, 235, 235);\n border-top: 0px solid rgb(120, 120, 120);\n\n border-radius: 100%;\n background-color: rgb(189, 215, 46);\n }\n\n @-webkit-keyframes rotation {\n from {\n -webkit-transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n }\n }\n\n @-moz-keyframes rotation {\n from {\n -moz-transform: rotate(0deg);\n }\n to {\n -moz-transform: rotate(360deg);\n }\n }\n\n @-o-keyframes rotation {\n from {\n -o-transform: rotate(0deg);\n }\n to {\n -o-transform: rotate(360deg);\n }\n }\n\n @keyframes rotation {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n #status {\n display: inline-block;\n vertical-align: top;\n margin-top: 10px;\n margin-left: 20px;\n font-weight: bold;\n color: rgb(120, 120, 120);\n }\n\n #help {\n position: absolute;\n background-color: black;\n right: 10px;\n top: 10px;\n border-width: 1px;\n border-color: gray;\n border-style: solid;\n text-align: justify;\n color: white;\n display: none;\n z-index: 49;\n }\n\n #buttons {\n position: absolute;\n right: 10px;\n z-index: 50;\n }\n\n #progress {\n height: 20px;\n width: 300px;\n }\n\n #controls {\n display: inline-block;\n float: right;\n vertical-align: top;\n margin-top: 5px;\n margin-right: 20px;\n }\n\n #output {\n width: 100%;\n height: 200px;\n margin: 0 auto;\n margin-top: 0px;\n border-left: 0px;\n border-right: 0px;\n padding-left: 0px;\n padding-right: 0px;\n display: block;\n background-color: black;\n color: white;\n font-family: 'Lucida Console', Monaco, monospace;\n outline: none;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"spinner\" id='spinner'><\/div>\n<div class=\"emscripten\" id=\"status\">Downloading…<\/div>\n\n<div class=\"emscripten\">\n <progress value=\"0\" max=\"100\" id=\"progress\" hidden=1><\/progress>\n<\/div>\n\n<div class=\"emscripten_border\">\n <div id=\"help\">\n <b>\/help<\/b><br><br>\n <b>Keyboard:<\/b><br> Use the HOME key to go to the main menu or skip cinematic (instead of ESC key), and INSERT key to open game console (instead of ~ or `).\n <br>Arrow keys are “WASD” by default, and can be changed in-game.\n <br><br><b>Video:<\/b><br> Resolution is 960×640 by default (3:2 aspect ratio), and can be changed in-game. Use Alt+Enter to restart video (ie. “vid-restart” command).\n <\/div>\n <canvas class=\"emscripten\" id=\"canvas\" oncontextmenu=\"event.preventDefault()\" tabindex=-1><\/canvas>\n<\/div>\n\n\n\n<script type='text\/javascript'>\n var statusElement = document.getElementById('status');\n var progressElement = document.getElementById('progress');\n var spinnerElement = document.getElementById('spinner');\n\n function showHelp() {\n var helpElement = document.getElementById('help');\n if (helpElement.style.display != \"block\") {\n helpElement.style.display = \"block\";\n } else {\n helpElement.style.display = \"none\";\n }\n }\n\n function showDisclaimer() {\n var infosElement = document.getElementById('infos');\n if (infosElement.style.display != \"block\") {\n infosElement.style.display = \"block\";\n }\n var disclaimerElement = document.getElementById('disclaimer');\n if (disclaimerElement.style.display != \"block\") {\n disclaimerElement.style.display = \"block\";\n }\n }\n\n var Module = {\n preRun: [],\n postRun: [showDisclaimer],\n print: (function () {\n var element = document.getElementById('output');\n if (element) element.value = ''; \/\/ clear browser cache\n return function (text) {\n if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');\n \/\/ These replacements are necessary if you render to raw HTML\n \/\/text = text.replace(\/&\/g, \"&\");\n \/\/text = text.replace(\/<\/g, \"<\");\n \/\/text = text.replace(\/>\/g, \">\");\n \/\/text = text.replace('\\n', '<br>', 'g');\n console.log(text);\n if (element) {\n element.value += text + \"\\n\";\n element.scrollTop = element.scrollHeight; \/\/ focus on bottom\n }\n };\n })(),\n printErr: function (text) {\n if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');\n console.error(text);\n },\n canvas: (function () {\n var canvas = document.getElementById('canvas');\n\n \/\/ As a default initial behavior, pop up an alert when webgl context is lost. To make your\n \/\/ application robust, you may want to override this behavior before shipping!\n \/\/ See http:\/\/www.khronos.org\/registry\/webgl\/specs\/latest\/1.0\/#5.15.2\n canvas.addEventListener(\"webglcontextlost\", function (e) {\n alert('WebGL context lost. You will need to reload the page.');\n e.preventDefault();\n }, false);\n\n return canvas;\n })(),\n hideStatus: function() {\n statusElement.style.display = \"none\";\n },\n showStatus: function() {\n statusElement.style.display = \"inline-block\";\n },\n setStatus: function (text) {\n if (!Module.setStatus.last) Module.setStatus.last = {time: Date.now(), text: ''};\n if (text === Module.setStatus.last.text) return;\n var m = text.match(\/([^(]+)\\((\\d+(\\.\\d+)?)\\\/(\\d+)\\)\/);\n var now = Date.now();\n if (m && now - Module.setStatus.last.time < 30) return; \/\/ if this is a progress update, skip it if too soon\n Module.setStatus.last.time = now;\n Module.setStatus.last.text = text;\n if (m) {\n text = m[1];\n progressElement.value = parseInt(m[2]) * 100;\n progressElement.max = parseInt(m[4]) * 100;\n progressElement.hidden = false;\n spinnerElement.hidden = false;\n } else {\n progressElement.value = null;\n progressElement.max = null;\n progressElement.hidden = true;\n if (!text) spinnerElement.style.display = 'none';\n }\n statusElement.innerHTML = text;\n },\n totalDependencies: 0,\n monitorRunDependencies: function (left) {\n this.totalDependencies = Math.max(this.totalDependencies, left);\n Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies - left) + '\/' + this.totalDependencies + ')' : 'All downloads complete.');\n if (!left) {\n Module.hideStatus();\n }\n else {\n Module.showStatus();\n }\n }\n };\n Module.setStatus('Downloading...');\n window.onerror = function (event) {\n \/\/ TODO: do not warn on ok events like simulating an infinite loop or exitStatus\n Module.setStatus('Exception thrown, see JavaScript console');\n spinnerElement.style.display = 'none';\n Module.setStatus = function (text) {\n if (text) Module.printErr('[post-exception status] ' + text);\n };\n };\n Module.locateFile = function(path) {\n return '\/wp-content\/uploads\/doom\/' + path;\n }\n<\/script>\n<script async type=\"text\/javascript\" src=\"\/wp-content\/uploads\/doom\/d3wasm.js\"><\/script>\n<script src=\"\/wp-content\/uploads\/doom\/demo00.js\"><\/script>\n<\/body>\n \n<\/html>\n <\/div>\n ","protected":false},"excerpt":{"rendered":"<p>ddd<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":22,"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

\n \n\n\n \n \n idTech 4 WebAssembly port – Doom 3 Demo<\/title>\n <style>\n body {\n font-family: arial;\n margin: 0;\n background-color: black;\n }\n\n .emscripten {\n position: relative;\n padding-right: 0;\n margin-left: auto;\n margin-right: auto;\n display: block;\n }\n\n div.emscripten {\n margin-top: 5px;\n text-align: center;\n color: white;\n }\n\n div.emscripten_border {\n border: 0px solid black;\n position: relative;\n }\n\n \/* the canvas *must not* have any border or padding, or mouse coords will be wrong *\/\n canvas.emscripten {\n border: 0px none;\n background-color: black;\n }\n\n .spinner {\n height: 30px;\n width: 30px;\n margin: 0;\n margin-top: 0px;\n margin-left: 20px;\n display: inline-block;\n vertical-align: top;\n\n -webkit-animation: rotation .8s linear infinite;\n -moz-animation: rotation .8s linear infinite;\n -o-animation: rotation .8s linear infinite;\n animation: rotation 0.8s linear infinite;\n\n border-left: 0px solid rgb(235, 235, 235);\n border-right: 0px solid rgb(235, 235, 235);\n border-bottom: 0px solid rgb(235, 235, 235);\n border-top: 0px solid rgb(120, 120, 120);\n\n border-radius: 100%;\n background-color: rgb(189, 215, 46);\n }\n\n @-webkit-keyframes rotation {\n from {\n -webkit-transform: rotate(0deg);\n }\n to {\n -webkit-transform: rotate(360deg);\n }\n }\n\n @-moz-keyframes rotation {\n from {\n -moz-transform: rotate(0deg);\n }\n to {\n -moz-transform: rotate(360deg);\n }\n }\n\n @-o-keyframes rotation {\n from {\n -o-transform: rotate(0deg);\n }\n to {\n -o-transform: rotate(360deg);\n }\n }\n\n @keyframes rotation {\n from {\n transform: rotate(0deg);\n }\n to {\n transform: rotate(360deg);\n }\n }\n\n #status {\n display: inline-block;\n vertical-align: top;\n margin-top: 10px;\n margin-left: 20px;\n font-weight: bold;\n color: rgb(120, 120, 120);\n }\n\n #help {\n position: absolute;\n background-color: black;\n right: 10px;\n top: 10px;\n border-width: 1px;\n border-color: gray;\n border-style: solid;\n text-align: justify;\n color: white;\n display: none;\n z-index: 49;\n }\n\n #buttons {\n position: absolute;\n right: 10px;\n z-index: 50;\n }\n\n #progress {\n height: 20px;\n width: 300px;\n }\n\n #controls {\n display: inline-block;\n float: right;\n vertical-align: top;\n margin-top: 5px;\n margin-right: 20px;\n }\n\n #output {\n width: 100%;\n height: 200px;\n margin: 0 auto;\n margin-top: 0px;\n border-left: 0px;\n border-right: 0px;\n padding-left: 0px;\n padding-right: 0px;\n display: block;\n background-color: black;\n color: white;\n font-family: 'Lucida Console', Monaco, monospace;\n outline: none;\n }\n <\/style>\n<\/head>\n<body>\n\n<div class=\"spinner\" id='spinner'><\/div>\n<div class=\"emscripten\" id=\"status\">Downloading…<\/div>\n\n<div class=\"emscripten\">\n <progress value=\"0\" max=\"100\" id=\"progress\" hidden=1><\/progress>\n<\/div>\n\n<div class=\"emscripten_border\">\n <div id=\"help\">\n <b>\/help<\/b><br><br>\n <b>Keyboard:<\/b><br> Use the HOME key to go to the main menu or skip cinematic (instead of ESC key), and INSERT key to open game console (instead of ~ or `).\n <br>Arrow keys are “WASD” by default, and can be changed in-game.\n <br><br><b>Video:<\/b><br> Resolution is 960×640 by default (3:2 aspect ratio), and can be changed in-game. Use Alt+Enter to restart video (ie. “vid-restart” command).\n <\/div>\n <canvas class=\"emscripten\" id=\"canvas\" oncontextmenu=\"event.preventDefault()\" tabindex=-1><\/canvas>\n<\/div>\n\n\n\n<script type='text\/javascript'>\n var statusElement = document.getElementById('status');\n var progressElement = document.getElementById('progress');\n var spinnerElement = document.getElementById('spinner');\n\n function showHelp() {\n var helpElement = document.getElementById('help');\n if (helpElement.style.display != \"block\") {\n helpElement.style.display = \"block\";\n } else {\n helpElement.style.display = \"none\";\n }\n }\n\n function showDisclaimer() {\n var infosElement = document.getElementById('infos');\n if (infosElement.style.display != \"block\") {\n infosElement.style.display = \"block\";\n }\n var disclaimerElement = document.getElementById('disclaimer');\n if (disclaimerElement.style.display != \"block\") {\n disclaimerElement.style.display = \"block\";\n }\n }\n\n var Module = {\n preRun: [],\n postRun: [showDisclaimer],\n print: (function () {\n var element = document.getElementById('output');\n if (element) element.value = ''; \/\/ clear browser cache\n return function (text) {\n if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');\n \/\/ These replacements are necessary if you render to raw HTML\n \/\/text = text.replace(\/&\/g, \"&\");\n \/\/text = text.replace(\/<\/g, \"<\");\n \/\/text = text.replace(\/>\/g, \">\");\n \/\/text = text.replace('\\n', '<br>', 'g');\n console.log(text);\n if (element) {\n element.value += text + \"\\n\";\n element.scrollTop = element.scrollHeight; \/\/ focus on bottom\n }\n };\n })(),\n printErr: function (text) {\n if (arguments.length > 1) text = Array.prototype.slice.call(arguments).join(' ');\n console.error(text);\n },\n canvas: (function () {\n var canvas = document.getElementById('canvas');\n\n \/\/ As a default initial behavior, pop up an alert when webgl context is lost. To make your\n \/\/ application robust, you may want to override this behavior before shipping!\n \/\/ See http:\/\/www.khronos.org\/registry\/webgl\/specs\/latest\/1.0\/#5.15.2\n canvas.addEventListener(\"webglcontextlost\", function (e) {\n alert('WebGL context lost. You will need to reload the page.');\n e.preventDefault();\n }, false);\n\n return canvas;\n })(),\n hideStatus: function() {\n statusElement.style.display = \"none\";\n },\n showStatus: function() {\n statusElement.style.display = \"inline-block\";\n },\n setStatus: function (text) {\n if (!Module.setStatus.last) Module.setStatus.last = {time: Date.now(), text: ''};\n if (text === Module.setStatus.last.text) return;\n var m = text.match(\/([^(]+)\\((\\d+(\\.\\d+)?)\\\/(\\d+)\\)\/);\n var now = Date.now();\n if (m && now - Module.setStatus.last.time < 30) return; \/\/ if this is a progress update, skip it if too soon\n Module.setStatus.last.time = now;\n Module.setStatus.last.text = text;\n if (m) {\n text = m[1];\n progressElement.value = parseInt(m[2]) * 100;\n progressElement.max = parseInt(m[4]) * 100;\n progressElement.hidden = false;\n spinnerElement.hidden = false;\n } else {\n progressElement.value = null;\n progressElement.max = null;\n progressElement.hidden = true;\n if (!text) spinnerElement.style.display = 'none';\n }\n statusElement.innerHTML = text;\n },\n totalDependencies: 0,\n monitorRunDependencies: function (left) {\n this.totalDependencies = Math.max(this.totalDependencies, left);\n Module.setStatus(left ? 'Preparing... (' + (this.totalDependencies - left) + '\/' + this.totalDependencies + ')' : 'All downloads complete.');\n if (!left) {\n Module.hideStatus();\n }\n else {\n Module.showStatus();\n }\n }\n };\n Module.setStatus('Downloading...');\n window.onerror = function (event) {\n \/\/ TODO: do not warn on ok events like simulating an infinite loop or exitStatus\n Module.setStatus('Exception thrown, see JavaScript console');\n spinnerElement.style.display = 'none';\n Module.setStatus = function (text) {\n if (text) Module.printErr('[post-exception status] ' + text);\n };\n };\n Module.locateFile = function(path) {\n return '\/wp-content\/uploads\/doom\/' + path;\n }\n<\/script>\n<script async type=\"text\/javascript\" src=\"\/wp-content\/uploads\/doom\/d3wasm.js\"><\/script>\n<script src=\"\/wp-content\/uploads\/doom\/demo00.js\"><\/script>\n<\/body>\n \n<\/html>\n <\/div>\n ","protected":false},"excerpt":{"rendered":"<p>ddd<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/10","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=10"}],"version-history":[{"count":22,"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions"}],"predecessor-version":[{"id":42,"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=\/wp\/v2\/pages\/10\/revisions\/42"}],"wp:attachment":[{"href":"https:\/\/it2503.sspu-opava.eu\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=10"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}