Последние месяцы я делаю 3D‑мир, который работает прямо в браузере — на Three.js: сцена, персонажи, сеть.
Самое неприятное в производительности браузерного 3D — не ошибки. Ошибку видно: она в консоли, у неё есть стек и виновник. А есть второй класс проблем: всё работает, ничего не падает, просто тормозит. Консоль чистая, кадры падают, и непонятно, с чего начинать.
Речь про Three.js, но большинство выводов переносится на любой WebGL‑стек.
Я делаю мобильное образовательное приложение. В какой‑то момент понадобилось объяснять пользователям сложные сценарии, где объекты двигаются по строгим формальным правилам, и объяснять не текстом, а видео. Любая неточная траектория или неверно анимированное действие на видео закладывает неверный паттерн. Я собрал для этого конвейер на Remotion и React Three Fiber.
Съёмка на реальных объектах. Нужны десятки роликов на разные сценарии, и каждый требует отдельной постановки. Для одного человека без бюджета на продакшн это не вариант.
Привет.
Я frontend-разработчик и большую часть времени работаю с интерфейсами. В какой-то момент мне стало интересно, можно ли на привычном для меня веб-стеке сделать не демо с вращающимся кубом, а законченную 3D-игру — с загрузкой сцены, управлением, звуком, меню, мобильной версией и публикацией на платформе.
Так появилась Taproom 8 — браузерная игра, в которой нужно искать аномалии в мрачном баре.
Играть: Taproom 8 в Яндекс Играх
Исходный код: GitHub
Ниже расскажу не столько о самой игре, сколько о том, как она устроена внутри.
В начале этого года я создал @colordx/core, самую быструю JS‑библиотеку для работы с цветом: парсинг различных форматов, конвертация в OKLAB/OKLCH, проверка попадания в P3-гамут и многое другое. Библиотека весит всего 7 КБ и не имеет внешних зависимостей. Высокую скорость обеспечили оптимизации под V8: мономорфизм, скрытые классы, ноль лишних аллокаций.
Меня не устраивало, что мой мини-ПК на Windows 11 с AMD Ryzen 7 7735HS (8 ядер, 16 потоков) и 32 ГБ DDR5 (в одноканальном режиме) компилирует WebGL для яндекс игр в полтора раза дольше, чем MacBook Air M1 с 16 ГБ.
Эта статья о том, как получить двойную скоростью без апгрейда комплектующих! От создания флешки до первого билда с использованием tmpfs и символьных ссылок Symlinks (для одновременной работы над несколькими проектами).
Для миграции был выбран дистрибутив CachyOSЧитать полностью »
Уж казалось бы, онлайн гляделок dxf — пруд пруди. Но кто сталкивался с удивительным форматом dxf, знают — сколько вьюеров, столько и вариантов отображения. К тому же, большинство таких гляделок используют бэкенд для рендера. Но зачем, неужели так сложно отобразить 2D‑чертёж в браузере? Насколько это может быть сложно?
Привет. Я пресс атташе команды ГИГАХРУЩ — браузерный survival horror / ARPG shooter про вылазки внутри безграничной бетонной структуры.
Да, звучит как питч из папки после этого меня точно забанят, поэтому начну с технической части. Это не Unity WebGL, не Phaser, не Godot export, не React‑обвязка вокруг canvas и не набор купленных ассетов. Игра собрана как один браузерный билд на TypeScript/Vite, WebGL/canvas, процедурных текстурах, процедурных спрайтах, процедурном звуке и плоских структурах данных.
Хочу рассказать о генераторе GLSL-кода для WebGL, позволяющем писать шейдеры буквально на JavaScript с некоторыми условностями, используя все удобства IDE, такие как рефакторинг, подсветка синтаксиса, автокомплит и проверка на ошибки, а в математических выражениях использовать обычные JS операторы: +, -, *, /, =, +=, -=, *=, /=, ++, --.
Сразу приведу пример рабочего кода, чтобы было понятно, о чем идет речь:
Читать полностью »