Рубрики
Без рубрики

Плазма получает ржавеесть: Еще один эксперимент по осмотр

Создание эффекта холста в плазме с использованием WASM скомпилирована от ржавчины. Я работал над проектом … Помечено с JavaScript, Web, Windassembly, Rust.

Создание эффекта холста в плазме с использованием 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”