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

В браузерном эксперименте на 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 есть код схемы, обработка зажатых объектов и варианты столкновений для тайлового платформера.

С днем программиста, коллеги!

Желаем, чтобы код компилировался с первого раза, баги находились до релиза, а таски «на пять минут» действительно занимали пять минут. 

И конечно, пусть в жизни будет больше приятных сюрпризов — один из них мы уже подготовили. Скорее переходите по ссылке, трясите коробку и забирайте свой подарок ко Дню программиста: https://tprg.ru/8c1C

Как собрать орбитальную камеру в 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. Разбор пригодится, если хотите реализовать управляемую процедурную генерацию и понимать, почему тайл сокращает варианты вокруг.

Как убрать задержку управления с помощью предсказания на клиенте

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

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

В разборе Габриэля Гамбетты есть схемы с задержкой 100 и 250 мс и важная граница: эффект атаки можно показать сразу, но здоровье противника лучше менять только после ответа сервера.

Как рассчитать поле зрения и освещение на 2D-карте

В разборе Red Blob Games показан алгоритм для стен из отрезков. Лучи направляются к началу и концу каждой стены, а ближайшие пересечения задают треугольники.

Эффективная версия сортирует концы стен по углу и поворачивает луч на 360°, сохраняя стены на его пути. При смене ближайшей стены начинается новый треугольник. Их объединение даёт область, видимую из выбранной точки.

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

Как создать эффект текущей жидкости в Unity с картой течения

Для эффекта воды, грязи или лавы физическая симуляция не нужна. В уроке для Unity 2017.4.4f1 текстуру смещают по UV, а карта течения задаёт направление и скорость для участков поверхности.

Карта хранит двумерный вектор в красном и зелёном каналах. Шейдер переводит значения 0…1 в −1…1 и вычитает из UV вектор, умноженный на время. Участки деформируются по-разному, поэтому материал не выглядит жёстко сдвигаемой плоскостью.

Чтобы растяжение не копилось, прогресс берут из дробной части времени и сбрасывают раз в секунду. Переход маскируют: перед сбросом цвет умножают на коэффициент, падающий до нуля, после него коэффициент растёт. В уроке Catlike Coding есть код шейдера, импорт карты без sRGB для хранения векторов и разбор артефактов DXT1.

Как собрать систему сохранений мира на C++ в Unreal Engine

Для каждого нужного актора система хранит имя, Transform с координатами, поворотом и масштабом, а также массив байтов. Unreal Engine записывает в него только поля с UPROPERTY(SaveGame), а интерфейс отсекает ненужные статичные акторы.

При загрузке система находит актор по имени, возвращает его положение и значения полей, затем вызывает OnActorLoaded для восстановления анимации и другого поведения. Для объектов, созданных во время выполнения, автор предлагает стабильный FGuid: их имена могут меняться. Данные игроков хранятся отдельно и связываются с уникальным ID, чтобы вернуть прогресс после повторного входа на сервер.

Разбор с полным исходным кодом показывает эту архитектуру на костре-сейвпоинте в духе Dark Souls: сохраняются состояние сундука, положение предметов и накопленные кредиты.

Как в Godot 4.3 автоматизировали синхронизацию GPU

В Vulkan GPU может завершать команды не в порядке отправки. Разработчик расставляет барьеры: задаёт, какая работа должна закончиться до следующей. Старый RenderingDevice без точной маски задерживал всю последующую работу и создавал лишние барьеры.

Технический разбор Godot Engine описывает новую схему: движок автоматически строит граф зависимостей без циклов между пакетами отрисовки и вычислений. Код уже находился в основной ветке и предназначался для Godot 4.3. Проекты менять не требовалось, а методы RenderingDevice стали запрашивать меньше данных.

Для систем частиц на GPU ожидалось особенно заметное ускорение, для сцен с постобработкой: сокращение времени кадра примерно на 5–15%. Статья вышла в феврале 2024 года, детали API стоит сверять с документацией.