Создание эффекта холста в плазме с использованием WASM скомпилирована от ржавчины.
Я работал над проектами, чтобы лучше учиться и понимать Webassembly (WASM для коротких). Используя Реализация JavaScript эффекта плазмы в качестве «золотого стандарта» я изложил дублировать эффект в WASM. Для моей первой попытки я пошел. Вы можете прочитать об этом здесь Отказ Во время моих исследований я обнаружил, что Ржавчина это идеальный язык, чтобы попробовать, потому что это было Специально оптимизировано Чтобы построить модули WASM.
👀 Смотреть живую демонстрацию здесь 🔗. Смотрите полный исходный код здесь
Отказ от ответственности: Я не программистом в ветеране Rust, поэтому со временем я могу выяснить, что код может быть написан/из рентабельности лучше. Если я столкнулся с этим, я опубликую последующие выводы. Я приветствую ваши отзывы, если у вас есть опыт ржавчины.
Вооруженные моими одобрениями C и C ++, я отправился на изучение языка и мастера еще одним экспериментом.
Фрагмент ржавчины
Настройте окружающую среду
Существует несколько шагов для настройки среды для создания приложений ржавчины и специально целевая WebAssembly. Чтобы узнать, как я следовал за превосходной онлайн-книгой/учебником:
🔗 Введение в ржавчина и Webassembly
Я предлагаю вам начать там, и будет легче иметь смысл из движущихся частей в моем решении:
Иеремиликс/плазмазазмазнеть
Реализация эффекта плазмы с использованием Webassembly скомпилирована от ржавчины.
Это порт моего Идти
Реализация плазмы ржаветь. Использует Wasm-pack-шаблон
Отказ Осмотрите определение трубопроводов Azure для деталей построения.
Для полного прохождения читайте: Плазма получает ржавеесть: Еще один эксперимент Webassembly Отказ
Этот репозиторий постоянно построен и развернут с использованием бесплатных лазурных трубопроводов. Если вы заинтересованы в том, как он был настроен и сконфигурирован для автоматического создания и развертывания по низким ценам Azure Storage Static веб-сайты, читать Разверните WebAssembly из Github для Azure Stative Static Websies с лазурными трубопроводами Отказ
Внедрить код ржавчины
Основываясь на более ранних экспериментах, я решил создать данные для влияния плазмы в Rust, но визуализируйте его в JavaScript. К счастью, ржавчина имеет очень зрелую среду Webassembly с большим количеством поддержки для взаимодействия между двумя. Здесь я создаю структуру для удержания информации о цвете и данные, необходимые для эффекта плазмы. # [WASM \ _Bindgen]
Тег автоматически создает клей, необходимый для доступа к структурам из JavaScript.
Плазма
Структура содержит целевую ширину и высоту, синусоидальную таблицу, палитру, буфер, который подвергается воздействию плазмы на стороне JavaScript и поддерживает состояние велосипедирования через плазму с несколькими позиционными переменными. Реализация структуры раскрывает методы доступа к этим свойствам от JavaScript. Это включает в себя ширину, высоту и указатель в память, выделенную для удержания пикселей.
Если вы новичок в ржавее, обратите внимание, что нет необходимости в явном вернуть
утверждение. Значение в методе неявно возвращена.
Это код для генерации синевого стола.
Часть силы ржавчины – это то, как она обрабатывает резьбу и избегает конфликтов и половых условий. Переменные по умолчанию неизменны, так мусор
Ключевое слово необходимо, чтобы указать, что значение IDX
изменится. Код, итерат от 0 до 511 (конечный диапазон является эксклюзивным, началом включительно) и отображает значение формулы, которая генерирует информацию синуса. Он отличается как 32-битное целое число и Собирать ()
называется, чтобы превратить его в коллекцию ( Вектор
).
Примечание. Явный возврат основан на моих привычках с других языков, я мог бы упростить код, удалив несколько строк и неявно возвращающую таблицу.
Подобный ассортимент итератор используется для генерации данных палитры.
Последний кусок кода является галочка
Способ, который продвигается через синусную таблицу с каждым кадром. Как и другие эксперименты, которые я работал, этот код существенно создает буфер данных пикселей на основе текущего цикла.
Обратите внимание, что Я
передается с мутность
Потому что буфер будет обновлен. Сам буфер смещается, поскольку он построен.
Построить WASM
Установка, которую я упомянул ранее, создает среду, которая построит Webassembly и связанные с ними привязки JavaScript. Чтобы построить, просто выполнить:
Wasm-Pack Build
В корневом каталоге. Активы размещаются в PKG
подкаталог.
Первое, что я заметил, был размером. Мой эксперимент по ходу привел к 2 мегабайт .wasm
файл. Соответствующий файл ржавчины составляет всего 65 килобайт! Это огромное различие в размере, которая очень важно учитывать для приложений для потребителей.
Вторая вещь, которую я заметил, был PLASMA_WASM_RUST.JS
файл. Чтобы построить с GO, вы используете стандарт wasm_exec.js
Это копируется “как” для “для общих привязки. Окружающая среда Rust генерирует код, специфичный для вашего собственного приложения, включая привязки к способам и структурам, которые были явно открыты и помечены Wasm_bind.
.
Это делает невероятно легко подключить WASM в приложение JavaScript.
Веб-приложение
В www
Папка – это небольшое веб-приложение Node.js, которое используется для доставки проекта в браузеры. Он связан с активами из BASM Build и создаст распределение со всеми необходимыми вам файлами. Оболочка HTML содержит некоторую базовую стиль и бойную табличку для загрузки приложения. Все уникально содержится в тело
ярлык.
Файл Bootstrap импортирует index.js
Файл и генерирует дополнительный код для загрузки среды WASM, когда проект будет построен.
Настраиваемый код начинается, импортируя классы WASM для плазмы и управления памятью. память
Модуль очень важен … оставаться настроенными. Следующий код создает экземпляр структуры плазмы, захватывает ширину и высоту и настраивает холст.
Контур рендеринга вызывается для каждой кадра анимации (когда браузер готов к перекраску). Он продвигает синусную таблицу, затем вызывает метод, чтобы нарисовать его и повторять.
Наконец, чтобы «нарисовать» плазму, используйте следующий код.
Данные маршала между WASM и JavaScript часто включают в себя передачу копии данных. Webassembly выделяет блок линейной памяти для использования WASM-модулями, так почему бы не воспользоваться этим? память
Модуль позволяет прямому доступу к существующей памяти. Массив создается путем указывая прямо при памяти, выделенной WASM, передавая указатель на пиксельный буфер и размер данных. Затем этот буфер может быть передан «как есть» в данные изображения, которые нарисованы на холсте.
Заключение
После того, как этот эксперимент в Go и Rust, безусловно, мой любимый опыт был с ржавчиной. Как правило, так как мне нравится идти в качестве языка, инструменты для ржавчины и WASM невероятно зрелые, чтобы построить надежные приложения, и полученные модули упорядочены (даже не оптимизация размера WASM или сжимания). Я уверен, что все языки, которые поддерживают Webassembly, будут созревать и расти со временем. На данный момент, однако, мне может потребоваться потратить больше времени освоения языка ржавчины и изучения способов ввести некоторые показатели в приложениях JavaScript!
👀 Смотреть живую демонстрацию здесь 🔗. Смотрите полный исходный код здесь
С уважением,
Оригинал: “https://dev.to/jeremylikness/plasma-gets-rust-y-another-webassembly-experiment-10d2”