Waaaaaaasm?

Valeriy Kuzmin

Lilt, 2019

Idea

JS Business logic

OMG, this part is so laggy!

Idea

JS Business logic

Fast and smart code written in C

WASM Applications

PDF Rendering

Working with images

Cryptography

Video processing

Fast serialization/Desirialization

Usage of Game engines in browser

Other languages but JS in browser

Browser in browser

Various math, sorting, brute-forcing problems

Databases inside the browser

Working with archives

Machine Learning

Downsampling JPEG

Very rough explanation

#0f0

#f00

#770

E = (A + B + C + D) / 4

JPEG

Canvas

JPEG

Canvas

canvas.width

Canvas

canvas.height

ctx.toDataURL

ctx.drawImage

JPEG

RGB

JPEG

RGB

libjpeg.decode

libjpeg.encode

stb resize

Wasm

Demo

(downsample)

Original

Chrome - canvas + sq=high

FF, IE - canvas

Wasm everywhere- laczos3

What's inside?

(and how to do it yourself)

jpegasm (JS)

libjpeg-9a (C)

stb_resize_image (C++)

libjpegasm.js

emscripten

libjpegasm.wasm

Modules

var encode_jpeg = Module.cwrap('encode_jpeg', 
    'number', ['number', 'number', 'number', 
    ...]);

int encode_jpeg(
    unsigned char* rgb_buffer, 
    unsigned int rgb_width, 
    unsigned int rgb_height, 
    ...);

Calling pure C from JS (cwrap)

C function declaration

JS call

EMSCRIPTEN_BINDINGS() {
    function("stbir_resize_uint8_generic", 
        optional_override(...) {
            ...marshalling magic...
        }
    }));
}

int stbir_resize_uint8(
    const unsigned char *input_pixels , 
    int input_w , int input_h , ...)

Calling C++ from JS (embind)

#include <emscripten.h>

...
float coef = stbir__filter_info_table[filter]
    .kernel((float)(out_last_pixel + 1) 
    + 0.5f - out_center_of_in, scale_ratio);

EM_ASM_({console.log('coef', $0)}, coef)

...

Calling JS from C/C++ (EM_ASM)

How to do it: summary