WebAssembly - новий стандарт, що дозволяє працювати веб-додатків на рівні, наближеному до нативним настільним додаткам. Так як стандарт новий, він активно розвивається. Саме через швидкого розвитку і старіння інформації початок роботи може виявитися досить важким.
Слід зазначити, що для написання уроку використовувалася операційна система Ubuntu 17.04, можливо, процес буде відрізнятися, якщо у вас інша операційна система. Передбачається, що ви можете бути знайомі з WebAssembly, тому все буде створюватися з нуля. У статті не буде акцентуватися увага на ES6 і Webpack. В Інтернеті ви зможете знайти більш розгорнуті керівництва, завдяки яким ви зможете детально ознайомитися з даними інструментами. Наприклад, в цій статті.
Прим. перев. Також пропонуємо вам прочитати нашу статтю про Webpack.
Установка набору інструментальних засобів
Для швидкої установки останньої версії LLVM просто завантажити та встановити портативний SDK Emscripten для Linux і OS X (emsdk-portable.tar.gz).
Вийміть архів і відкрийте термінал в папці.
Тепер залишилося трохи почекати, якщо, звичайно, у вас хороша швидкість завантаження.
Примітка SDK Emscripten надає великий набір інструментальних засобів (Clang, Python, Node.js і Visual Studio) в одному простому для установки пакеті з вбудованою підтримкою оновлень до нових версій SDK.
Тепер у нас є все необхідне для старту. Слід активувати SDK.
Тепер потрібно створити тестовий файл на C - counter.c:
Скомпілюйте це в код WebAssembly за допомогою команди emcc. яка використовується для виклику компілятора Emscripten з командного рядка:
Після компіляції вийшов файл counter.wasm.
При завантаженні цього коду на пробної HTML-сторінці у вас повинно відобразитися число 101 в консолі. Крім цього нічого іншого бути не повинно. У браузері Mozilla Firefox 53 у вас повинно з'явитися таке повідомлення:
Якщо щось пішло не так і ви відчуваєте, що даремно витрачаєте час, то подивіться обговорення на StackOverflow.
Тепер давайте повернемося до коду. Нам потрібно скомпілювати код на C з прапором оптимізації:
Тепер, коли ми виконуємо функцію new Counter (). wasm-loader викликає new WebAssembly.Instance (module, importObject);
- module є правильним зразком WebAssembly.Module;
- importObject - це значення wasm-loader за замовчуванням, яке з деяких причин не працює.
Але є рішення цієї проблеми:
Оптимізація движка гри
Ігровий движок має подвійний цикл, що повторюється на всій ігрової сітці під час кожної дії (кроку). Однак при збільшенні розміру сітки швидкість циклу сповільнюється. Спроба запуску основного ігрового движка як wasm-модуля буде хорошим вправою.
Що потрібно зробити:
Компіляція виконується наступним чином:
Emscripten не відображує функції мови C за замовчуванням (проте виключення мають місце бути), тому нам слід повідомити, що потрібно це зробити:
EMSCRIPTEN_KEEPALIVE робить саме те, що потрібно - експортує функції. Тепер можна викликати функцію module.asm._init (40,40). щоб задати розмір сітки 40 на 40 px, наприклад.
Примітка Доступ до незадокументованих властивостями може бути порушений в майбутньому.
Зараз, коли всі частини додатка зібрані разом, давайте протестуємо пробну версію.
тестування
40 мс, тепер запускається за
15 мс. Це, звичайно, не захмарні досягнення, але цього достатньо, щоб збільшити FPS з 18 до 40. Покращення були менш помітні в Firefox 53.
Ви можете поекспериментувати з налаштуваннями URL, а також є можливість перемикатися між двигунами для порівняння.
висновок
Почати працювати з WebAssemblyкажется складніше, ніж є, однак, все виглядає багатообіцяюче. Але все-таки потрібно оптимізація і доопрацювання, тому що доводиться використовувати SDK Emscripten як проміжний шар.
Представляємо вам список додаткових ресурсів, на яких ви зможете знайти інформацію по WebAssembly: