N64 WASM: Running GoldenEye and Mario 64 Natively in Your Browser
It started as a fever dream in the early 2010s: "What if you could play Super Mario 64 in a browser tab without plugins?" Back then, the answer was Java applets or clunky Flash wrappers—both slow, insecure, and unreliable. Fast forward to today, and the landscape has changed entirely. WebAssembly (WASM) has turned the browser into a legitimate gaming powerhouse, and the Nintendo 64—one of the most architecturally complex consoles of the 90s—is now running at full speed on desktops, tablets, and even high-end phones, all within a <canvas> tag.
This is the story of N64 WASM: the technology, the performance challenges, the legal gray areas, and where this is all heading.
N64 + WASM: Bringing Retro Console Emulation to the Web
The Nintendo 64 (N64) is a landmark console: early 3D graphics, memorable soundtracks, and games that still influence designers today. WebAssembly (WASM) gives developers a way to run near-native performance code inside browsers, unlocking a compelling platform for portable, low-latency N64 emulation and preservation. This post explains why combining N64 emulation with WASM matters, the technical approach, trade-offs, and a practical roadmap to ship a playable browser N64 experience.
2. JavaScript Glue Code (main.js)
This code bridges the gap between the user's browser and the WASM binary. It enables downloading the save state as a file.
// Assuming 'Module' is the Emscripten runtime object
const Module = window.Module;
/**
* Triggers a download of the current emulator state.
*/
function downloadSaveState()
try
// 1. Call the C function to get size
let sizePtr = Module._malloc(4); // Allocate space for size_t
let bufferPtr = Module.ccall(
'emulator_get_snapshot_data',
'number',
['number'],
[sizePtr]
);
if (!bufferPtr)
console.error("Failed to get snapshot data!");
Module._free(sizePtr);
return;
// 2. Read the size from memory
let size = Module.getValue(sizePtr, 'i32');
// 3. Copy data from WASM heap to a JS Array
let data = Module.HEAPU8.subarray(bufferPtr, bufferPtr + size);
// 4. Create a Blob and trigger download
let blob = new Blob([data], type: 'application/octet-stream' );
let url = URL.createObjectURL(blob);
let a = document.createElement('a');
a.href = url;
a.download = 'n64_snapshot.state'; // File extension
document.body.appendChild(a);
a.click();
// 5. Cleanup
setTimeout(() =>
document.body.removeChild(a);
URL.revokeObjectURL(url);
Module.ccall('emulator_free_buffer', 'void', ['number'], [bufferPtr]);
Module._free(sizePtr);
, 100);
console.log("Save state downloaded successfully! Size: " + size + " bytes");
catch (e)
console.error("Error saving state:", e);
/**
* Loads a save state from a file input.
* @param File file
*/
function uploadSaveState(file)
let reader = new FileReader();
reader.onload = function(e)
let arrayBuffer = e.target.result;
let byteArray = new Uint8Array(arrayBuffer);
// 1. Allocate memory in WASM heap and copy data into it
let ptr = Module._malloc(byteArray.length);
Module.HEAPU8.set(byteArray, ptr);
// 2. Call the C function to load the state
let result = Module.ccall(
'emulator_load_snapshot_data',
'number',
['number', 'number'],
[ptr, byteArray.length]
);
// 3. Free the memory
Module._free(ptr);
if (result === 0)
console.log("Save state loaded successfully!");
// Optional: Force a frame redraw or unpause the emulator here
else
console.error("Failed to load save state (Invalid file or version mismatch).");
;
reader.readAsArrayBuffer(file);
// Export functions to be used by UI buttons
window.downloadSaveState = downloadSaveState;
window.uploadSaveState = uploadSaveState;
The Pioneers: From Mupen64Plus to the Web
Most N64 WASM projects are not written from scratch. They are ports of established, open-source emulators—specifically Mupen64Plus and ParaLLEl.
The Future: WebGPU, Multithreading, and Beyond
N64 WASM is not a finished project—it’s an evolving standard. Three near-term innovations will push it into "replacement for native emulators" territory: