WebAssembly *

Вращения в трёхмерном пространстве встречаются практически в любой задаче компьютерной графики, от игровых движков до WebGL‑приложений.

В статье разбираю, как описываются повороты с помощью матриц и кватернионов, почему оба подхода задают одни и те же преобразования и в чём заключаются преимущества кватернионов на практике.

На примере демонстрационного проекта на Rust, WebAssembly и ThreeJS рассматриваю связь между осью вращения, матрицами поворота, комплексными числами и кватернионами, а также показывается, как эти математические конструкции используются для вращения реальной 3D‑модели.

TL;DR. Две нейросетевые задачи — удаление фона (ONNX Runtime Web + модель silueta) и замазывание лиц (MediaPipe Tasks Vision + BlazeFace) — запущены полностью на клиенте: ни один пиксель не уходит на сервер. Ниже — почему «в браузере», какие модели выбраны и почему, как тянуть 43-мегабайтную модель с прогресс-баром, почему лица лучше пикселизировать, чем размывать, и подробный разбор бага, на который я убил вечер: Service Worker, кэширующий .mjs/.wasm, ломает dynamic import() с ошибкой «Failed to fetch dynamically imported module».

Всем привет! Я решил наконец то сам сделать пост на хабре. Обычно о всех моих веб проектах и команды DosZone Team пишет здесь многоуважаемый @denis-19, за что ему огромное спасибо! Ведь нам просто лень или не хватает на это времени. И так! После шутера Blood мне было интересно попробовать также портировать Redneck Rampage как раз на основе того, что я уже сделал. Было ошибочно так думать, потому что RR в отличие от NBlood оказался совершенно на другом движке - RedNukem, и пришлось начинать всё с нуля. Да и сложность повысилась и всё это заняло в два раза больше времени, чуть больше недели.

Мы были двумя 16-летними студентами колледжа, чья программа безнадёжно отставала от индустрии. Пока на парах проходили технологии пятилетней давности, реальный мир уже жил в экосистеме React, Next.js и WebAssembly. Пришлось учиться самим — по вечерам разбирая современный стек и споря об архитектуре. Эта тяга сподвигла нас создавать не абстрактные проекты для портфолио, а реально полезные инструменты, которыми хочется пользоваться каждый день.

Так четыре года назад родился наш проект — 167 утилит и 8 интерактивных песочниц в одном сервисе. Форматтеры, конвертеры, генераторы паролей и UUID, DevOps-конфиги, шпаргалки и песочницы для Python, SQL и Bash. Всё сделали прямо в браузере, без сервера.

Рассказываем как это было.

Инструмент интервального повторения заметок Obsidian должен использовать современный алгоритм, работать локально с заметками как есть (без переписывания в карточки).

Существующие в Obsidian плагины останавливаются на алгоритме SM-2 образца 1987 года.

Альтернативные решения есть «где-то еще», вне свободного ПО, вне Markdown‑first архитектуры — привязаны к облаку или проприетарному формату.

Я написал свой, потому что не нашёл подходящего.

FSRS, вычислительное ядро на Rust, скомпилированное в WebAssembly, и SQL‑подобный синтаксис для табличной выборки.

В статье — архитектура с WebAssembly, собственный парсер, лексер, замеры производительности. Любые запросы обрабатываются в сотых долях секунды. Blazingly fast 🦀

Это техническая статья. Если хотите пошаговое руководство для пользователя — вот обзорная статья.

Привет! Я Софа, ведущий b2e дизайнер в Perfomance Lab, и я считаю, что внутренние продукты недооценены, а процесс их создания в корне отличается от b2c/b2b.

Сегодня речь пойдёт про последнее упомянутое решение — PWA-конструктор, который помогает нашим медиабаерам проверять свои гипотезы быстрее и создавать более 20 приложений каждый день. Я расскажу, зачем мы начали его делать и с какими сложностями столкнулись.

В статьях2021 года можно встретить довольно пессимистичный вывод: «ресурс окончательно уничтожил возможность сбора информации с помощью Selenium». Но, как оказалось, это не совсем так.

Сайт kad.arbitr.ru — предоставляет информацию о гражданских делах, в первую очередь данная информация интересна юристам. Также там можно найти информацию о начале\конце банкротства и много другой информации связанной с юридической составляющей нашей жизни как граждан данной страны. На практике часто возникает задача мониторинга состояния дел по заданному списку — допустим по ИНН или же по ФИО. Именно такая задача была поставлена предо мной, найти дело по ИНН (если оно существует) и открыть его карточку чтобы собрать информацию.

При первом знакомстве сайт выглядит довольно устаревшим — как и многие государственные сайты, тем не менее, первое впечатление бывает обманчиво, ведь тут достаточно неплохая защита от тех кто хочет собрать много информации автоматически. Далее разбор будет строиться по следующей схеме: простой способ сбора информации → анализ, почему он работает или нет и так далее.

Первое, что приходит в голову при решении задачи парсинга по конкретному полю — это использование API.

Возможны три варианта.

WebAssembly находится в разработке уже более 8 лет. Технология прошла долгий путь развития и недавно разработчики из Bytecode Alliance выкатили версию 3.0.

О WebAssembly уже много материалов, но сегодня нам важна сама суть. У нас есть возможность, воспользовавшись любым из доступных языков программирования, написать модуль с необходимой нам логикой и запустить в исполняемой среде браузера. Разработчики обещают: модули будут быстрее и безопаснее, чем JavaScript, а также созданные ранее технологии, наподобие asm.js.

На связи Борис Мещеряков, frontend-разработчик в ПСБ и чаще всего мне приходится работать с javascript-фреймворками - React, Angular и прочими. Узнав о WebAssembly, я какое-то время наблюдал за его развитием. Мне стало интересно, может ли новая технология помочь мне уже сейчас? Какие ее возможности существуют на данный момент и какие реальны в будущем?

Разберёмся вместе?

Около года назад моё желание кастомизировать десктопный клиент популярного музыкального сервиса привело меня в некое сообщество. Всё началось с попытки восстановить заброшенную тему «Blurity» после очередного обновления Electron-хоста, которое сломало все селекторы. Но проект быстро перерос рамки обычных правок CSS.

В этой статье я расскажу, как ChromaSync эволюционировал из простого визуального патча в полноценную инженерную систему — runtime-аддон со сложной архитектурой. Мы разберем «анатомию» плеера, создание декларативной системы из 70+ настроек и перенос тяжелой математики аудиореактивных эффектов в изолированное ядро на WASM. Это история о том, как 700 строк JavaScript превратились в 10 000, а обычная «разукрашка» — в оптимизированную экосистему, умеющую балансировать между визуальной насыщенностью и производительностью системы.

Перенес консольного приложения в формат, удобный к показу по ссылке:

переписал логику на Rust,

собрал в WebAssembly и завернул в статичную страницу с терминальным интерфейсом на чистом HTML/CSS/JS.

В статье разбираю практический пайплайн: экспорт функции из Rust в WASM (wasm_bindgen), инициализацию модуля в браузере через JS, вывод результата в DOM и публикацию через GitLab Pages. Отдельно показываю, как встроил .wasm в base64, чтобы страница работала даже без отдельной загрузки бинарного файла.

Это кейс про то, как быстро превратить небольшую CLI-логику без системных API в наглядное web-демо, которое открывается с любого устройства без установки.

Репозиторий: gitlab.com/Evgene-Kopylov/iching_wasm
Демо: i-ching-wasm-c50914.gitlab.io

Мы создали парсер openui‑lang на Rust и скомпилировали его в WASM. Логика была здравой: Rust быстрый, WASM в браузере даёт скорость, близкую к нативной, а наш парсер — разумно сложный, многоэтапный конвейер. Почему бы не захотеть его на Rust?

Но оказалось, мы оптимизировали не то, что нужно.

В какой-то момент я понял неприятную вещь: если твой канал связи живет по чужому настроению, политической погоде, сбою в чужом облаке или очередной внезапной любви регулятора к кнопке «запретить» — это не твой канал связи. Это аренда с правом внезапного выселения.

Мне эта модель быстро наскучила.

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

Всем привет. В ходе этого материала вы узнаете:

1. Как сделать простой рендер на c# в MonoGame

2. Что использовать, чтобы вызвать python из c#

3. Почему пункт 2 - это плохая идея

4. Как MonoGame игру сбилдить в web/html с помощью его форка KNI

Пристёгивайтесь, будет весело!

Привет, Flutter-разработчики! 👋

Февраль — это тот месяц, когда экосистема не просто жила, а перестраивалась. Два ключевых релиза, публичный вектор развития на 2026, неожиданный 3D-движок от Toyota и тонна полезных материалов!

Последние полгода ко мне приходили задачи, которые вынуждали покопаться в некоторых особенностях WebAssembly.

Это, в свою очередь, подтолкнуло меня покодить на Си (чего я не делал сто лет) всякое, ориентируясь на WASM.

А это уже натолкнуло меня на мысль: а не подойдёт ли связка JS+WebAssembly как инструмент для создания минифицированных проектов в духе демосцены?

Короче, хоть я к демосцене никаким боком, но что мешает мне написать игрульку в сайз-факторе 4K? Исключительно for fun.

Привет, Хабр! Я Паша, разработчик Gramax — Open Source платформы для управления документацией в подходе Docs as Code.

В прошлой статье я рассказывал о том, как мы переводили наше приложение с Isomorphic Git на libgit2, как засунули его в веб-версию приложения при помощи Emscripten и с какими трудностями столкнулись в процессе.

На этот раз — как мы оптимизировали хранение файлов ресурсов каталога (в большинстве случаев, изображений) при помощи Git LFS, тем самым ускорив его клонирование и синхронизацию.

Когда заходит разговор про WebAssembly, где-нибудь в начале дискуссии обычно появляется комментарий в духе «А что, собственно, произошло?»

Этот язык преподносили как нечто поворотное. Неужели это просто был яркий маркетинг? А может, очередной случай с обречённым на провал апплетом JVM?

И я хочу подойти к этой теме немного со стороны, так как подобные вопросы содержат ошибочные предположения, которые следует прояснить.

Привет, Flutter-разработчики! 👋
Январь выдался по-настоящему снежным и спокойным - идеальное время, чтобы подтянуть знания, разобрать отложенные статьи и обновить стек перед новым рабочим сезоном.

И этот месяц для нас особенный!

В этом посте будут объяснены две стратегии оптимизации WebAssembly, которые не так давно были реализованы в движке V8 и вошли в версию браузера Google Chrome M137. Речь пойдёт о спекулятивном встраивании call_indirect inlining и о поддержке деоптимизации в WebAssembly. В сочетании два этих приёма помогают генерировать более качественный машинный код, так как основаны на допущениях, которые строятся, исходя из обратной связи, поступающей от среды исполнения. Благодаря этому, WebAssembly выполняется быстрее, особенно это касается программ WasmGC. Например, проверив эти приёмы на наборе микробенчмарков, написанных на Dart, видим, что комбинация двух оптимизаций даёт ускорение в среднем более чем на 50%. В более крупных и реалистичных приложениях и на тех бенчмарках, которые рассмотрены ниже, достигается ускорение между 1% и 8%. Деоптимизации — также очень важная составляющая для дальнейшей оптимизации в будущем.

Современный фронтенд давно перестал быть просто "лицом" приложения. Мы переносим в браузер нейросети, обработку видео и криптографию. Но когда дело доходит до банальной аналитики файлов — например, локального парсинга тяжелого Excel или Parquet-файла и выполнения SQL-запросов по ним — мы часто упираемся в ограничения JS-библиотек или вынуждены гонять данные на сервер.

Команда r7-consult решила задачу радикально: мы взяли наш C++17 движок excel_loader, скомпилировали его в WebAssembly и получили возможность выполнять полноценный SQL по локальным файлам прямо в браузере.

В этой статье разберем архитектуру решения wasm-sqlite-database, посмотрим, как C++ код дружит с JS, и покажем, как превратить браузер в локальный ETL-инструмент.