Сцена в Three.js может обновляться сама, пока вы правите модель в Blender

Подвинули объект в Blender, экспортировали glTF, перезагрузили страницу, увидели не тот масштаб, и всё сначала. Сама правка занимает минуту, круг вокруг неё — пять.

На Codrops Andrew Woan разбирает, как эту рутину снимает связка ИИ-агента и Blender MCP: сервера, через который агент выполняет команды прямо в Blender.

Что уже работает:
• аддон с вкладкой экспорта, после которого сцена в Three.js перезагружается сама (кейс Merci-Michel);
• синхронизация поворота, масштаба и перемещения в обе стороны, так что править можно там, где удобнее;
• инстансы из аддона Geoscatter и модификатора Scatter on Surface (Blender 5.0+) доезжают до Three.js через MCP.

К статье приложены демка и исходники. Пайплайн держится на Blender и glTF, поэтому переносится на любой рантайм, который грузит ту же сцену.

Порт движка ломается незаметно, но записанные демки ловят это бесплатно

Переносите движок на другой язык, и сложнее всего доказать, что геймплей остался прежним. Инженер перевёл doomgeneric на Rust утилитой c2rust: 73 095 строк за 23,2 секунды. Сам перевод занял секунды, дольше всего шла проверка.

Первый гейт — записи демок. Каждое игровое решение DOOM считает в фиксированной точке, поэтому одно расхождение рассинхронизирует воспроизведение: счётчик тиков перестаёт совпадать с записью.

Второй гейт: хеш каждого кадра, который движок отдаёт на экран. Из 11 113 кадров разошёлся один. Но контрольный прогон оригинального C-бинарника против самого себя дал то же расхождение на том же пикселе: DOOM читает один неинициализированный пиксель памяти, и перевод это повторил.

Отсюда приём: сначала прогоните эталон против эталона, иначе шум собственной сборки уедет в отчёт как чужой баг.

Пружинящую деформацию модели в Three.js собирают на костях, а не на симуляции мягкого тела

Гнущийся объект в вебе обычно делают либо запечённой анимацией, которая не отвечает на ввод, либо симуляцией мягкого тела, которая съедает кадр.

В демке Codrops Эйфелева башня работает катапультой: тянешь её мышью, она гнётся и копит энергию, отпускаешь — и шар летит через Париж. Гибкость держит библиотека Wiggle: в модель встраивают цепочку костей, каждая догоняет родительскую по пружинному закону, поэтому объект качается в ответ на действие игрока, а не проигрывает готовый клип.

Париж вокруг собран не руками: город стримится из Cesium ion, это фотореалистичные 3D-тайлы Google. На стороне Three.js остаются анимация, столкновения и приземление.

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

В Unity 6.3 LTS 3D-модели рендерятся прямо в 2D-сцене со спрайтами

Обычно 3D-модель босса или вращающегося меча для 2D-игры запекают в спрайтовую анимацию покадрово. В 6.3 2D Renderer в Universal Render Pipeline рисует Mesh Renderer и Skinned Mesh Renderer в одной сцене со спрайтами: модель остаётся моделью.

Под 2D-физику завезли Box2D v3 с низкоуровневыми API: многопоточный расчёт, более предсказуемый результат от запуска к запуску и визуальная отладка коллайдеров в редакторе и рантайме.

А Shader Build Settings дают исключать и конвертировать ключевые слова шейдеров (по ним при сборке плодятся варианты) без единой строки кода, и Unity обещает заметно сократить время компиляции. Рядом Sprite Atlas Analyser: отчётом показывает, где атласы собраны неэффективно.

У 6.3 два года поддержки, и Unity советует начинать новые проекты на ней. Остальное собрано в разборе на GameFromScratch.

Движок на Vulkan с бинлесс-рендером и глобальным освещением пишет один человек, чтобы устроиться в геймдев

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

Spartan автор пишет в одиночку, и с 2021 года движок заметно оброс возможностями. Основной бэкенд Vulkan, DirectX 12 в работе, шейдеры общие на HLSL. Дизайн полностью бинлессный: материалы, источники света и сэмплеры лежат в общих массивах, и шейдер берёт их по индексу вместо пересвязывания дескрипторов на каждую отрисовку.

Сверху глобальное освещение в реальном времени на FidelityFX Brixelizer, экранные тени по методу Bend Studio из Days Gone, XeSS 2 и FSR 3 с динамическим разрешением, а на видеокартах AMD breadcrumbs, помогающие найти, на чём упал GPU. Остальное перечисляет обзор GameFromScratch.

Плоские нити не ловят свет, но в WebGPU их можно сделать объёмными

Светящаяся линия в трёхмерной сцене быстро выдаёт плоскую основу: на ней нет блика, а освещение не меняется по ширине. У ленты meshline причина в устройстве геометрии. Пары вершин раздвигаются уже в экранных координатах, лента всегда повёрнута к камере, поэтому у неё нет поверхности с нормалью, на которую может подействовать свет.

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

Для эффектов в three.js граница практичная: meshline подходит экранным штрихам, а для нитей, которые должны ощущаться частью освещённой сцены, нужны трубки.

Листву в path tracing больше не надо прореживать ради фреймтайма

Каждое дерево, которое качается на ветру, заставляет пересобирать структуру ускорения лучей, поэтому в трассируемых сценах растительность режут первой. На GDC 2026 в RTX Mega Geometry показали систему листвы на секционированных структурах ускорения: они разбиты на части, которые обновляются независимо, и анимация задевает не всю сцену. Листва целиком остаётся в трассировке пути, а CD PROJEKT RED планирует применить это в «Ведьмаке 4».

Что ещё приехало из анонсов NVIDIA:
• ReSTIR PT в RTX Dynamic Illumination: точные зеркальные отражения;
• Linear Swept Sphere в RTX-ветке Unreal Engine 5.7: волосы трассируются попрядно;
• Advanced Shader Delivery: скомпилированные шейдеры приезжают вместе с загрузкой игры, и стоттеров на компиляции в рантайме больше нет.

Ветка UE 5.7 вышла в марте, остальные SDK лежат в RTX Kit.

Если вы несли мобильную игру в Supersonic, издатель у вас поменялся

Unity продала издательский бизнес Supersonic студии Tripledot Studios за $40 млн, о сделке объявили в начале августа. Вместе с бизнесом переходят продуктовая команда, SDK и технология автоматической закупки пользователей: то, чем издатель разгоняет игру после софт-лонча. Supersonic будет работать рядом с Lion Studios, собственным издателем Tripledot.

Аргумент покупателя: ИИ сделал игры быстрее и дешевле в производстве, но не сделал проще их запуск. Узкое место переехало из сборки в вывод на рынок, и $40 млн Tripledot платит именно за эту часть цепочки, объясняет сооснователь компании Лиор Шифф.

Для инди это меняет адрес, но не расклад: билд вы соберёте и вдвоём, а закупку трафика на миллионы игроков всё так же берёте у чужой компании. Вы бы отдали проект издателю ради трафика или тянули бы его сами?

Сотни стеклянных карточек уложились в один рендер-проход

В браузерном эксперименте на Three.js каждая карточка — плоская сетка. Скругления, фаска и преломление рассчитываются в материале, который смещает выборку из видеотекстуры: изображение будто проходит через стекло. Сцена на WebGPU обходится без освещения, постобработки и промежуточных буферов.

Бесконечность тоже имитируется. Карточка, ушедшая за край, переносится на противоположный, а сетку размещают на большой сфере. Наклон и уменьшение элементов по краям создают глубину без бесконечной геометрии.

В разборе Codrops есть код на TSL, языке шейдеров Three.js, расчёт нормалей из карты высот и настройка числа выборок под мощные и мобильные графические процессоры. Приём можно примерить к меню выбора уровней и галереям с десятками анимированных элементов.

Первый кадр на WebGPU пришлось ждать почти 20 секунд

В веб-проекте Cerebrium одна область рендеринга содержала несколько окружений со своими материалами, частицами, светом и постобработкой. Перед стартом Three.js обходил графы узлов на TSL, языке описания шейдеров Three.js, собирал из них шейдеры и компилировал графические конвейеры. На эталонной машине эта подготовка занимала почти 20 секунд, хотя после запуска производительность рендеринга проблемой не была.

Проверяйте два этапа отдельно: скорость уже запущенного рендера и время до первого кадра. В насыщенной сцене стоит отдельно профилировать сборку шейдеров и создание конвейеров до показа изображения.

В разборе Codrops есть весь путь выбора между WebGPU и WebGL, устройство нескольких окружений в одном холсте и объяснение, почему более чистой архитектуры оказалось недостаточно.

Прокрутка может переключать 3D-сцены без разрыва рендера

Shader Development Studio собрала почти весь сайт внутри HTML-холста. Three.js рендерит 3D-сцены, React Three Fiber описывает их компонентами, а язык материалов TSL компилируется и для WebGPU, и для WebGL. Так студия сохраняет совместимость со старым графическим API, не отказываясь от нового.

Интерфейс тоже рисуется внутри Three.js через изменённый @pmndrs/uikit, поэтому проходит через ту же постобработку, что и сцены. Плавную прокрутку ведёт доработанная библиотека Lenis: она фиксирует переходы между главным экраном и разделом работ.

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

Настройте синусоиду тремя параметрами

Если движение объекта уже задано синусоидой, размах меняет коэффициент A. При A=2 значение становится вдвое больше в обоих направлениях.

За скорость повторения отвечает w в sin(wx). Базовый период равен 2π; при w=2 он сокращается до π, поэтому цикл проходит вдвое быстрее. Для нужного периода p используйте w=2π/p.

Фаза θ задаёт точку начала цикла, не меняя размах или частоту. В примере sin(x+π/2) синусоида сразу оказывается на положительном пике и сдвигается влево на π/2; отрицательная θ сдвигает её вправо.

В разборе Eli Bendersky параметры можно покрутить в интерактивной демонстрации. Если синусоида уже задаёт колебание объекта, камеры или числового параметра шейдера, меняйте A, w и θ по отдельности: так видно, что отвечает за размах, темп и стартовую точку.

Как Celeste незаметно прощает неточный ввод

Celeste остаётся сложной, но управление ощущается отзывчивым: разработчики расширяют окна времени и позиции в пользу игрока. После схода с края прыгнуть можно ещё несколько мгновений. Зажатая перед приземлением кнопка срабатывает точно в кадр касания. У вершины прыжка гравитация вдвое слабее, пока кнопка нажата, поэтому есть время поправить траекторию.

При ударе головой об угол Мэдлин сдвигают в сторону, а боковой рывок у края поднимает её на платформу. Импульс движущейся платформы хранится несколько кадров после остановки.

Принцип для разработчика: немного расширить допуски и незаметно помочь игроку выполнить задуманное действие. В авторском разборе Celeste & Forgiveness собраны десять приёмов, включая прыжки от стены и возврат выносливости при поздней смене направления.

Как читать ввод геймпада в JavaScript и находить дрейф стиков

Gamepad API прост, но первая проверка может объявить неисправный контроллер здоровым. Chromium держит значение оси на нуле, пока хотя бы раз не увидит её около центра: по модулю меньше 0,1. Поэтому сильный дрейф может оставаться скрытым сколько угодно.

Есть и вторая ловушка: navigator.getGamepads() возвращает снимок состояния. Его нужно вызывать заново в каждом кадре requestAnimationFrame, а пустые ячейки массива пропускать.

Я сохранил практический разбор freeCodeCamp как чеклист для браузерного тестера. После подключения попросите пользователя провести стики через центр, дождитесь ненулевого значения каждой оси и только затем ищите дрейф. Без контроллера опрашивайте API редко, после подключения переходите к каждому кадру.

Как устроена физика Celeste и TowerFall

В Celeste и TowerFall физика построена на двух классах. Solid описывает геометрию уровня, Actor отвечает за подвижные объекты. Коллайдеры прямоугольные, их координаты и размеры целочисленные.

Actor накапливает дробную часть перемещения, округляет остаток, затем идёт по одному пикселю и перед каждым шагом проверяет препятствие. При столкновении движение останавливается и вызывается переданный обработчик.

Движущаяся платформа сначала запоминает пассажиров, затем сдвигается и расталкивает пересёкшихся с ней актёров. Остальных пассажиров она переносит на полное расстояние. В разборе физики Celeste и TowerFall есть код схемы, обработка зажатых объектов и варианты столкновений для тайлового платформера.

Как собрать орбитальную камеру в Unity без Cinemachine

В руководстве Catlike Coding автор собирает камеру от третьего лица вокруг сферы в Unity 2019.2.18f1. Позиция обновляется в LateUpdate после движения цели, а заданная дистанция сохраняется вдоль направления взгляда.

Если физика двигает сферу с фиксированным шагом, а кадры выводятся с другой частотой, камера дрожит. Интерполяция Rigidbody сглаживает движение. Радиус фокуса отсекает малые сдвиги, а экспоненциальное центрирование плавно возвращает цель в середину кадра независимо от частоты обновления.

Для ручной орбиты автор хранит вертикальный и горизонтальный углы, строит по ним поворот и берёт время без учёта замедления или паузы. Такую камеру можно понять и настроить под управление своего проекта.

Создаём match-3 на Unity с раздельной логикой и визуализацией

Туториал ведёт от пустой сцены к прототипу на Unity 2022.3.2f1: игрок меняет плитки местами и собирает линии минимум из трёх одинаковых элементов. Игровая логика отделена от представления, а Match3Skin связывает её с основным контроллером. Визуальную оболочку можно заменить, не переписывая правила.

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

В пошаговом разборе Catlike Coding есть код обработки перетаскивания, пула объектов и сериализуемой сетки. Получится крепкая основа для собственного прототипа match-3.

Как устроены автоматы состояний и паттерн State в игровой логике

У героини платформера появились прыжок, приседание и атака в падении. Каждое действие добавляло булевый флаг, а сочетания быстро стали источником ошибок: персонаж менял спрайт на стоящий прямо в воздухе или снова прыгал во время атаки.

Конечный автомат оставляет одно текущее состояние: героиня стоит, прыгает, приседает или атакует в падении. Кнопка запускает только разрешённый переход, остальные команды игнорируются. Даже перечисление со switch исключает невозможные сочетания и собирает обработку состояния в одном месте.

В главе Game Programming Patterns этот пример развивается от простого switch до паттерна State и более сложных автоматов. Подойдёт, если логика персонажа уже обрастает проверками.

Как A* ищет короткий путь по игровой карте

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

В примере проход по воде стоит в десять раз дороже прохода по траве. Представление карты тоже влияет на производительность: A* быстрее работает с меньшим числом узлов, хотя сетку проще использовать.

Интерактивный разбор Red Blob Games содержит анимации и код на Python: от очереди и восстановления пути до приоритетов и эвристики. Откройте его, если настраиваете навигацию персонажей и хотите увидеть, как граф и стоимость переходов меняют поиск.

Как Wave Function Collapse генерирует сетку из тайлов

Wave Function Collapse (WFC) строит генератор на решении ограничений. Каждая клетка сетки хранит набор допустимых тайлов, а правила задают, какие края соседних тайлов могут соприкасаться.

На каждом шаге алгоритм выбирает клетку с наименьшим числом вариантов, случайно оставляет в ней один тайл и пересчитывает соседей. Если выбор исключает часть комбинаций рядом, ограничения распространяются дальше по сетке. Случайность даёт разные результаты, но каждый из них должен соблюдать заданные правила.

В материале Wave Function Collapse Explained механику сначала разбирают на мини-судоку, а затем переносят на сетку 3×3. Разбор пригодится, если хотите реализовать управляемую процедурную генерацию и понимать, почему тайл сокращает варианты вокруг.