Валерий Кузьмин, СКБ Контур
Екатеринбург, DUMP 2018
https://github.com/malcoriel/wasm-workshop.git
+
npm/yarn install
npm/yarn start
затем
WebAssembly - это...
WebAssembly - это...
какой-то бинарный файлик с логикой, который
Применение - cpu/memory-bound задачи
Рендеринг PDF
Работа с изображениями
Криптография
Обработка видео
Сериализация и
десериализация xml, json
Игры
Запуск других языков
Браузер в браузере
Математика, переборы,
сортировки
Базы данных на клиенте
Работа с архивами
Machine Learning
Что интересного уже есть
Где мне это взять?
С++
wasm
JS
LLVM
emscripten
все руками
Нечто бинарное
Полезный код
API
emscripten
для Rust есть wasm-bindgen
для C++ embind
Что за emscripten?
подключаем emscripten-модуль
task1
создаем объекты Box2D
Ширина клетки - wallSize = 1 метр
Отступ (в клетках) слева - j
Отступ (в клетках) сверху - i
j = 2
i = 1
Искомые координаты (2.5, 1.5)
task2.1
создаем объекты Box2D
new Box2D.b2Vec2(x : number, y : number);
bodyDef.set_position(pos : b2Vec2)
new Box2D.b2PolygonShape();
shape.SetAsBox(
halfWidth : number,
halfHeight : number
);
bodyDef.set_type(Box2D.b2_dynamicBody);
body.CreateFixture(
shape : b2Shape,
density : number
);
anyEMCObj.__destroy__();
body
fixture
fixture
fixture
task2.2
рисуем спрайты на paper.js
yOffset=16
xOffset=0
80px
64px
dX
=
24
dY = 16
task3.1
рисуем спрайты на paper.js
const path = new Paper.Shape.Rectangle({
position: position,
size: new Paper.Size(xSize, xSize),
strokeColor: 'red',
}); // уже есть
new Paper.Group([path, raster]);
group.scale(scaleTo);
group.clipped = true;
task3.2
JS: garbage collected
WASM: all manual
(речь про кучу)
GC roots
business
logic
GC roots
business
logic
delete
b2Vec2
b2Body
X
Y
...
...
...
ptr
JS-обертка
это уже от emscripten
b2Body
...
...
...
ptr
JS-обертка
Module._free (ptr)
obj.__destroy__()
или
(emscripten)
(Box2D.wasm)
делаем игровую логику
task4.2
task4.1
malcoriel@gmail.com
malcoriel
http://bit.ly/wasm-at-dump2018
final