Waaaaaaasm?

Валерий Кузьмин, СКБ Контур

FrontTalks, сентябрь 2017

Kontur.Recognition

Как?

Бизнес-логика на JS

OMG, тут все тормозит!

Как?

Бизнес-логика на JS

Шустрый код на C

WebAssembly - это...

Развиваемая W3C спецификация платформы
Работающая рядом с JS "виртуальная машина"
Текстовый и бинарный формат
Цель компиляции для С/С++/Rust

"asm.js на стероидах"

WebAssembly - это не...

Не замена Javascript
Не язык сам по себе
Не цель компиляции для TypeScript
Не цель компиляции для Java, C# *

* Вообще неправда, уже есть компиляторы

Применение WASM

Рендеринг PDF

Работа с изображениями

Криптография

Обработка видео

Сериализация и

десериализация xml, json

Использование готовых игровых движков

Запуск других языков

Браузер в браузере

Математика, переборы,

сортировки

Базы данных на клиенте

Работа с архивами

Machine Learning

Downsampling JPEG

На пальцах

#0f0

#f00

#770

A

B

C

D

E

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

Демо

(downsample)

Original

Chrome - canvas + sq=high

FF, IE - canvas

Wasm - laczos3

А что внутри?

(и как это повторить у себя в проекте)

jpegasm (JS)

libjpeg-9a (C)

stb_resize_image (C++)

libjpegasm.js

emscripten

libjpegasm.wasm

Модули

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, 
    ...);

C из JS (cwrap)

EMSCRIPTEN_BINDINGS() {
    function("stbir_resize_uint8_generic", 
        optional_override(...) {
            ...магия с маршалингом...
        }
    }));
}

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

C++ из 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)

...

JS из C (EM_ASM)

Резюме

собираем emscripten
cwrap для С, embind для С++
optional_override для сложных типов
EM_ASM в обратную сторону
Забудьте про GC, .delete() руками

Вместо заключения

Демо

(игра)

Полезности

Спасибо за внимание!

Вопросы?

malcoriel@gmail.com

malcoriel

http://bit.ly/wasm-ft