(() => { 'use strict'; const modules = Object.create(null); modules["webui/platform.mjs"] = (() => { // The web platform: runs the CPU (out/cpu.wasm) with the guest environment // (out/guestenv.bin) and emulates the platform calls of guestenv/platform.h. Works // in Node and in a browser worker; game files come from a `source` function. // // Everything Win32 happens in the guest. This file only provides files, // presentation, input and time, and knows nothing about the game. // // The calls are inputs or outputs. The guest only sees what inputs return: // files, input, time and options, which depend on the replay (or the live // input and clock, which it records) and nothing else, so runs reproduce. // Outputs (log, present, wait, cursor, pointer, audio) return nothing: they can be // asynchronous, and may hold the guest back (to wait in real time), which it // cannot notice. // The address space of guestenv/platform.h and cpu/cpu.h. The CPU's own data // lies in [CPU_BASE, CPU_END) of the guest's memory, which ends anywhere from // 512 MiB on: guestenv gives the heap what is left. const GUESTENV_BASE = 0x00c00000, HOST_BASE = 0x00f00000, STACK_TOP = 0x01f00000, TEB_BASE = 0x02000000; const GUEST_BASE = 0x100000, CPU_BASE = 0x02100000, CPU_END = 0x04000000; // Memory sizes to try, largest first: a device may refuse a large allocation, // or grant it and leave too little for the rest (the web player then retries // with the smaller size). const MEMORY_SIZES = [2048, 512].map(mib => mib * 2 ** 20); const PENDING_MS = 2; // Game files stay in memory while open, and closed ones up to this many bytes: // the guest copies what it keeps (file mappings) into its own memory. const CACHE_BYTES = 32 * 2 ** 20; const hex = n => (n >>> 0).toString(16).padStart(8, '0'); // Give input and OffscreenCanvas commits a turn as well as the emulator. // A continuously replenished MessageChannel queue can starve both in Chrome. // Dispatch the continuation through a timer; the port hop resets timer nesting // so repeated yields do not accumulate the nested-timer minimum delay. function taskYielder() { const {port1, port2} = new MessageChannel(); let resume, timer; port1.onmessage = () => { timer = setTimeout(resume, 0); }; return { yield: () => new Promise(resolve => { resume = resolve; port2.postMessage(0); }), close() { clearTimeout(timer); port1.close(); port2.close(); }, }; } // The game exited (code; guestenv stops with 0xdead after logging why), or the // replay reached its end (code undefined). class Exit extends Error { constructor(code) { super(code === undefined ? 'Replay ended' : `Game exited with code ${code}`); this.code = code; } } // Instantiates the CPU. Generated modules are instantiated through jit_load // and share its memory and function table. With asyncJit, they compile in // the background, which keeps compilation from stalling frames: the region // runs interpreted until the next return to the event loop after it is ready // (jit_install; jit.pending counts the compilations under way). A failed // compilation fails the next jit_load. async function instantiateCPU(wasm, jit, memory) { let cpu, failure = null; const add = module => { const f = new WebAssembly.Instance(module, { e: {m: cpu.memory, c: cpu.jit_h_call, u: cpu.jit_h_uop, k: cpu.jit_h_cond, g: cpu.jit_h_flags, x: cpu.jit_h_fpu, y: cpu.jit_h_mmx}, }).exports.f; const table = cpu.__indirect_function_table, index = table.grow(1); table.set(index, f); return index; }; const env = { math: (op, a, b) => [() => 2 ** a - 1, () => Math.log2(a), () => Math.atan2(a, b), () => a * 2 ** b, () => Math.sin(a), () => Math.cos(a)][op](), jit_load(ptr, size, entry) { const bytes = new Uint8Array(cpu.memory.buffer, ptr >>> 0, size); if (!jit.async) return add(new WebAssembly.Module(bytes)); if (failure) throw failure; jit.pending++; WebAssembly.compile(bytes.slice()).then(module => cpu.jit_install(entry >>> 0, add(module)), error => { failure ??= error; }) .finally(() => jit.pending--); return 0; }, }; // Accept either raw bytes or the module compiled during player preparation. const result = await WebAssembly.instantiate(wasm, {env: {...env, memory}}); cpu = (result.instance ?? result).exports; return cpu; } // The guest's memory: the first of `sizes` (bytes) that the browser grants. function allocateMemory(sizes = MEMORY_SIZES) { let failure; for (const size of sizes) { const pages = size / 65536; try { return new WebAssembly.Memory({initial: pages, maximum: pages}); } catch (error) { if (!(error instanceof RangeError)) throw error; failure = error; } } throw new RangeError(`Cannot allocate guest memory of ${sizes.map(s => s / 2 ** 20 + ' MiB').join(', ')}`, {cause: failure}); } class Machine { // manifest: game files by lowercase path ({path, size}); source(path): // bytes of a game file; input: a source of input (input.mjs); output: what // to do with the outputs, all optional: present(surface, nowUs), // wait(untilUs) (both may return a promise to hold the guest back), cursor(kind, // argb, w, h, hotX, hotY), pointer(x, y), audio(command); patches: the patches to apply ("" // for guestenv's default). constructor({manifest, source, input, output = {}, log = console.log, patches = '', beforeCall, storage}) { this.patches = patches; this.beforeCall = beforeCall; this.manifest = manifest; this.source = source; this.input = input; this.output = output; this.log = log; this.storage = storage; this.dirtyFiles = new Set(); this.files = new Map(storage?.files); // the writable overlay: path -> bytes, or null once deleted this.cache = new Map(); // unchanged game files: path -> bytes, least recently opened first this.dirs = new Set(['', 'temp', 'log', ...(storage?.dirs ?? [])]); this.handles = new Map(); this.nextHandle = 1; this.frames = 0; this.presented = false; // since the last return to the event loop this.recent = []; // the last log lines, for error reports this.lists = new Map(); this.manifestDirs = new Set(); for (const key of Object.keys(manifest)) for (let i = key.indexOf('/'); i >= 0; i = key.indexOf('/', i + 1)) this.manifestDirs.add(key.slice(0, i)); } // asyncJit: compile regions in the background (see instantiateCPU). // memorySizes: the guest memory sizes to try (allocateMemory). async init(cpuWasm, guestenvBin, {jit = true, asyncJit = true, memorySizes} = {}) { this.jit = {async: asyncJit, pending: 0}; this.cpu = await instantiateCPU(cpuWasm, this.jit, allocateMemory(memorySizes)); this.mem = new Uint8Array(this.cpu.memory.buffer); this.dv = new DataView(this.cpu.memory.buffer); this.mem.set(guestenvBin, GUESTENV_BASE); // The virtual clock counts the game's instructions, not guestenv's. this.cpu.reset(GUESTENV_BASE, STACK_TOP, TEB_BASE, GUESTENV_BASE, GUESTENV_BASE + guestenvBin.length); this.cpu.cpu_jit(jit ? 64 : 0); return this; } u32(p) { return this.dv.getUint32(p >>> 0, true); } w32(p, v) { this.dv.setUint32(p >>> 0, v >>> 0, true); } str(p, n = 4096) { let e = p; while (e < p + n && this.mem[e]) e++; return new TextDecoder('windows-1252').decode(this.mem.subarray(p, e)); } putstr(p, s, n) { const len = Math.min(s.length, n - 1); for (let i = 0; i < len; i++) this.mem[p + i] = s.charCodeAt(i) & 255; this.mem[p + len] = 0; } instructions() { return this.cpu.cpu_stat(0); } // Runs until the game exits or the replay ends (throws Exit). yieldMs: // return to the event loop after every presented frame and at least this // often (in a browser, to show frames and to receive messages). A worker's // canvas shows what was drawn when it returns to the event loop, so a frame // presented before another without a return in between is never seen. // While regions compile in the background, return every PENDING_MS, so // that hot code does not stay interpreted for long. async run({yieldMs = 0} = {}) { const cpu = this.cpu; const tasks = yieldMs ? taskYielder() : null; let last = performance.now(); try { for (;;) { const s = cpu.run(); if (s === 1) { const boundary = this.beforeCall?.(this); if (boundary) await boundary; const r = this.call(); if (r) await r; } else if (s < 0) { const eip = cpu.reg_get(8) >>> 0; throw Error(`CPU stopped at ${hex(eip)}: ${eip < GUEST_BASE ? 'invalid address' : 'unsupported instruction ' + Array.from(this.mem.subarray(eip, eip + 8), b => b.toString(16).padStart(2, '0')).join(' ')}`); } if (yieldMs && (this.presented || performance.now() - last >= (this.jit.pending ? Math.min(yieldMs, PENDING_MS) : yieldMs))) { this.presented = false; await tasks.yield(); last = performance.now(); } } } finally { tasks?.close(); } } // A platform call: cdecl arguments above the return address, result in EAX. // Returns a promise when the call has to wait (file loads, pacing). call() { const cpu = this.cpu, eip = cpu.reg_get(8) >>> 0, n = (eip - HOST_BASE) / 16; const fn = this.calls[n]; if (!fn) throw Error('unknown platform call at ' + hex(eip)); const sp = cpu.reg_get(4) >>> 0, ret = this.u32(sp); const a = Array.from({length: fn.length}, (_, i) => this.u32(sp + 4 + i * 4)); const done = v => { cpu.reg_set(0, (v ?? 0) >>> 0); cpu.reg_set(4, sp + 4); cpu.reg_set(8, ret); }; const v = fn.apply(this, a); if (v instanceof Promise) return v.then(done); done(v); } // Game file contents, or null. The writable overlay takes precedence. async gameFile(key) { if (this.files.has(key)) return this.files.get(key); let bytes = this.cache.get(key); if (!bytes) { const entry = this.manifest[key]; if (!entry) return null; bytes = new Uint8Array(await this.source(entry.path)); } this.cache.delete(key); this.cache.set(key, bytes); this.trimCache(key); // the caller opens it return bytes; } // Drop the least recently opened closed game files beyond CACHE_BYTES. trimCache(opening) { const open = new Set(this.handles.values()).add(opening); let kept = 0; for (const [key, bytes] of [...this.cache].reverse()) { if (open.has(key)) continue; kept += bytes.length; if (kept > CACHE_BYTES) this.cache.delete(key); } } isFile(key) { return this.files.has(key) ? !!this.files.get(key) : !!this.manifest[key]; } isDir(key) { return this.dirs.has(key) || this.manifestDirs.has(key); } file(id) { const key = this.handles.get(id); if (key === undefined) throw Error('bad platform file ' + id); return {key, data: this.files.has(key) ? this.files.get(key) : this.cache.get(key)}; } } // The calls in platform.h order. Arguments are 32-bit words. Machine.prototype.calls = [ function log(p, n) { const text = this.str(p, n); this.recent = [...this.recent.slice(-19), text]; this.log(text); }, function exit(code) { throw new Exit(code); }, function open(p, create) { const key = this.str(p); const opened = () => { const id = this.nextHandle++; this.handles.set(id, key); return id; }; if (create) { this.files.set(key, new Uint8Array(0)); this.dirtyFiles.add(key); this.lists.delete(key.slice(0, Math.max(0, key.lastIndexOf("/")))); return opened(); } return this.gameFile(key).then(data => data ? opened() : -1); }, function read(id, dst, off, n) { const {data} = this.file(id), len = Math.max(0, Math.min(n, data.length - off)); this.mem.set(data.subarray(off, off + len), dst); return len; }, function write(id, src, off, n) { const {key, data} = this.file(id); const out = new Uint8Array(Math.max(data.length, off + n)); out.set(data); out.set(this.mem.subarray(src, src + n), off); this.files.set(key, out); this.dirtyFiles.add(key); this.lists.delete(key.slice(0, Math.max(0, key.lastIndexOf("/")))); return n; }, function size(id) { return this.file(id).data.length; }, function close(id) { const key = this.handles.get(id); this.handles.delete(id); this.trimCache(); if (this.dirtyFiles.has(key) && ![...this.handles.values()].includes(key)) { this.dirtyFiles.delete(key); return this.storage?.write(key, this.files.get(key)); } }, function stat(p) { const key = this.str(p); return this.isFile(key) ? 1 : this.isDir(key) ? 2 : 0; }, function mkdir(p) { const key = this.str(p); if (this.isDir(key)) return 0; this.dirs.add(key); if (this.storage) return this.storage.mkdir(key).then(() => 1); return 1; }, function remove(p) { const key = this.str(p), exists = this.isFile(key); if (exists) { this.files.set(key, null); this.dirtyFiles.delete(key); this.lists.delete(key.slice(0, Math.max(0, key.lastIndexOf("/")))); if (this.storage) return this.storage.write(key, null).then(() => 1); } return +exists; }, // Merge the installation and writable overlay, keeping manifest order. function list(p, index, name, cap, size) { const dir = this.str(p); let entries = this.lists.get(dir); if (!entries) { const prefix = dir ? dir + "/" : ""; const files = new Map(Object.entries(this.manifest).map(([key, value]) => [key, value.size])); for (const [key, data] of this.files) { if (data === null) files.delete(key); else files.set(key, data.length); } entries = [...files] .filter(([key]) => key.startsWith(prefix) && !key.slice(prefix.length).includes("/")) .map(([key, size]) => [key.slice(prefix.length), size]); this.lists.set(dir, entries); } const entry = entries[index]; if (!entry) return 0; this.putstr(name, entry[0], cap); this.w32(size, entry[1]); return 1; }, function present(bits, w, h, pitch, bpp, lo, hi) { this.frames++; this.presented = true; return this.output.present?.({bits, w, h, pitch, bpp}, lo + hi * 2 ** 32); }, function input(lo, hi, out, max) { const events = this.input.poll(lo + hi * 2 ** 32, max); events.forEach((e, n) => e.forEach((v, i) => this.w32(out + n * 16 + i * 4, v))); return events.length; }, // The clock's next line (guestenv/platform.h), from the input: the CPU's // RDTSC counts 100 per game instruction. function time(tscLo, tscHi, minLo, minHi, out) { const tsc = BigInt(tscHi) << 32n | BigInt(tscLo), line = this.input.time(tsc, minLo + minHi * 2 ** 32); this.dv.setBigUint64(out, BigInt(line.us), true); this.dv.setBigUint64(out + 8, tsc + BigInt(line.span), true); this.w32(out + 16, line.scale); }, // The next line starts at the wait's end at the earliest; the output may make it take real time. function wait(nowLo, nowHi, untilLo, untilHi) { return this.output.wait?.(untilLo + untilHi * 2 ** 32); }, function options(out, cap) { const s = this.patches.slice(0, cap); this.putstr(out, s, cap + 1); return s.length; }, function cursor(kind, argb, w, h, hotX, hotY) { this.output.cursor?.(kind, argb, w, h, hotX, hotY); }, // SetCursorPos: live input continues from there. function pointer(x, y) { this.input.pointer?.(x | 0, y | 0); this.output.pointer?.(x | 0, y | 0); }, // A command to the sound's voices (struct plat_audio): the file's bytes are // valid during the output's call only. Volume and pan are fractions. function audio(p) { const u = o => this.u32(p + o), op = u(8), data = u(28); this.output.audio?.({at: u(0) + u(4) * 2 ** 32, op, voice: u(12), format: u(16), frame: u(24), data: op === 1 ? this.mem.subarray(data, data + u(20)) : null, volume: u(32) / 0x10000, rate: u(36), paused: u(40) !== 0, pan: (u(44) | 0) / 0x10000}); }, // Native networking only; preserve the browser's unavailable Winsock result. function network() { return -10091; }, function memory() { return this.mem.length; }, // GPU commands (platform.h, P_GPU), valid during the output's call only. function gpu(p, n) { return this.output.gpu?.(new Uint32Array(this.mem.buffer, p, n / 4), p); }, ]; return {Exit,Machine,MEMORY_SIZES}; })(); modules["webui/input.mjs"] = (() => { // Input sources of the web platform: what P_INPUT and P_TIME return to the // guest. The guest sees nothing else from outside that could differ between // runs, so a run is its input. LiveInput records the events it hands the // guest, with the time of the poll that took them, and the lines of the clock // it draws along real time; ReplayInput hands them to the same polls and time // calls again (guestenv makes both at points that depend on the game's // instructions only). // // Decoded traces contain events [us, kind, a, b, c], exact input poll // ordinals, and clock lines [call, us, scale, span]. LiveInput streams these // records to TraceWriter; the footer identifies the final execution boundary. const {Exit} = modules["webui/platform.mjs"]; const EV_MOVE = 1, EV_DOWN = 2, EV_UP = 3, EV_KEYDOWN = 4, EV_KEYUP = 5, EV_WHEEL = 6, EV_RESIZE = 7; // Initial live-clock rate estimate: 300 game instructions per microsecond // (RDTSC counts 100 per instruction). LiveClock adapts it to measured speed. const INITIAL_TICKS_PER_US = 30000, MAX_SPAN = 2 ** 31; const scaleOf = usPerTick => Math.min(Math.max(Math.round(usPerTick * 2 ** 32), 1), 2 ** 32 - 1); // A line of the clock from tsc on (platform.h): us + ((t - tsc) * scale >> 32) // until tsc + span. class Line { constructor(tsc, us, scale, span) { Object.assign(this, {tsc, us, scale, span}); } at(t) { return this.us + Number((t - this.tsc) * BigInt(this.scale) >> 32n); } // The same line on from t, not below min. next(t, min) { return new Line(t, Math.max(this.at(t), min), this.scale, this.span); } } class ReplayInput { constructor(replay) { this.replay = replay; this.next = 0; this.polls = 0; this.lines = new Map(replay.clock.map(r => [r[0], r])); this.calls = 0; this.line = null; } // The events due at `now`; the replay ends (Exit) at its end. poll(now, max) { const {events, eventPolls, trace: {footer}} = this.replay, out = []; if (footer.boundary === 'input' && this.polls === footer.polls) throw new Exit(); this.polls++; while (this.next < events.length && eventPolls[this.next] === this.polls - 1 && out.length < max) out.push(events[this.next++].slice(1)); return out; } // The recorded line, or the one before, continued. time(tsc, min) { const r = this.lines.get(this.calls++); if (!r && !this.line) throw Error('Trace has no initial clock line'); return this.line = r ? new Line(tsc, r[1], r[2], r[3]) : this.line.next(tsc, min); } } // Real time for live play: every line reaches real time at its end, about // 2 ms later, at the rate the host runs the game. A line is recorded only when // the one before, continued, is more than 1/4 ms off real time. A clock far // behind real time (a background tab, a debugger) moves on by 100 ms at most: // the game does not catch up on the rest. const EPSILON_US = 250, MAX_JUMP_US = 100000, LINE_US = 2000; class LiveClock { constructor(trace) { this.trace = trace; this.base = performance.now(); // wall time at 0 this.rate = INITIAL_TICKS_PER_US; // ticks per wall microsecond, measured this.calls = 0; this.line = null; this.last = null; } wall() { return Math.floor((performance.now() - this.base) * 1000); } time(tsc, min) { const call = this.calls++; let wall = this.wall(); if (this.last && !this.last.waited && !min) { /* not across a wait: it slept */ const dt = wall - this.last.wall, dtsc = Number(tsc - this.last.tsc); if (dt > 0 && dtsc > 0) this.rate = 0.7 * this.rate + 0.3 * dtsc / dt; } this.last = {wall, tsc, waited: min > 0}; let next = this.line?.next(tsc, min); if (next && wall - next.us > MAX_JUMP_US) { this.base += (wall - next.us - MAX_JUMP_US) / 1000; wall = next.us + MAX_JUMP_US; } const target = Math.max(wall, min); if (!next || Math.abs(target - next.us) > EPSILON_US) { const span = Math.max(1, Math.min(Math.round(this.rate * LINE_US), MAX_SPAN)); const us = Math.max(next?.us ?? 0, target), end = target + span / this.rate; const scale = Math.min(Math.max(scaleOf((end - us) / span), scaleOf(0.25 / this.rate)), scaleOf(4 / this.rate)); next = new Line(tsc, us, scale, span); this.trace.clockAt([call, us, scale, span]); } return this.line = next; } } // Input from the page, as it arrives, and real time. The pointer is the // guest's: positions and movements come as fractions of the display, and // SetCursorPos moves the pointer here (pointer), which the page cannot do. // Consecutive moves are one, and moves still waiting when the game moves the // pointer are dropped, as with Windows. class LiveInput { constructor(patches = '', trace) { this.patches = patches; this.trace = trace; this.clock = new LiveClock(trace); this.polls = 0; this.queue = []; this.wheelRemainder = 0; this.w = 800, this.h = 600; this.x = 400, this.y = 300; this.now = 0; } // The display's size, from what the guest presents. display(w, h) { this.x *= w / this.w, this.y *= h / this.h; this.w = w, this.h = h; } // The pointer at a place (fractions), or moved by a distance (fractions of the display). move(fx, fy) { this.place(fx * this.w, fy * this.h); } moveBy(dx, dy) { this.place(this.x + dx * this.w, this.y + dy * this.h); } place(x, y) { this.x = Math.min(Math.max(x, 0), this.w - 1), this.y = Math.min(Math.max(y, 0), this.h - 1); const e = [EV_MOVE, Math.round(this.x), Math.round(this.y), 0], last = this.queue.at(-1); if (last?.[0] === EV_MOVE) this.queue[this.queue.length - 1] = e; else this.queue.push(e); } // button: 0 left, 2 right. button(down, button) { this.queue.push([down ? EV_DOWN : EV_UP, Math.round(this.x), Math.round(this.y), button]); } // Browsers report pixels, lines, or pages, with positive deltas downward. // Use 100 pixels / 3 lines / 1 page per notch, accumulating smooth trackpad // input so tiny events don't each become a full Windows wheel notch. wheel(deltaY, deltaMode = 0) { if (!Number.isFinite(deltaY)) return; this.wheelRemainder -= deltaY / (deltaMode === 1 ? 3 : deltaMode === 2 ? 1 : 100); const notches = Math.trunc(this.wheelRemainder); this.wheelRemainder -= notches; for (let i = 0; i < Math.abs(notches); i++) this.queue.push([EV_WHEEL, Math.round(this.x), Math.round(this.y), notches > 0 ? 120 : -120]); } key(down, vk, char) { this.queue.push([down ? EV_KEYDOWN : EV_KEYUP, vk, down ? char : 0, 0]); } resize(w, h) { if (!this.patches.split(/[ ,]+/).includes('resize') || !Number.isFinite(w) || !Number.isFinite(h) || w <= 0 || h <= 0) return; w = Math.min(4096, Math.max(800, Math.round(w))); h = Math.min(4096, Math.max(600, Math.round(h))); const last = this.queue.at(-1), event = [EV_RESIZE, w, h, 0]; if (last?.[0] === EV_RESIZE) this.queue[this.queue.length - 1] = event; else this.queue.push(event); } // SetCursorPos. pointer(x, y) { this.x = x, this.y = y; this.queue = this.queue.filter(e => e[0] !== EV_MOVE); } poll(now, max) { this.now = now; this.polls++; const out = this.queue.splice(0, max); for (const e of out) this.trace.eventAt(now, e, this.polls - 1); return out; } time(tsc, min) { return this.clock.time(tsc, min); } // How long until real time reaches the clock's `us` (for waits). aheadMs(us) { return (us - this.clock.wall()) / 1000; } } return {LiveInput}; })(); modules["webui/gpu.mjs"] = (() => { // GPU commands (guestenv/platform.h, P_GPU) in WebGL 1: the platform side of // guestenv's Direct3D 7 (guestenv/d3d.c, the "d3d" patch). Render targets are // framebuffers, textures are uploaded from guest memory when their generation // changes, and draws use pre-transformed (TL) vertices straight from the // command buffer, which goes to the GPU in one upload per call. // // Render targets hold the picture top row first, like guest memory and // uploaded textures, so that blits between them need no flips; the presenter // shows a target like an uploaded frame. // // Blits (the game's sprites and interface, thousands a frame zoomed out) are // batched: consecutive ones from up to BLIT_UNITS sources (a texture unit // each), keyed or not, are one draw of their vertices, made when another // command needs the GL state, a source more comes, or the call ends. A WebGL call per blit made the frame // cost tens of thousands of calls, and browsers that run WebGL in another // process (Firefox) stall the worker on each call once that process falls behind. // // A WebGL context can go away (the web player replaces its canvas on resize; // the browser may drop a context), and the guest does not know. So the // renderer keeps what it was told about each texture and render target, a few // words each: a renderer for a new context makes textures again from guest // memory when they are next used, and render targets empty or copied from the // renderer before it. Pixels of textures live in guest memory, except for // textures that live on the GPU only (GPU_UPLOAD: the game's sprite pages): // those are copied from the renderer before too, and come back empty after a // lost context. const GPU_TARGET = 1, GPU_TEXTURE = 2, GPU_FREE = 3, GPU_CLEAR = 4, GPU_STATE = 5, GPU_STAGE = 6, GPU_BIND = 7, GPU_VIEWPORT = 8, GPU_DRAW = 9, GPU_BLIT = 10, GPU_PRESENT = 11, GPU_NOP = 12, GPU_UPLOAD = 13; const FMT_RGB565 = 1, FMT_ARGB4444 = 2, FMT_ARGB1555 = 3, FMT_XRGB8888 = 4, FMT_ARGB8888 = 5; // Direct3D render states and texture stage states the renderer follows. const RS_ZENABLE = 7, RS_ZWRITEENABLE = 14, RS_ALPHATESTENABLE = 15, RS_SRCBLEND = 19, RS_DESTBLEND = 20, RS_ZFUNC = 23, RS_ALPHAREF = 24, RS_ALPHAFUNC = 25, RS_ALPHABLENDENABLE = 27, RS_SPECULARENABLE = 29, RS_TEXTUREFACTOR = 60; const TSS_COLOROP = 1, TSS_COLORARG1 = 2, TSS_COLORARG2 = 3, TSS_ALPHAOP = 4, TSS_ALPHAARG1 = 5, TSS_ALPHAARG2 = 6, TSS_ADDRESS = 12, TSS_ADDRESSU = 13, TSS_ADDRESSV = 14, TSS_MAGFILTER = 16, TSS_MINFILTER = 17; const vertexSource = ` attribute vec4 position; // x, y (pixels), z, rhw attribute vec4 diffuse, specular; // bytes B, G, R, A attribute vec2 uv; uniform vec2 size, origin; // the target's varying vec4 vDiffuse, vSpecular; varying vec2 vUv; void main() { // Direct3D's pixel centres are at whole coordinates, GL's at halves. vec2 ndc = (position.xy - origin + 0.5) / size * 2.0 - 1.0; float w = position.w > 0.0 ? 1.0 / position.w : 1.0; gl_Position = vec4(ndc, position.z * 2.0 - 1.0, 1.0) * w; vDiffuse = diffuse.zyxw; vSpecular = specular.zyxw; vUv = uv; }`; // Texture stage 0 only: D3DTOP operations on D3DTA arguments. const fragmentSource = ` precision mediump float; varying vec4 vDiffuse, vSpecular; varying vec2 vUv; uniform sampler2D tex; uniform bool textured, argb, specularOn, alphaTest; uniform int colorOp, colorArg1, colorArg2, alphaOp, alphaArg1, alphaArg2, alphaFunc; uniform float alphaRef; uniform vec4 factor; vec4 arg(int a, vec4 t) { int which = a - (a / 16) * 16; vec4 v = which == 2 ? t : which == 3 ? factor : which == 4 ? vSpecular : vDiffuse; if (a / 32 - (a / 64) * 2 == 1) v = vec4(v.a); if (a / 16 - (a / 32) * 2 == 1) v = 1.0 - v; return v; } vec4 op(int o, vec4 a, vec4 b) { if (o == 2) return a; if (o == 3) return b; if (o == 4) return a * b; if (o == 5) return a * b * 2.0; if (o == 6) return a * b * 4.0; if (o == 7) return a + b; if (o == 8) return a + b - 0.5; if (o == 10) return a - b; return vDiffuse; // disable, and what is missing } bool passes(int f, float a) { if (f == 1) return false; if (f == 2) return a < alphaRef; if (f == 3) return a == alphaRef; if (f == 4) return a <= alphaRef; if (f == 5) return a > alphaRef; if (f == 6) return a != alphaRef; if (f == 7) return a >= alphaRef; return true; } void main() { vec4 t = textured ? texture2D(tex, vUv) : vec4(1.0); if (argb) t = t.gbar; // ARGB4444 as uploaded: GL reads its nibbles as RGBA vec3 color = op(colorOp, arg(colorArg1, t), arg(colorArg2, t)).rgb; float alpha = op(alphaOp, arg(alphaArg1, t), arg(alphaArg2, t)).a; if (specularOn) color += vSpecular.rgb; if (alphaTest && !passes(alphaFunc, alpha)) discard; gl_FragColor = vec4(clamp(color, 0.0, 1.0), clamp(alpha, 0.0, 1.0)); }`; // Blits: rectangles of textures, without keyed (alpha 0) texels if asked. // Per vertex: the source's texture unit and flags, as unit * 4 + argb * 2 + keyed. const BLIT_UNITS = 8; // WebGL 1 has at least 8 units for fragment shaders const blitVertexSource = ` attribute vec2 position, uv; // pixels of the target; of the source (0 to 1) attribute float source; uniform vec2 size; varying vec2 vUv; varying float vSource; void main() { gl_Position = vec4(position / size * 2.0 - 1.0, 0.0, 1.0); vUv = uv; vSource = source; }`; const blitFragmentSource = ` precision mediump float; varying vec2 vUv; varying float vSource; uniform sampler2D tex0, tex1, tex2, tex3, tex4, tex5, tex6, tex7; void main() { float s = floor(vSource + 0.5), unit = floor(s / 4.0); vec4 t = unit < 0.5 ? texture2D(tex0, vUv) : unit < 1.5 ? texture2D(tex1, vUv) : unit < 2.5 ? texture2D(tex2, vUv) : unit < 3.5 ? texture2D(tex3, vUv) : unit < 4.5 ? texture2D(tex4, vUv) : unit < 5.5 ? texture2D(tex5, vUv) : unit < 6.5 ? texture2D(tex6, vUv) : texture2D(tex7, vUv); if (mod(floor(s / 2.0), 2.0) > 0.5) t = t.gbar; // ARGB4444 as uploaded if (mod(s, 2.0) > 0.5 && t.a < 0.5) discard; // keyed gl_FragColor = vec4(t.rgb, 1.0); }`; const blendFactor = gl => [, gl.ZERO, gl.ONE, gl.SRC_COLOR, gl.ONE_MINUS_SRC_COLOR, gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA, gl.DST_ALPHA, gl.ONE_MINUS_DST_ALPHA, gl.DST_COLOR, gl.ONE_MINUS_DST_COLOR, gl.SRC_ALPHA_SATURATE]; const pow2 = n => (n & (n - 1)) === 0; const BAND = 128; // rows: blits of a target onto itself go through a copy of this height // Blits a batch holds at most: 6 vertices of x, y, u, v, source each. const BLIT_BATCH = 2048, BLIT_FLOATS = 30; const USES_GL = new Set([GPU_TARGET, GPU_TEXTURE, GPU_UPLOAD, GPU_FREE, GPU_CLEAR, GPU_DRAW]); const CORNERS = [0, 0, 1, 0, 0, 1, 0, 1, 1, 0, 1, 1]; // two triangles of a unit square const glParameters = (gl, list) => { for (const [p, v] of list) gl.texParameteri(gl.TEXTURE_2D, p, v); }; const nearest = gl => [[gl.TEXTURE_MIN_FILTER, gl.NEAREST], [gl.TEXTURE_MAG_FILTER, gl.NEAREST], [gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE], [gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE]]; class GpuRenderer { // from: the renderer of a context before this one, whose records (and // render targets, unless its context is lost) this one takes over. constructor(gl, from = null) { this.gl = gl; this.targets = new Map(); // id -> {texture, framebuffer, depth, w, h, ox, oy}: GL objects of this context this.textures = new Map(); // id -> {texture, w, h, kind, generation, sampler, argb} // What the guest said, whatever happens to contexts. this.targetInfo = from?.targetInfo ?? new Map(); // id -> {w, h, z, ox, oy} this.textureInfo = from?.textureInfo ?? new Map(); // id -> the arguments of its last GPU_TEXTURE this.states = from?.states ?? new Uint32Array(256); this.stages = from?.stages ?? Array.from({length: 8}, () => new Uint32Array(32)); this.bound = from?.bound ?? new Uint32Array(8); this.viewport = from?.viewport ?? [0, 0, 0, 0]; this.targetId = from?.targetId ?? 0; this.presentedId = 0; this.mem = from?.mem; if (!from) { // Direct3D defaults that matter here. this.states[RS_SRCBLEND] = 2, this.states[RS_DESTBLEND] = 1, this.states[RS_ZENABLE] = 1; this.states[RS_ZWRITEENABLE] = 1, this.states[RS_ZFUNC] = 4, this.states[RS_ALPHAFUNC] = 8; this.stages[0].set([0, 4, 2, 1, 2, 2, 1], 0); for (const s of this.stages) s[TSS_ADDRESSU] = s[TSS_ADDRESSV] = 1, s[TSS_MAGFILTER] = s[TSS_MINFILTER] = 1; } this.maxArrays = 16; if (gl.isContextLost()) { // a renderer that only keeps account, until the context is back this.lost = true; return; } const program = (vs, fs) => { const shader = (type, source) => { const s = gl.createShader(type); gl.shaderSource(s, source); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw Error('GPU shader: ' + gl.getShaderInfoLog(s)); return s; }; const p = gl.createProgram(); gl.attachShader(p, shader(gl.VERTEX_SHADER, vs)); gl.attachShader(p, shader(gl.FRAGMENT_SHADER, fs)); gl.linkProgram(p); if (!gl.getProgramParameter(p, gl.LINK_STATUS)) throw Error('GPU program: ' + gl.getProgramInfoLog(p)); const u = {}, a = {}; for (let i = 0; i < gl.getProgramParameter(p, gl.ACTIVE_UNIFORMS); i++) { const name = gl.getActiveUniform(p, i).name; u[name] = gl.getUniformLocation(p, name); } for (let i = 0; i < gl.getProgramParameter(p, gl.ACTIVE_ATTRIBUTES); i++) { const name = gl.getActiveAttrib(p, i).name; a[name] = gl.getAttribLocation(p, name); } return {p, u, a}; }; this.draw = program(vertexSource, fragmentSource); this.blit = program(blitVertexSource, blitFragmentSource); this.commands = gl.createBuffer(); this.commandBytes = 0; // The blits of a batch: their sources (by unit), and vertices. this.blitVertices = new Float32Array(BLIT_BATCH * BLIT_FLOATS); this.blits = 0; this.blitSources = []; this.unitTextures = new Array(BLIT_UNITS); // what each unit has bound, as far as known this.blitBuffer = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.blitBuffer); gl.bufferData(gl.ARRAY_BUFFER, this.blitVertices.byteLength, gl.DYNAMIC_DRAW); this.scratch = new Uint16Array(0); this.scratch32 = new Uint32Array(0); this.copy = null; // a band of a target, for blits onto itself this.maxArrays = Math.min(16, gl.getParameter(gl.MAX_VERTEX_ATTRIBS)); this.unready(); if (from && !from.lost) this.migrate(from); } // The render targets of the renderer before, copied band by band through a // small buffer: the game does not draw them again. migrate(from) { const old = from.gl, gl = this.gl; let buffer = new Uint8Array(0); for (const [id, t] of from.targets) { const n = this.makeTarget(id, this.targetInfo.get(id)); if (buffer.length < t.w * BAND * 4) buffer = new Uint8Array(t.w * BAND * 4); old.bindFramebuffer(old.FRAMEBUFFER, t.framebuffer); gl.bindTexture(gl.TEXTURE_2D, n.texture); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 4); for (let y = 0; y < t.h; y += BAND) { const h = Math.min(BAND, t.h - y), band = buffer.subarray(0, t.w * h * 4); old.readPixels(0, y, t.w, h, old.RGBA, old.UNSIGNED_BYTE, band); gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, y, t.w, h, gl.RGBA, gl.UNSIGNED_BYTE, band); } } // Textures on the GPU only, read through a framebuffer and packed back // into their 16-bit formats (exact: 8-bit channels of 4-, 5- or 6-bit ones). const fb = old.createFramebuffer(); old.bindFramebuffer(old.FRAMEBUFFER, fb); let packed = new Uint16Array(0); for (const [id, t] of from.textures) { if (!t.remote) continue; old.framebufferTexture2D(old.FRAMEBUFFER, old.COLOR_ATTACHMENT0, old.TEXTURE_2D, t.texture, 0); const n = this.storage(id, t.w, t.h, t.format, t.keyed, t.key); n.remote = true; if (old.checkFramebufferStatus(old.FRAMEBUFFER) !== old.FRAMEBUFFER_COMPLETE) continue; // empty, then if (buffer.length < t.w * BAND * 4) buffer = new Uint8Array(t.w * BAND * 4); if (packed.length < t.w * BAND) packed = new Uint16Array(t.w * BAND); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 2); for (let y = 0; y < t.h; y += BAND) { const h = Math.min(BAND, t.h - y), band = buffer.subarray(0, t.w * h * 4); old.readPixels(0, y, t.w, h, old.RGBA, old.UNSIGNED_BYTE, band); if (t.glType === gl.UNSIGNED_BYTE) { gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, y, t.w, h, t.glFormat, t.glType, band); continue; } const out = packed.subarray(0, t.w * h); for (let i = 0, j = 0; i < out.length; i++, j += 4) { const r = band[j], g = band[j + 1], b = band[j + 2], a = band[j + 3]; out[i] = t.glType === gl.UNSIGNED_SHORT_4_4_4_4 ? (r >> 4) << 12 | (g >> 4) << 8 | (b >> 4) << 4 | a >> 4 : t.glType === gl.UNSIGNED_SHORT_5_6_5 ? (r >> 3) << 11 | (g >> 2) << 5 | b >> 3 : (r >> 3) << 11 | (g >> 3) << 6 | (b >> 3) << 1 | a >> 7; } gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, y, t.w, h, t.glFormat, t.glType, out); } } old.deleteFramebuffer(fb); old.bindFramebuffer(old.FRAMEBUFFER, null); } // The context is gone: GL objects with it. Commands keep the records. loseContext() { this.lost = true; this.blits = 0; this.blitSources = []; this.targets.clear(); this.textures.clear(); this.target = this.copy = null; } // The render target the last GPU_PRESENT named, once. takePresented() { const id = this.presentedId; this.presentedId = 0; return id && !this.lost ? this.targetOf(id) : null; } // GL objects of a target or texture, made again when a new context lacks them. targetOf(id) { const info = this.targets.has(id) ? null : this.targetInfo.get(id); return this.targets.get(id) ?? (info ? this.makeTarget(id, info) : null); } textureOf(id) { if (this.textures.has(id)) return this.textures.get(id); const info = this.textureInfo.get(id); if (!info) return null; if (info.remote) { // its pixels were on a context that is gone const t = this.storage(id, info.w, info.h, info.format, info.keyed, info.key); t.remote = true; return t; } this.texture(info, this.mem); return this.textures.get(id); } // Exactly these attribute arrays enabled: WebGL rejects draws while an // enabled array points past the end of its buffer, and the command buffer // shrinks from call to call. arrays(...locations) { const gl = this.gl; for (let i = 0; i < this.maxArrays; i++) if (locations.includes(i)) gl.enableVertexAttribArray(i); else gl.disableVertexAttribArray(i); } // Run the commands of one P_GPU call (a Uint32Array view of guest memory; // mem: the guest's bytes, for texture pixels). Without a context, only // what the guest says about its surfaces and states is kept. run(words, mem) { const gl = this.gl; this.mem = mem; if (!this.lost) { // The presenter draws to the canvas in between: back to the target. this.target = this.targetId ? this.targetOf(this.targetId) : null; if (this.target) { gl.bindFramebuffer(gl.FRAMEBUFFER, this.target.framebuffer); gl.viewport(0, 0, this.target.w, this.target.h); } // The whole buffer is the vertex buffer: draws point into it. Its GL // buffer stays (as large as guestenv's queue, 1 MiB): no allocation per call. gl.bindBuffer(gl.ARRAY_BUFFER, this.commands); if (words.byteLength > this.commandBytes) { this.commandBytes = Math.max(words.byteLength, 1 << 20); gl.bufferData(gl.ARRAY_BUFFER, this.commandBytes, gl.DYNAMIC_DRAW); } gl.bufferSubData(gl.ARRAY_BUFFER, 0, words); this.unready(); } for (let i = 0; i < words.length;) { const op = words[i] & 255, n = words[i] >>> 8, a = i + 1; if (!n) throw Error('GPU command of no words'); // Commands that use GL draw the blits before them first. if (this.blits && op !== GPU_BLIT && USES_GL.has(op)) this.flushBlits(); switch (op) { case GPU_TARGET: this.setTarget(words[a], words[a + 1], words[a + 2], words[a + 3], words[a + 4] | 0, words[a + 5] | 0); break; case GPU_TEXTURE: { const info = words.slice(a, a + 13); this.textureInfo.set(info[0], info); if (!this.lost) this.texture(info, mem); break; } case GPU_UPLOAD: { const info = words.slice(a, a + 12); if (!this.textureInfo.get(info[0])?.remote) this.textureInfo.set(info[0], {remote: true, w: info[1], h: info[2], format: info[3], keyed: info[10], key: info[11]}); if (!this.lost) this.upload(info, mem); break; } case GPU_FREE: this.free(words[a]); break; case GPU_STATE: this.states[words[a]] = words[a + 1]; this.stateReady = false; break; case GPU_STAGE: this.stages[words[a]][words[a + 1]] = words[a + 2]; this.stateReady = false; break; case GPU_BIND: this.bound[words[a]] = words[a + 1]; break; case GPU_VIEWPORT: this.viewport = [words[a], words[a + 1], words[a + 2], words[a + 3]]; this.stateReady = false; break; case GPU_PRESENT: this.presentedId = words[a]; break; case GPU_NOP: break; default: if (this.lost) break; // drawing: nowhere to draw if (op === GPU_CLEAR) this.clear(words.subarray(a, a + 7)); else if (op === GPU_DRAW) this.drawPrimitive(words, a); else if (op === GPU_BLIT) this.blitRect(words.subarray(a, a + 11)); else throw Error('Unknown GPU command ' + op); } i += n; } this.flushBlits(); // the presenter draws next, or reads targets } // Draws set up the GL state they need only when something else changed it. unready() { this.stateReady = false; // uniforms, blending, depth, scissor this.layout = null; // attribute pointers this.drawTexture = undefined; this.textured = undefined; this.argb = undefined; this.blitReady = false; // the blit program, its buffer, attributes and uniforms this.unitTextures?.fill(undefined); } setTarget(id, w, h, z, ox, oy) { const old = this.targetInfo.get(id); if (old && (old.w !== w || old.h !== h || old.z !== z)) this.freeObjects(id); this.targetInfo.set(id, {w, h, z, ox, oy}); const t = this.targets.get(id); if (t) t.ox = ox, t.oy = oy; this.targetId = id; if (this.lost) return; const gl = this.gl; this.unready(); this.target = this.targetOf(id); gl.bindFramebuffer(gl.FRAMEBUFFER, this.target.framebuffer); gl.viewport(0, 0, w, h); } makeTarget(id, {w, h, z, ox, oy}) { const gl = this.gl, texture = gl.createTexture(); gl.bindTexture(gl.TEXTURE_2D, texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, w, h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); glParameters(gl, nearest(gl)); const framebuffer = gl.createFramebuffer(); gl.bindFramebuffer(gl.FRAMEBUFFER, framebuffer); gl.framebufferTexture2D(gl.FRAMEBUFFER, gl.COLOR_ATTACHMENT0, gl.TEXTURE_2D, texture, 0); let depth = null; if (z) { depth = gl.createRenderbuffer(); gl.bindRenderbuffer(gl.RENDERBUFFER, depth); gl.renderbufferStorage(gl.RENDERBUFFER, gl.DEPTH_COMPONENT16, w, h); gl.framebufferRenderbuffer(gl.FRAMEBUFFER, gl.DEPTH_ATTACHMENT, gl.RENDERBUFFER, depth); } gl.disable(gl.SCISSOR_TEST); gl.clearColor(0, 0, 0, 1); gl.clear(gl.COLOR_BUFFER_BIT | (z ? gl.DEPTH_BUFFER_BIT : 0)); const t = {texture, framebuffer, depth, w, h, ox, oy, sampler: 'target'}; this.targets.set(id, t); // Making it bound its framebuffer: back to the current one. gl.bindFramebuffer(gl.FRAMEBUFFER, this.target?.framebuffer ?? null); this.unready(); return t; } // GL objects only (a texture or target that is made again differently). freeObjects(id) { const gl = this.gl, t = this.targets.get(id), x = this.textures.get(id); if (t) { gl.deleteTexture(t.texture); gl.deleteFramebuffer(t.framebuffer); if (t.depth) gl.deleteRenderbuffer(t.depth); this.targets.delete(id); if (this.target === t) this.target = null; } if (x) { gl.deleteTexture(x.texture); this.textures.delete(id); } } free(id) { this.freeObjects(id); this.targetInfo.delete(id); this.textureInfo.delete(id); if (this.targetId === id) this.targetId = 0; if (this.presentedId === id) this.presentedId = 0; } // GL formats of a texture: RGB565 as is unless keyed (then RGBA 5551: // green loses its low bit); ARGB4444 as is (the shaders reorder it); the rest // in the formats' GL orders. glFormat(format, keyed) { const gl = this.gl; return format === FMT_XRGB8888 || format === FMT_ARGB8888 ? [gl.RGBA, gl.UNSIGNED_BYTE] : format === FMT_RGB565 && !keyed ? [gl.RGB, gl.UNSIGNED_SHORT_5_6_5] : format === FMT_ARGB4444 ? [gl.RGBA, gl.UNSIGNED_SHORT_4_4_4_4] : [gl.RGBA, gl.UNSIGNED_SHORT_5_5_5_1]; } // The GL texture of id, made (empty) unless it has this size and format; bound. storage(id, w, h, format, keyed, key) { const gl = this.gl, kind = `${format} ${keyed} ${key}`; let t = this.textures.get(id); if (!t || t.w !== w || t.h !== h || t.kind !== kind) { if (t) gl.deleteTexture(t.texture); const [glFormat, glType] = this.glFormat(format, keyed); t = {texture: gl.createTexture(), w, h, kind, format, keyed, key, glFormat, glType, sampler: null, argb: format === FMT_ARGB4444, fresh: true}; this.textures.set(id, t); gl.bindTexture(gl.TEXTURE_2D, t.texture); gl.texImage2D(gl.TEXTURE_2D, 0, glFormat, w, h, 0, glFormat, glType, null); } else { t.fresh = false; gl.bindTexture(gl.TEXTURE_2D, t.texture); } this.drawTexture = undefined; // the binding changed if (this.unitTextures) this.unitTextures[0] = undefined; return t; } // GPU_TEXTURE: the rectangle that changed (x, y, rw, rh) of a texture whose // pixels are in guest memory (all of them for a new texture). texture([id, w, h, format, generation, bits, pitch, keyed, key, x, y, rw, rh], mem) { let t = this.textures.get(id); if (t && t.generation === generation && t.w === w && t.h === h) return; t = this.storage(id, w, h, format, keyed, key); if (t.fresh) x = y = 0, rw = w, rh = h; t.generation = generation; const bytes = format === FMT_XRGB8888 || format === FMT_ARGB8888 ? 4 : 2; this.pixels(t, mem, bits + y * pitch + x * bytes, pitch, x, y, rw, rh); } // GPU_UPLOAD: pixels for a texture that lives on the GPU only. upload([id, w, h, format, x, y, rw, rh, bits, pitch, keyed, key], mem) { const t = this.storage(id, w, h, format, keyed, key); t.remote = true; this.pixels(t, mem, bits, pitch, x, y, rw, rh); } // Guest pixels (rows pitch bytes apart from base) into a rectangle of t, bound. pixels(t, mem, base, pitch, x, y, rw, rh) { const gl = this.gl, {format, keyed, key, glFormat, glType} = t; if (rw <= 0 || rh <= 0) return; gl.pixelStorei(gl.UNPACK_ALIGNMENT, 2); if (glType === gl.UNSIGNED_BYTE) { // 32-bit BGRA in memory: to RGBA bytes. if (this.scratch32.length < rw * rh) this.scratch32 = new Uint32Array(rw * rh); const out = this.scratch32, src = new DataView(mem.buffer, mem.byteOffset); for (let j = 0; j < rh; j++) for (let i = 0; i < rw; i++) { const v = src.getUint32(base + j * pitch + i * 4, true); const a = format === FMT_ARGB8888 ? v >>> 24 : 255; out[j * rw + i] = (a << 24 | (v & 255) << 16 | v & 0xff00 | v >>> 16 & 255) >>> 0; } gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, rw, rh, glFormat, glType, new Uint8Array(out.buffer, 0, rw * rh * 4)); return; } if ((base | pitch) & 1) throw Error('Unaligned GPU texture'); // RGB565 and ARGB4444 go up as they are (the shaders reorder ARGB): rows // by native copies, or straight from guest memory when contiguous. if (this.mem16?.buffer !== mem.buffer || this.mem16.byteOffset !== mem.byteOffset) this.mem16 = new Uint16Array(mem.buffer, mem.byteOffset, mem.byteLength >>> 1); const m16 = this.mem16, at = j => (base + j * pitch) >> 1; const raw = glType === gl.UNSIGNED_SHORT_5_6_5 || format === FMT_ARGB4444; if (raw && pitch === rw * 2) { gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, rw, rh, glFormat, glType, new Uint16Array(mem.buffer, mem.byteOffset + base, rw * rh)); return; } if (this.scratch.length < rw * rh) this.scratch = new Uint16Array(rw * rh); const out = this.scratch; for (let j = 0; j < rh; j++) { const r = at(j), o = j * rw; if (raw) out.set(m16.subarray(r, r + rw), o); else if (format === FMT_RGB565) // keyed: alpha 0 at the key for (let i = 0; i < rw; i++) { const v = m16[r + i]; out[o + i] = v === key ? 0 : (v & 0xffc0) | (v & 0x1f) << 1 | 1; } else if (format === FMT_ARGB1555) for (let i = 0; i < rw; i++) { const v = m16[r + i]; out[o + i] = (v << 1 | v >>> 15) & 0xffff; } else throw Error('Unknown GPU texture format ' + format); } gl.texSubImage2D(gl.TEXTURE_2D, 0, x, y, rw, rh, glFormat, glType, out.subarray(0, rw * rh)); } // Sampler state lives in the texture in WebGL 1: set it when it changes. sample(t, stage) { const gl = this.gl, s = this.stages[stage]; const filter = f => f === 2 ? gl.LINEAR : gl.NEAREST; const wrap = a => !pow2(t.w) || !pow2(t.h) || a === 3 || a === 4 ? gl.CLAMP_TO_EDGE : a === 2 ? gl.MIRRORED_REPEAT : gl.REPEAT; const key = `${s[TSS_MAGFILTER]} ${s[TSS_MINFILTER]} ${s[TSS_ADDRESSU]} ${s[TSS_ADDRESSV]}`; if (t.sampler === key) return; t.sampler = key; gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, filter(s[TSS_MAGFILTER])); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, filter(s[TSS_MINFILTER])); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, wrap(s[TSS_ADDRESSU])); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, wrap(s[TSS_ADDRESSV])); } clear([flags, color, z, x, y, w, h]) { const gl = this.gl; this.stateReady = false; gl.enable(gl.SCISSOR_TEST); gl.scissor((x | 0) - this.target.ox, (y | 0) - this.target.oy, w, h); gl.clearColor((color >>> 16 & 255) / 255, (color >>> 8 & 255) / 255, (color & 255) / 255, (color >>> 24) / 255); gl.clearDepth(new Float32Array(new Uint32Array([z]).buffer)[0]); gl.depthMask(true); gl.clear((flags & 1 ? gl.COLOR_BUFFER_BIT : 0) | (flags & 2 && this.target?.depth ? gl.DEPTH_BUFFER_BIT : 0)); gl.disable(gl.SCISSOR_TEST); } drawPrimitive(words, a) { const gl = this.gl, [type, fvf, stride, count, indices] = words.subarray(a, a + 5); this.blitReady = false; if (!(fvf & 4)) return; // only pre-transformed vertices if (indices) throw Error('Indexed GPU draws are not implemented'); // First, as making it again (a new context) changes GL state. const t = this.bound[0] ? this.textureOf(this.bound[0]) ?? this.targetOf(this.bound[0]) : null; const {p, u, a: at} = this.draw, s = this.states, st = this.stages[0]; // Attribute pointers from the start of the buffer, for draws by index; // per draw when the vertices are not aligned to their stride. const base = (a + 5) * 4, aligned = base % stride === 0, layout = aligned ? fvf + ' ' + stride : null; if (!layout || layout !== this.layout) { if (this.layout === null) { gl.useProgram(p); gl.bindBuffer(gl.ARRAY_BUFFER, this.commands); } const from = aligned ? 0 : base; let offset = 16; // x, y, z, rhw this.arrays(at.position, ...(fvf & 0x40 ? [at.diffuse] : []), ...(fvf & 0x80 ? [at.specular] : []), ...(fvf >> 8 & 15 ? [at.uv] : [])); gl.vertexAttribPointer(at.position, 4, gl.FLOAT, false, stride, from); if (fvf & 0x10) offset += 12; for (const [bit, name] of [[0x40, 'diffuse'], [0x80, 'specular']]) { if (fvf & bit) { gl.vertexAttribPointer(at[name], 4, gl.UNSIGNED_BYTE, true, stride, from + offset); offset += 4; } else if (name === 'diffuse') gl.vertexAttrib4f(at[name], 1, 1, 1, 1); else gl.vertexAttrib4f(at[name], 0, 0, 0, 0); } if (fvf >> 8 & 15) gl.vertexAttribPointer(at.uv, 2, gl.FLOAT, false, stride, from + offset); else gl.vertexAttrib2f(at.uv, 0, 0); this.layout = layout ?? 'unaligned'; } if (!this.stateReady) { this.stateReady = true; gl.uniform1i(u.tex, 0); gl.uniform2f(u.size, this.target.w, this.target.h); gl.uniform2f(u.origin, this.target.ox, this.target.oy); gl.uniform1i(u.colorOp, st[TSS_COLOROP]); gl.uniform1i(u.colorArg1, st[TSS_COLORARG1]); gl.uniform1i(u.colorArg2, st[TSS_COLORARG2]); gl.uniform1i(u.alphaOp, st[TSS_ALPHAOP]); gl.uniform1i(u.alphaArg1, st[TSS_ALPHAARG1]); gl.uniform1i(u.alphaArg2, st[TSS_ALPHAARG2]); gl.uniform1i(u.specularOn, s[RS_SPECULARENABLE] ? 1 : 0); gl.uniform1i(u.alphaTest, s[RS_ALPHATESTENABLE] ? 1 : 0); gl.uniform1i(u.alphaFunc, s[RS_ALPHAFUNC]); gl.uniform1f(u.alphaRef, (s[RS_ALPHAREF] & 255) / 255); const f = s[RS_TEXTUREFACTOR]; gl.uniform4f(u.factor, (f >>> 16 & 255) / 255, (f >>> 8 & 255) / 255, (f & 255) / 255, (f >>> 24) / 255); if (s[RS_ALPHABLENDENABLE]) { const factors = blendFactor(gl); gl.enable(gl.BLEND); if (s[RS_SRCBLEND] === 12) gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA); // BOTHSRCALPHA else if (s[RS_SRCBLEND] === 13) gl.blendFunc(gl.ONE_MINUS_SRC_ALPHA, gl.SRC_ALPHA); else gl.blendFunc(factors[s[RS_SRCBLEND]] ?? gl.ONE, factors[s[RS_DESTBLEND]] ?? gl.ZERO); } else gl.disable(gl.BLEND); if (s[RS_ZENABLE] && this.target.depth) { gl.enable(gl.DEPTH_TEST); gl.depthFunc(gl.NEVER + (s[RS_ZFUNC] || 8) - 1); gl.depthMask(!!s[RS_ZWRITEENABLE]); } else gl.disable(gl.DEPTH_TEST); const [vx, vy, vw, vh] = this.viewport, {ox, oy, w, h} = this.target; if (vw && vh && (vx > ox || vy > oy || vx + vw < ox + w || vy + vh < oy + h)) { gl.enable(gl.SCISSOR_TEST); gl.scissor(vx - ox, vy - oy, vw, vh); } else gl.disable(gl.SCISSOR_TEST); const m = this.stages[0]; this.samplerKey = `${m[TSS_MAGFILTER]} ${m[TSS_MINFILTER]} ${m[TSS_ADDRESSU]} ${m[TSS_ADDRESSV]}`; this.drawTexture = undefined; } if (t !== this.drawTexture) { if (t) { gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, t.texture); if (t.sampler !== 'target' && t.sampler !== this.samplerKey) this.sample(t, 0); } if (this.textured !== !!t) gl.uniform1i(u.textured, t ? 1 : 0); this.textured = !!t; if (this.argb !== !!t?.argb) gl.uniform1i(u.argb, t?.argb ? 1 : 0); this.argb = !!t?.argb; this.drawTexture = t; } const mode = [, gl.POINTS, gl.LINES, gl.LINE_STRIP, gl.TRIANGLES, gl.TRIANGLE_STRIP, gl.TRIANGLE_FAN][type]; gl.drawArrays(mode, aligned ? base / stride : 0, count); } // Coordinates are the guest's: targets cover theirs from their origins. blitRect([id, sx, sy, sw, sh, dx, dy, dw, dh, keyed]) { const gl = this.gl, target = this.target; // Sizes are rectangle differences: an empty or inverted rectangle // comes as a huge unsigned size. DirectDraw rejects such blits; drawn, // one onto its target looped over 2^32 / BAND bands, a minute's freeze. if ((sw | 0) <= 0 || (sh | 0) <= 0 || (dw | 0) <= 0 || (dh | 0) <= 0) return; let src = this.textureOf(id) ?? this.targetOf(id); if (!src) throw Error('GPU blit from unknown surface ' + id); sx = (sx | 0) - (src.ox ?? 0), sy = (sy | 0) - (src.oy ?? 0); dx = (dx | 0) - target.ox, dy = (dy | 0) - target.oy; if (src !== target) return this.queueBlit(src, sx, sy, sw, sh, dx, dy, dw, dh, keyed); // Onto the same rectangle of itself: nothing changes. The resize patch // makes GfxEngine's copies from its landscape cache such copies, many // a frame; through the copy below each took a GPU copy and a draw, // and a crowded view stalled for seconds a frame. if (sx === dx && sy === dy && sw === dw && sh === dh) return; // Onto itself (scrolling): band by band through a copy, in the order of // memmove, so that no band reads what an earlier one wrote. this.flushBlits(); const band = sw === dw && sh === dh ? BAND : sh; if (!this.copy || this.copy.w < sw || this.copy.h < band) { if (this.copy) gl.deleteTexture(this.copy.texture); this.copy = {texture: gl.createTexture(), w: Math.max(sw, this.copy?.w ?? 0), h: Math.max(band, this.copy?.h ?? 0)}; gl.bindTexture(gl.TEXTURE_2D, this.copy.texture); gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, this.copy.w, this.copy.h, 0, gl.RGBA, gl.UNSIGNED_BYTE, null); glParameters(gl, nearest(gl)); } const down = dy > sy; for (let k = 0; k < sh; k += band) { const h = Math.min(band, sh - k), y = down ? sh - k - h : k; gl.bindTexture(gl.TEXTURE_2D, this.copy.texture); this.drawTexture = this.unitTextures[0] = undefined; gl.copyTexSubImage2D(gl.TEXTURE_2D, 0, 0, 0, sx, sy + y, sw, h); this.queueBlit(this.copy, 0, 0, sw, h, dx, dy + y * dh / sh, dw, h * dh / sh, keyed); this.flushBlits(); // before the next band copies what this one drew } } // A rectangle of a texture (pixels of src) into a rectangle of the target, // in the batch. queueBlit(src, sx, sy, sw, sh, dx, dy, dw, dh, keyed) { let unit = this.blitSources.indexOf(src); if (unit < 0 && this.blitSources.length === BLIT_UNITS || this.blits === BLIT_BATCH) { this.flushBlits(); unit = -1; } if (unit < 0) unit = this.blitSources.push(src) - 1; const source = unit * 4 + (src.argb ? 2 : 0) + (keyed ? 1 : 0), v = this.blitVertices; let o = this.blits++ * BLIT_FLOATS; for (let c = 0; c < 12; c += 2) { const cx = CORNERS[c], cy = CORNERS[c + 1]; v[o++] = dx + cx * dw; v[o++] = dy + cy * dh; v[o++] = (sx + cx * sw) / src.w; v[o++] = (sy + cy * sh) / src.h; v[o++] = source; } } // The batch's blits, as one draw. The blit state is set up when draws (or // anything else) changed it. flushBlits() { if (!this.blits) return; const gl = this.gl, {p, u, a} = this.blit; if (!this.blitReady) { this.unready(); this.blitReady = true; gl.useProgram(p); gl.bindBuffer(gl.ARRAY_BUFFER, this.blitBuffer); this.arrays(a.position, a.uv, a.source); gl.vertexAttribPointer(a.position, 2, gl.FLOAT, false, 20, 0); gl.vertexAttribPointer(a.uv, 2, gl.FLOAT, false, 20, 8); gl.vertexAttribPointer(a.source, 1, gl.FLOAT, false, 20, 16); if (!this.blitUnitsSet) { // uniforms stay with the program for (let i = 0; i < BLIT_UNITS; i++) gl.uniform1i(u['tex' + i], i); this.blitUnitsSet = true; } gl.uniform2f(u.size, this.target.w, this.target.h); gl.disable(gl.BLEND); gl.disable(gl.DEPTH_TEST); gl.disable(gl.SCISSOR_TEST); // a draw's viewport does not clip blits } // Each source on its unit; nothing on the others: a draw fails while // its program could sample a texture of the framebuffer it draws to. let active = 0; for (let i = 0; i < BLIT_UNITS; i++) { const src = this.blitSources[i], texture = src?.texture ?? null; if (this.unitTextures[i] === texture) continue; gl.activeTexture(gl.TEXTURE0 + i); active = i; gl.bindTexture(gl.TEXTURE_2D, texture); this.unitTextures[i] = texture; // Targets and the copy are always nearest and clamped; textures get it here. if (src && src !== this.copy && src.sampler !== 'target' && src.sampler !== 'blit') { glParameters(gl, nearest(gl)); src.sampler = 'blit'; } } if (active) gl.activeTexture(gl.TEXTURE0); // the rest binds on unit 0 gl.bufferSubData(gl.ARRAY_BUFFER, 0, this.blitVertices.subarray(0, this.blits * BLIT_FLOATS)); gl.drawArrays(gl.TRIANGLES, 0, this.blits * 6); this.blits = 0; this.blitSources = []; } } return {GpuRenderer}; })(); modules["webui/presenter.mjs"] = (() => { const {GpuRenderer} = modules["webui/gpu.mjs"]; // RGB565 stays packed until WebGL uploads it. No RGBA conversion or frame // buffer transfer to the main thread is needed. // https://developer.mozilla.org/en-US/docs/Web/API/WebGLRenderingContext/texSubImage2D function rgb565Source(memory, surface, scratch) { const {w, h, bits, pitch, bpp} = surface; if (bpp !== 16 || !Number.isSafeInteger(w) || !Number.isSafeInteger(h) || !Number.isSafeInteger(bits) || !Number.isSafeInteger(pitch) || w <= 0 || h <= 0 || bits < 0 || pitch < w * 2 || bits + (h - 1) * pitch + w * 2 > memory.byteLength) throw Error('Invalid RGB565 presentation surface'); const offset = memory.byteOffset + bits; if (pitch === w * 2 && !(offset & 1)) return new Uint16Array(memory.buffer, offset, w * h); // Unusual padded/unaligned surfaces use a reusable packed staging buffer. if (!scratch || scratch.length !== w * h) scratch = new Uint16Array(w * h); if (!((offset | pitch) & 1)) { for (let y = 0; y < h; y++) scratch.set(new Uint16Array(memory.buffer, offset + y * pitch, w), y * w); } else { const data = new DataView(memory.buffer); for (let y = 0; y < h; y++) for (let x = 0; x < w; x++) scratch[y * w + x] = data.getUint16(offset + y * pitch + x * 2, true); } return scratch; } // Shows frames on a canvas: RGB565 frames from guest memory, or render targets // of the GPU renderer (gpu.mjs), which it owns. A new presenter for another // canvas takes over the renderer of the one before (previous), whose context // must still be there; a lost context drops frames until it is restored. class Presenter { constructor(canvas, previous = null) { this.canvas = canvas; const gl = this.gl = canvas.getContext('webgl', { alpha : false, antialias : false, depth : false, stencil : false, premultipliedAlpha : false, preserveDrawingBuffer : false }); if (!gl) throw Error('WebGL is unavailable in the game worker'); canvas.addEventListener('webglcontextlost', event => { if (this.closed) return; event.preventDefault(); // so that it comes back this.lost = true; this.renderer?.loseContext(); console.warn('WebGL context lost: frames are dropped until it is restored'); }); canvas.addEventListener('webglcontextrestored', () => { if (this.closed) return; this.lost = false; this.setup(); if (this.renderer) this.renderer = new GpuRenderer(this.gl, this.renderer); }); this.setup(); this.scratch = previous?.scratch; if (previous?.renderer) this.renderer = new GpuRenderer(gl, previous.renderer); } // GL objects of presenting, for a new or restored context. setup() { const gl = this.gl; const shader = (type, source) => { const s = gl.createShader(type); gl.shaderSource(s, source); gl.compileShader(s); if (!gl.getShaderParameter(s, gl.COMPILE_STATUS)) throw Error('Presentation shader: ' + gl.getShaderInfoLog(s)); return s; }; const vertex = shader(gl.VERTEX_SHADER, ` attribute vec2 position; varying vec2 uv; void main() { gl_Position = vec4(position, 0.0, 1.0); uv = vec2(position.x * 0.5 + 0.5, 0.5 - position.y * 0.5); }`); const fragment = shader(gl.FRAGMENT_SHADER, ` precision highp float; varying vec2 uv; uniform sampler2D pixels; void main() { gl_FragColor = vec4(texture2D(pixels, uv).rgb, 1.0); }`); const program = gl.createProgram(); gl.attachShader(program, vertex); gl.attachShader(program, fragment); gl.linkProgram(program); if (!gl.getProgramParameter(program, gl.LINK_STATUS)) throw Error('Presentation program: ' + gl.getProgramInfoLog(program)); gl.deleteShader(vertex); gl.deleteShader(fragment); gl.useProgram(program); this.program = program; this.positions = gl.createBuffer(); gl.bindBuffer(gl.ARRAY_BUFFER, this.positions); gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([ -1, -1, 1, -1, -1, 1, -1, 1, 1, -1, 1, 1 ]), gl.STATIC_DRAW); const position = this.position = gl.getAttribLocation(program, 'position'); gl.enableVertexAttribArray(position); gl.vertexAttribPointer(position, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, this.texture = gl.createTexture()); gl.uniform1i(gl.getUniformLocation(program, 'pixels'), 0); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE); gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); gl.disable(gl.DITHER); this.width = this.height = 0; // of the canvas this.texWidth = this.texHeight = 0; // of the RGB565 frame texture: none until a frame needs it } // Free the WebGL context now (browsers allow only a few), for a new canvas. // A presenter taking over the renderer must be made first. close() { this.closed = true; this.gl.getExtension('WEBGL_lose_context')?.loseContext(); } // GPU commands (gpu.mjs): the first ones make the renderer. Without a // context, the renderer keeps account of them only. gpu(memory, words) { (this.renderer ??= new GpuRenderer(this.gl)).run(words, memory); } // The renderer changes GL state: take back what presenting needs. restore() { const gl = this.gl; gl.bindFramebuffer(gl.FRAMEBUFFER, null); gl.useProgram(this.program); gl.bindBuffer(gl.ARRAY_BUFFER, this.positions); for (let i = 0; i < this.renderer.maxArrays; i++) gl.disableVertexAttribArray(i); gl.enableVertexAttribArray(this.position); gl.vertexAttribPointer(this.position, 2, gl.FLOAT, false, 0, 0); gl.activeTexture(gl.TEXTURE0); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.disable(gl.BLEND); gl.disable(gl.DEPTH_TEST); gl.disable(gl.SCISSOR_TEST); gl.pixelStorei(gl.UNPACK_ALIGNMENT, 1); } size(w, h) { if (this.width !== w || this.height !== h) { this.gl.canvas.width = this.width = w; this.gl.canvas.height = this.height = h; } this.gl.viewport(0, 0, w, h); } present(memory, surface) { if (this.lost || this.closed) return; // dropped const gl = this.gl; if (this.renderer) this.restore(); const target = this.renderer?.takePresented(); if (target) { // A render target of the GPU, in place of the guest's pixels. The // RGB565 texture of the software frames before (menus) goes. if (this.texWidth) { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, 1, 1, 0, gl.RGB, gl.UNSIGNED_SHORT_5_6_5, null); this.texWidth = this.texHeight = 0; } this.size(target.w, target.h); gl.bindTexture(gl.TEXTURE_2D, target.texture); gl.drawArrays(gl.TRIANGLES, 0, 6); gl.bindTexture(gl.TEXTURE_2D, this.texture); gl.flush(); return; } const {w, h} = surface; const pixels = rgb565Source(memory, surface, this.scratch); if (pixels.buffer !== memory.buffer) this.scratch = pixels; this.size(w, h); const resized = this.texWidth !== w || this.texHeight !== h; if (resized) { gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, w, h, 0, gl.RGB, gl.UNSIGNED_SHORT_5_6_5, null); this.texWidth = w, this.texHeight = h; } gl.texSubImage2D(gl.TEXTURE_2D, 0, 0, 0, w, h, gl.RGB, gl.UNSIGNED_SHORT_5_6_5, pixels); gl.drawArrays(gl.TRIANGLES, 0, 6); if (resized) { const error = gl.getError(); if (error !== gl.NO_ERROR) throw Error('RGB565 presentation failed: WebGL error ' + error); } // Flush submits commands; it does not wait for the GPU (never gl.finish()). gl.flush(); } } return {Presenter,rgb565Source}; })(); modules["webui/audio.mjs"] = (() => { // Plays P_AUDIO commands the worker forwards with WebAudio. // MP3 files play in media elements so that the browser decodes them. const LATENCY = 0.08, STALL = 0.1; const AUDIO_PLAY = 1, AUDIO_SET = 2, AUDIO_STOP = 3, AUDIO_WAV = 1; // FNV-1a function audioKey(bytes) { let h = 0x811c9dc5 ^ bytes.length; const add = (from, to, step = 1) => { for (let i = from; i < to; i += step) h = Math.imul(h ^ bytes[i], 0x01000193); }; if (bytes.length <= 1 << 18) add(0, bytes.length); else add(0, 1 << 16), add(bytes.length - (1 << 16), bytes.length), add(1 << 16, bytes.length, 4093); return `${bytes.length}:${(h >>> 0).toString(16)}`; } const STEPS = [7, 8, 9, 10, 11, 12, 13, 14, 16, 17, 19, 21, 23, 25, 28, 31, 34, 37, 41, 45, 50, 55, 60, 66, 73, 80, 88, 97, 107, 118, 130, 143, 157, 173, 190, 209, 230, 253, 279, 307, 337, 371, 408, 449, 494, 544, 598, 658, 724, 796, 876, 963, 1060, 1166, 1282, 1411, 1552, 1707, 1878, 2066, 2272, 2499, 2749, 3024, 3327, 3660, 4026, 4428, 4871, 5358, 5894, 6484, 7132, 7845, 8630, 9493, 10442, 11487, 12635, 13899, 15289, 16818, 18500, 20350, 22385, 24623, 27086, 29794, 32767]; const ADJUST = [-1, -1, -1, -1, 2, 4, 6, 8]; // WAV file as an AudioBuffer, or null. function decodeWav(ctx, d) { const v = new DataView(d.buffer, d.byteOffset, d.byteLength), tag4 = p => String.fromCharCode(...d.subarray(p, p + 4)); if (d.length < 12 || tag4(0) !== 'RIFF' || tag4(8) !== 'WAVE') return null; let fmt = null, fact = 0, start = 0, bytes = 0; for (let p = 12; p + 8 <= d.length;) { const len = v.getUint32(p + 4, true), body = p + 8; if (tag4(p) === 'fmt ' && len >= 16 && body + 16 <= d.length) fmt = {tag: v.getUint16(body, true), channels: v.getUint16(body + 2, true), rate: v.getUint32(body + 4, true), align: v.getUint16(body + 12, true), bits: v.getUint16(body + 14, true)}; else if (tag4(p) === 'fact' && len >= 4 && body + 4 <= d.length) fact = v.getUint32(body, true); else if (tag4(p) === 'data') { start = body, bytes = Math.min(len, d.length - body); break; } if (len > d.length - body) break; p = body + len + (len & 1); } const {tag, channels, rate, align, bits} = fmt ?? {}; if (!start || (channels !== 1 && channels !== 2) || !align || rate < 3000 || rate > 768000) return null; let frames, perBlock = 0; if (tag === 1 && (bits === 8 || bits === 16)) frames = Math.floor(bytes / align); else if (tag === 0x11 && align > 4 * channels) { perBlock = (align - 4 * channels) * 2 / channels + 1; frames = Math.ceil(bytes / align) * perBlock; if (fact && fact < frames) frames = fact; } else return null; if (!frames) return null; const buffer = ctx.createBuffer(channels, frames, rate), out = [0, 1].slice(0, channels).map(c => buffer.getChannelData(c)); if (tag === 1) { for (let f = 0; f < frames; f++) for (let c = 0; c < channels; c++) { const i = start + (f * channels + c) * (bits / 8); out[c][f] = bits === 8 ? (d[i] - 128) / 128 : v.getInt16(i, true) / 32768; } return buffer; } // IMA ADPCM blocks: per channel a header (sample, step index), then 4 bytes // (8 samples) of each channel in turn. for (let b = 0, f = 0; f < frames && b < bytes; b += align, f += perBlock) { const len = Math.min(align, bytes - b), block = start + b, pred = [], index = []; if (len < 4 * channels) break; for (let c = 0; c < channels; c++) { pred[c] = v.getInt16(block + 4 * c, true), index[c] = Math.min(d[block + 4 * c + 2], 88); out[c][f] = pred[c] / 32768; } for (let p = 4 * channels, g = 0; p + 4 * channels <= len; g++) for (let c = 0; c < channels; c++, p += 4) for (let k = 0; k < 8; k++) { const nibble = d[block + p + (k >> 1)] >> (k & 1) * 4 & 15, step = STEPS[index[c]]; let diff = step >> 3; if (nibble & 4) diff += step; if (nibble & 2) diff += step >> 1; if (nibble & 1) diff += step >> 2; pred[c] = Math.min(Math.max(pred[c] + (nibble & 8 ? -diff : diff), -32768), 32767); index[c] = Math.min(Math.max(index[c] + ADJUST[nibble & 7], 0), 88); const at = f + 1 + g * 8 + k; if (at < frames) out[c][at] = pred[c] / 32768; } } return buffer; } class Sound { constructor() { this.ctx = new AudioContext({latencyHint: 'interactive'}); this.files = new Map(); // key -> AudioBuffer (WAV) or blob URL (MP3), for the page's life this.voices = new Map(); this.offset = null; // audio time minus guest time, in seconds } resume() { return this.ctx.resume(); } reset() { for (const v of this.voices.values()) this.stop(v, 0); this.offset = null; } // A voice: its source goes to a stereo input (mono sounds to both sides), // and each side through its own gain. voice(n) { let v = this.voices.get(n); if (!v) { const ctx = this.ctx, splitter = new ChannelSplitterNode(ctx, {numberOfOutputs: 2}); const input = new GainNode(ctx, {channelCount: 2, channelCountMode: 'explicit', channelInterpretation: 'speakers'}); const left = new GainNode(ctx), right = new GainNode(ctx), merger = new ChannelMergerNode(ctx, {numberOfInputs: 2}); input.connect(splitter); splitter.connect(left, 0).connect(merger, 0, 0); splitter.connect(right, 1).connect(merger, 0, 1); merger.connect(ctx.destination); this.voices.set(n, v = {input, left, right, source: null, element: null}); } return v; } // Runs fn at audio time `when` (for what cannot be scheduled). later(when, fn) { const ms = (when - this.ctx.currentTime) * 1000; if (ms > 1) setTimeout(fn, ms); else fn(); } // The source frame a playing WAV voice reaches at `when`. frameAt(v, when) { return v.frame + Math.max(0, when - v.started) * v.rate; } stop(v, when) { if (v.source) { v.source.onended = null; v.source.stop(when); v.source = null; } if (v.element) { const {element, node} = v; this.later(when, () => { element.pause(); node.disconnect(); element.removeAttribute('src'); element.load(); /* let the decoder go */ }); v.element = null; } } // A WAV voice from its frame at `when`. startBuffer(v, when) { const source = new AudioBufferSourceNode(this.ctx, {buffer: v.buffer, playbackRate: v.rate / v.buffer.sampleRate}); source.connect(v.input); source.start(when, v.frame / v.buffer.sampleRate); source.onended = () => { if (v.source === source) v.source = null; }; v.source = source, v.started = when; } command(c, bytes) { const ctx = this.ctx, now = ctx.currentTime; let when = c.at / 1e6 + this.offset; if (this.offset === null || when < now - STALL || when > now + LATENCY + STALL) { this.offset = now + LATENCY - c.at / 1e6; when = now + LATENCY; } when = Math.max(when, now); if (bytes && !this.files.has(c.key)) this.files.set(c.key, c.format === AUDIO_WAV ? decodeWav(ctx, bytes) : URL.createObjectURL(new Blob([bytes], {type: 'audio/mpeg'}))); const v = this.voice(c.voice); if (c.op === AUDIO_STOP || c.op === AUDIO_PLAY) this.stop(v, when); if (c.op === AUDIO_STOP) return; // Each side at full gain up to the centre. v.left.gain.setValueAtTime(c.volume * Math.min(1, 1 - c.pan), when); v.right.gain.setValueAtTime(c.volume * Math.min(1, 1 + c.pan), when); if (c.op === AUDIO_PLAY) { const file = this.files.get(c.key); if (!file) return; v.paused = false, v.frame = c.frame, v.rate = c.rate; if (c.format === AUDIO_WAV) { v.buffer = file; this.startBuffer(v, when); } else { const element = new Audio(file), node = ctx.createMediaElementSource(element); node.connect(v.input); v.element = element, v.node = node, v.buffer = null; element.addEventListener('loadedmetadata', () => { element.currentTime = c.frame / c.rate; }, {once: true}); /* A media element takes its time to start: it starts where it should be by then. */ element.addEventListener('playing', () => { const late = ctx.currentTime - when; if (late > STALL) element.currentTime += late; }, {once: true}); this.later(when, () => { if (v.element === element) element.play().catch(() => {}); }); } return; } // AUDIO_SET: rate and pause. if (v.buffer && (v.source || v.paused)) { if (v.source) v.frame = this.frameAt(v, when), v.started = when; if (c.paused && v.source) this.stop(v, when); v.rate = c.rate || v.rate; if (v.source) v.source.playbackRate.setValueAtTime(v.rate / v.buffer.sampleRate, when); else if (!c.paused && v.paused) this.startBuffer(v, when); } else if (v.element) { const element = v.element; this.later(when, () => { c.paused ? element.pause() : element.play().catch(() => {}); }); } v.paused = c.paused; } } return {audioKey}; })(); modules["webui/webplayer/installer.mjs"] = (() => { // Read-only lazy filesystem backed by the user's local GOG installer. async function sha256(bytes) { return Array.from(new Uint8Array(await crypto.subtle.digest('SHA-256', bytes)), b => b.toString(16).padStart(2, '0')).join(''); } async function openInstaller(file, index, progress = () => {}) { if (index.version !== 1) throw Error('Unsupported installer index'); if (file.size !== index.installer.size) throw Error(`This is not the supported installer. Select the GOG 2.50.1516 v2 (30536) .exe file. Expected ${index.installer.size.toLocaleString()} bytes; selected ${file.size.toLocaleString()} bytes.`); // Small identity probes avoid reading all 632 MiB before starting. // Reconstructed game files are also checked via SHA-256. const total = Object.values(index.files).reduce((sum, entry) => sum + entry.size, 0); const loaded = new Map(); let completed = 0; // Assets are lazy: count bytes across files without resetting at each file/hash. const report = (path, position) => { const previous = loaded.get(path) ?? 0; if (position > previous) { completed += position - previous; loaded.set(path, position); } progress(path, completed, total); }; report(index.installer.name, 0); for (const [offset, size, hash] of index.installer.samples) { const fileHash = await sha256(await file.slice(offset, offset + size).arrayBuffer()); if (fileHash !== hash) throw Error("The installer did not pass its identity check. Select GOG version 2.50.1516 v2 (30536), or download it again if the file is incomplete or damaged."); } const manifest = Object.fromEntries(Object.entries(index.files).map(([key, entry]) => [key, {path: entry.path, size: entry.size}])); async function source(path) { const entry = index.files[path.toLowerCase()]; if (!entry) throw Error(`File is not in the installer index: ${path}`); const result = new Uint8Array(entry.size); let position = 0; report(entry.path, 0); for (const [offset, packedSize, size] of entry.chunks) { const stream = file.slice(offset, offset + packedSize).stream().pipeThrough(new DecompressionStream('deflate')); const reader = stream.getReader(); let written = 0; try { for (;;) { const {value, done} = await reader.read(); if (done) break; if (written + value.length > size || position + value.length > result.length) throw Error(`Invalid decompressed size: ${path}`); result.set(value, position); position += value.length; written += value.length; report(entry.path, position); } } finally { await reader.cancel(); reader.releaseLock(); } if (written !== size) throw Error(`Truncated installer chunk: ${path}`); } if (position !== result.length || await sha256(result) !== entry.sha256) throw Error(`Installer file checksum failed: ${path}`); return result; } return {manifest, source}; } return {openInstaller}; })(); modules["webui/webplayer/config.mjs"] = (() => { // Browser defaults. Persisted changes made by the game override these. const config = { 'config/gamesettings.cfg': `[GAMESETTINGS] { AILevel = 0 BorderScroll = 0 ChatMessageFilter = 1 ExtendedTooltip = 1 Filtering = 1 Fullscreen = 1 LandscapeHardware = 1 MP3UserFolder = 0 MsgHistory = 100 MsgLevelMask = -83886081 MusicEnabled = 1 MusicVolume = 100 ObjectHardware = 1 PlayerName = "Player" PopupAllMsgs = 0 Screenmode = 3 ScrollStepValue = 10 SoundFXEnabled = 1 SoundFXVolume = 100 TextureQuality = 1 Tutorial = 0 VoiceChatEnabled = 0 VoiceChatMicro = 100 VoiceChatVolume = 100 WebHelpMode = 0 WindowHeight = 600 WindowWidth = 800 } `, 'config/video.cfg': `[ADVGAMESETTINGS] { ForceBlit = 0 PureSoftwareMode = 0 ShowVideos = 0 } `, }; return {config}; })(); modules["webui/webplayer/storage.mjs"] = (() => { // Only changes are persisted; installer assets remain lazy and read-only. // File replacement is atomic and completes before the guest's close returns. async function openDatabase() { let db; try { db = await new Promise((resolve, reject) => { const request = indexedDB.open("settlers4-webplayer", 1); request.onupgradeneeded = () => { request.result.createObjectStore("files"); request.result.createObjectStore("dirs"); }; request.onsuccess = () => resolve(request.result); request.onerror = () => reject(request.error); }); } catch (error) { throw Error(`Cannot open saved-game storage: ${error.message}`); } db.onversionchange = () => db.close(); return db; } const transaction = (db, stores, mode, action) => new Promise((resolve, reject) => { let tx, result; try { tx = db.transaction(stores, mode); result = action(tx); } catch (error) { reject(error); return; } tx.oncomplete = () => resolve(result); tx.onabort = () => reject(tx.error ?? Error("Storage transaction aborted")); }); async function openStorage() { const db = await openDatabase(); try { const requests = await transaction(db, ["files", "dirs"], "readonly", tx => [ tx.objectStore("files").getAllKeys(), tx.objectStore("files").getAll(), tx.objectStore("dirs").getAllKeys(), ]); const [keys, values, dirs] = requests.map(request => request.result); const put = async (store, key, value) => { try { await transaction(db, [store], "readwrite", tx => tx.objectStore(store).put(value, key)); } catch (error) { throw Error(`Could not persist "${key}". Check available browser storage. ${error.message}`); } }; return { files: new Map(keys.map((key, i) => [key, values[i]])), dirs, write: (key, bytes) => put("files", key, bytes), mkdir: key => put("dirs", key, true), close: () => db.close(), }; } catch (error) { db.close(); throw Error(`Cannot read saved-game storage: ${error.message}`); } } async function storedFileUsage() { const db = await openDatabase(); try { const usage = {entries: 0, bytes: 0}; const dirs = await transaction(db, ["files", "dirs"], "readonly", tx => { const cursor = tx.objectStore("files").openCursor(); cursor.onsuccess = () => { const entry = cursor.result; if (!entry) return; usage.entries++; usage.bytes += entry.value?.byteLength ?? 0; entry.continue(); }; return tx.objectStore("dirs").count(); }); usage.entries += dirs.result; return usage; } finally { db.close(); } } async function clearStoredFiles() { const db = await openDatabase(); try { await transaction(db, ["files", "dirs"], "readwrite", tx => { tx.objectStore("files").clear(); tx.objectStore("dirs").clear(); }); } finally { db.close(); } } return {openStorage}; })(); modules["webui/webplayer/worker.mjs"] = (() => { const {Exit, Machine, MEMORY_SIZES} = modules["webui/platform.mjs"]; const {LiveInput} = modules["webui/input.mjs"]; const {Presenter, rgb565Source} = modules["webui/presenter.mjs"]; const {audioKey} = modules["webui/audio.mjs"]; const {openInstaller} = modules["webui/webplayer/installer.mjs"]; const {config} = modules["webui/webplayer/config.mjs"]; const {openStorage} = modules["webui/webplayer/storage.mjs"]; // d3d: the game's Direct3D renderer on WebGL (gpu.mjs), much faster than its // software renderer at large sizes but needing more memory; d3d=off forces // the software renderer. const patchesFor = hardware => `compat sound resize fixup_workshop d3d${hardware ? "" : "=off"}`; const sleep = ms => new Promise(resolve => setTimeout(resolve, ms)); let machine, input, engine, presenter, preparation, started = false; // The size of the presenter's canvas. Frames of another size wait for the page // to send a canvas of theirs: Safari keeps showing a transferred canvas at the // size it had when transferred, cropped and stretched, whatever it is resized to. let canvasSize; let memorySizes = MEMORY_SIZES; // The browser running out of memory (not the guest's heap: that is a guestenv // panic): the page can start over with less guest memory, if there is a size // below this one to try. const outOfMemory = error => !(error instanceof Exit) && (error instanceof RangeError && /memory|allocat/i.test(error.message) || /out of memory/i.test(error?.message)); function reportError(error) { console.error(error, machine?.recent); const size = machine?.mem?.length; const smaller = size && outOfMemory(error) ? memorySizes.filter(s => s < size) : []; postMessage({type: "error", text: error.message, details: error.cause?.message ?? "", retry: smaller.length ? {memorySizes: smaller, from: size} : null}); } async function prepare({cpu, canvas}) { // Compile without instantiating the engine or allocating game memory. try { engine = await WebAssembly.compile(cpu); } catch (cause) { throw Object.assign(new Error("Cannot compile WebAssembly engine: SIMD or bulk-memory support missing. This browser or device are likely too old."), {cause}); } if (!globalThis.crypto?.subtle) throw Error("Crypto API not supported by this browser!"); if (!globalThis.DecompressionStream) throw Error("Decompression Streams not supported by this browser!"); new DecompressionStream("deflate"); presenter = new Presenter(canvas); canvasSize = {w: canvas.width, h: canvas.height}; } onmessage = ({data}) => { if (data.type === "input") { if (input && ["move", "moveBy", "button", "wheel", "key", "resize"].includes(data.method)) { input[data.method](...data.args); } } else if (data.type === "canvas") { // The new presenter takes over the GPU renderer, then the old context goes. const old = presenter; presenter = new Presenter(data.canvas, old); old?.close(); canvasSize = {w: data.canvas.width, h: data.canvas.height}; } else if (data.type === "prepare" && !preparation) { preparation = prepare(data); preparation.then(() => postMessage({type: "prepared"}), reportError); } else if (data.type === "start" && !started) { started = true; play(data).catch(reportError); } }; async function play({file, index, guest, memorySizes: sizes, hardware = true}) { const patches = patchesFor(hardware); if (sizes) memorySizes = sizes; if (!preparation) throw Error("The game worker has not been prepared."); await preparation; let visible = false; const progress = (text, completed, total) => { if (visible) return; postMessage({type: "progress", text, completed, total}); }; const installer = await openInstaller(file, index, progress); // The game reads its configuration files with CRLF line ends only. const overrides = new Map(Object.entries(config).map(([path, text]) => [path, new TextEncoder().encode(text.replace(/\r?\n/g, "\r\n"))])); const manifest = {...installer.manifest}; for (const [path, bytes] of overrides) manifest[path] = {path, size: bytes.length}; const source = path => overrides.get(path.toLowerCase()) ?? installer.source(path); // LiveInput shares the existing clock and input queue, without recording. input = new LiveInput(patches, {clockAt() {}, eventAt() {}}); const audioSent = new Set(), cursors = new Set(); let width = 0, height = 0, cursorQueue = Promise.resolve(); const output = { present(surface) { if (surface.w !== width || surface.h !== height) { width = surface.w; height = surface.h; input.display(width, height); postMessage({type: 'display', w: width, h: height}); // the page sends a canvas of this size } if (surface.w !== canvasSize.w || surface.h !== canvasSize.h) return; // the last frame of the old size stays until then presenter.present(machine.mem, surface); // The game presents black frames before its first visible screen. // Keep the loading UI until content exists, without a GPU readback. if (!visible && rgb565Source(machine.mem, surface, presenter.scratch).some(pixel => pixel !== 0)) { visible = true; postMessage({type: "visible"}); } }, gpu: words => presenter.gpu(machine.mem, words), wait: us => input.aheadMs(us) > 1 ? sleep(input.aheadMs(us)) : undefined, pointer: (x, y) => postMessage({type: 'pointer', x, y}), cursor(kind, argb, w, h, hotX, hotY) { let rgba; if (kind === 2 && !cursors.has(argb)) { cursors.add(argb); rgba = new Uint8ClampedArray(w * h * 4); for (let i = 0; i < w * h; i++) { const v = machine.dv.getUint32(argb + i * 4, true); rgba.set([v >> 16 & 255, v >> 8 & 255, v & 255, v >>> 24], i * 4); } } cursorQueue = cursorQueue.then(async () => { let image = null; if (rgba) { const cursorCanvas = new OffscreenCanvas(w, h); cursorCanvas.getContext('2d').putImageData(new ImageData(rgba, w, h), 0, 0); image = new FileReaderSync().readAsDataURL(await cursorCanvas.convertToBlob()); } postMessage({type: 'cursor', kind, id: argb, image, hotX, hotY}); }).catch(error => postMessage({type: 'error', text: error.message})); }, audio(command) { let bytes = null; if (command.data) { command.key = audioKey(command.data); if (!audioSent.has(command.key)) { audioSent.add(command.key); bytes = command.data.slice(); } } postMessage({type: 'audio', command: {...command, data: null}, bytes}, bytes ? [bytes.buffer] : []); }, }; const storage = await openStorage(); machine = new Machine({manifest, source, input, output, patches, storage, log: text => console.debug(text)}); machine.dirs.add("save"); try { try { await machine.init(engine, guest, {memorySizes}); } catch (error) { if (error instanceof RangeError || /memory|allocat/i.test(error.message)) { const tried = memorySizes.map(s => s / 2 ** 20 + " MiB").join(", "); throw Object.assign(new Error(`The browser could not allocate the game's memory (tried ${tried}). Close other tabs/apps and retry, or use a device with more memory.`), {cause: error}); } throw error; } console.info(`Guest memory: ${machine.mem.length / 2 ** 20} MiB`); postMessage({type: "ready"}); await machine.run({yieldMs: 15}); } catch (error) { if (!(error instanceof Exit) || error.code !== 0) throw error; } finally { storage.close(); } postMessage({type: "exit"}); } return {}; })(); })();

The Settlers IV web player 1.2