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.

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

See also: Online XBR Pixel Art Upscaler to upscale pixel art in the browser, and Pixelated.js for a JS library to automatically scale images on a web page.

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.