SIIIeix
/
Setup


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133
							<!--
Note: see the shell.emscripten.html in this folder:
we are using a custom shell, that calls coi-serviceworker.js

coi-serviceworker.js was found at https://github.com/gzuidhof/coi-serviceworker, and manually patched:
    see https://github.com/gzuidhof/coi-serviceworker/issues/20
    and https://github.com/gzuidhof/coi-serviceworker/compare/master...tamo:coi-serviceworker:coep-ua-brand

coi-serviceworker.js provides Cross-origin isolation (COOP and COEP) through a service worker
for situations in which you can't control the headers (e.g. GitHub pages).

We are also using goatcounter for simple stats
-->
<!doctype html>
<html lang="en-us">
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no"/>
    <script data-goatcounter="https://pthom-imgui-bundle.goatcounter.com/count"
            async src="//gc.zgo.at/count.js"></script>
    <title>ImGui Bundle Demo</title>
    <style>
        body { margin: 0; background-color: black }
        .emscripten {
            position: absolute;
            top: 0px;
            left: 0px;
            margin: 0px;
            border: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            display: block;
            image-rendering: optimizeSpeed;
            image-rendering: -moz-crisp-edges;
            image-rendering: -o-crisp-edges;
            image-rendering: -webkit-optimize-contrast;
            image-rendering: optimize-contrast;
            image-rendering: crisp-edges;
            image-rendering: pixelated;
            -ms-interpolation-mode: nearest-neighbor;
        }
        #loading-overlay {
            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: black;
            display: flex; flex-direction: column;
            align-items: center; justify-content: center;
            z-index: 10;
        }
        #loading-spinner {
            width: 48px; height: 48px;
            border: 4px solid #333; border-top-color: #999;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }
        #loading-status {
            color: #999; margin-top: 16px; font-family: sans-serif; font-size: 14px;
        }
        @keyframes spin { to { transform: rotate(360deg); } }
    </style>
</head>
<body>
<div id="loading-overlay">
    <div id="loading-spinner"></div>
    <div id="loading-status">Loading...</div>
</div>
<canvas class="emscripten" id="canvas" oncontextmenu="event.preventDefault()" tabindex=-1></canvas>

<!-- Call coi-serviceworker at startup -->
<script src="coi-serviceworker.js"></script>

<script type='text/javascript'>
    var Module = {
        preRun: [],
        postRun: [],
        print: (function() {
            return function(text) {
                text = Array.prototype.slice.call(arguments).join(' ');
                console.log(text);
            };
        })(),
        printErr: function(text) {
            text = Array.prototype.slice.call(arguments).join(' ');
            console.error(text);
        },
        canvas: (function() {
            var canvas = document.getElementById('canvas');
            canvas.addEventListener("webglcontextlost", function(e) {
                alert('WebGL context lost, please reload the page');
                e.preventDefault();
            }, false);

            // Explicitly create a WebGL 2 context with stencil buffer enabled.
            if (typeof WebGL2RenderingContext !== 'undefined') {
                var gl = canvas.getContext('webgl2', { stencil: true });
                if (!gl) {
                    console.error('WebGL 2 not available, falling back to WebGL');
                    gl = canvas.getContext('webgl', { stencil: true });
                }
                if (!gl) {
                    alert('WebGL not available with stencil buffer');
                }
                return canvas;
            } else {
                alert('WebGL 2 not supported by this browser');
            }
        })(),
        setStatus: function(text) {
            console.log("status: " + text);
            var overlay = document.getElementById('loading-overlay');
            if (overlay) {
                if (!text || text === '') {
                    overlay.remove();
                } else {
                    var display = text.replace(/\((\d+)\/(\d+)\)/, function(_, a, b) {
                        return '(' + (a / 1024 | 0) + ' KB / ' + (b / 1024 | 0) + ' KB)';
                    });
                    document.getElementById('loading-status').innerText = display;
                }
            }
        },
        monitorRunDependencies: function(left) {
            var el = document.getElementById('loading-status');
            if (el && left > 0) el.innerText = 'Initializing...';
        }
    };
    window.onerror = function() {
        console.log("onerror: " + event);
    };
</script>
{{{ SCRIPT }}}
</body>
</html>