Maximillian Laumeister

XbrWasm

XbrWasm is a JavaScript library that leverages in-browser native code with background threading to perform real-time pixel art upscaling. To achieve this, it makes heavy use of WebAssembly and Web Workers. It uses the xbr scaling algorithm.

For an easy way to automatically scale images within a web page, see the Pixelated.js helper library.

XbrWasm is free for noncommercial use, and can be purchased for commercial use, subject to the license agreement.

Download XbrWasm

Real-time Video Live Demo

Original: 256x220

Upscaled: 1024x880

(Note: May not work with some mobile browsers. Other mobile browsers will pause the above video element if it scrolls off-screen, thus pausing the upscaled video.)

Real-Time Video Code

<script src="XbrWasm.js"></script>
<script>
    const currentScript = document.currentScript;
    function setup() {
        XbrWasm.ready.then(() => {
            let xbrwasm = new XbrWasm(myvid, 3); // Scaling factor of 3
            currentScript.parentNode.insertBefore(
                xbrwasm.destCanvas,
                currentScript
            );
            function drawFrame() {
                xbrwasm.draw();
                requestAnimationFrame(drawFrame);
            }
            drawFrame();
        });
    }
    if (myvid.readyState >= 2) setup();
    else myvid.addEventListener("loadeddata", setup);
</script>

Still Images Live Demo

Originals: 256x224

Upscaled: 1024x896

Still Images Code

<script src="XbrWasm.js"></script>
<script>
    const currentScript = document.currentScript;
    const imgs = document.querySelectorAll('.xbrscale');

    function setup(img) {
        let xbrwasm = new XbrWasm(img, 4); // Scaling factor of 4
        currentScript.parentNode.insertBefore(
            xbrwasm.destCanvas,
            currentScript
        );

        XbrWasm.ready.then(() => {
            xbrwasm.draw();
        });
    }

    imgs.forEach((img) => {
        if (img.complete) setup(img);
        else {
            img.onload = () => setup(img);
        }
    });
</script>

Disclaimers

The imagery on this page is copyright (c) Nintendo, and is used solely for demonstration purposes.