Как приложение WebAssembly отображает свои родные вызовы Window / OpenGL / Vulkan на элемент canvas в DOM? - PullRequest
Новая
       48

Как приложение WebAssembly отображает свои родные вызовы Window / OpenGL / Vulkan на элемент canvas в DOM?

0 голосов
/ 21 января 2020

Я читаю о WebAssembly, и мне было любопытно, как перенести графическое программирование, такое как Vulkan или OpenGL, на элемент canvas. Документация длинная, и я думаю, что со временем это выясню, но мне было любопытно и не удалось найти ответ на месте.

Пока я знаю, что он может экспортировать функции в JS, а JS сделает грязную работу по манипулированию DOM как обычно.

Я мог бы написать WebGL напрямую, но это не моя точка зрения. Я видел игры, портированные на WebAssembly, и я хотел бы знать, как это работает. Как WebAssembly может визуализировать что-либо, если у него нет прямого доступа к DOM? Как правило, графические приложения используют внешний диспетчер окон, такой как GLFW или SDL , чтобы создать контекст окна для рисования ваших вещей.

Если я скомпилирую программу с использованием таких библиотек что ожидать запуска среды с некоторым объектом Window, как эти инструкции будут отображаться на холсте, если в DOM нет такой концепции? Нужно ли как-то адаптировать мою программу на C ++?

1 Ответ

0 голосов
/ 21 января 2020

ОК, получается, что ответ был на той же странице, что я читал , но немного дальше.

Ответ таков: Javascript «склеить» код для загрузки .wasm и преобразования собственных вызовов библиотеки в контекст DOM, но вам не нужно писать его вручную. Люди используют Emscripten , который включает эмуляцию файловой системы, портирование на самые популярные библиотеки мультимедиа, такие как SDL, и генерирует как код .wasm, так и его JS клеевой аналог.

Из Страница Web-сборки Mozilla :

Инструмент Emscripten может взять практически любой исходный код на C / C ++ и скомпилировать его в модуль .wasm, а также необходимый JavaScript «клей». код для загрузки и запуска модуля и документ HTML для отображения результатов кода.

В двух словах, процесс работает следующим образом:

  1. Emscripten first feeds C / C ++ в clang + LLVM - зрелый набор инструментов компилятора C / C ++ с открытым исходным кодом, поставляемый, например, как часть XCode для OSX.
  2. Emscripten преобразует скомпилированный результат clang + LLVM в двоичный файл .wasm .
  3. Сама по себе WebAssembly в настоящее время не может напрямую обращаться к DOM; он может вызывать только JavaScript, передавая примитивные типы данных типа integer и float. Таким образом, чтобы получить доступ к любому веб-API, WebAssembly должна вызвать JavaScript, который затем выполняет вызов веб-API. Поэтому Emscripten создает код клея HTML и JavaScript, необходимый для этого.

Ограничения:

Emscripten поддерживает только полностью portable C и C ++, и вам нужно включить некоторые оптимизации в соответствии с Руководством по переносимости .

Кроме того, вам необходимо учитывать присущие веб-платформе ограничения и время выполнения JS, поэтому у вас нет прямого доступа к файловой системе и вы не можете выполнять синхронные (блокирующие) сетевые вызовы, как подробно в API Ограничения страница.

OpenGL & Vulkan:

В частности, для OpenGL, поскольку код в конечном итоге будет переводиться в изолированную среду WebGL, вам нужно ограничиться что предлагает WebGL (т.е. OpenGL ES 2.0). Согласно странице Optimizing WebGL , Emscripten преобразует ваш код в WebGL 1 по умолчанию, с меньшими возможностями и синтаксисом, более неприветливым, но поддерживаемым большим количеством платформ. Однако вы также можете настроить таргетинг на WebGL 2, который предлагает более приятный API и несколько аппаратных оптимизаций.

Для Vulkan в настоящее время нет встроенной поддержки, но в W3 C постоянно обсуждается публикация спецификации WebGPU . Существует также экспериментальная реализация WebGPU Rust от Mozilla, так что мы уже можем заглянуть в будущее.

...