Движок на C++20 с Vulkan, ECS и обработкой событий без блокировок
Аргументация автора против готовых движков конкретная: пустой стартовый проект в современном движке компилируется в сотни мегабайт бинарных зависимостей, а объектная иерархия вида Actor, Pawn, Character разбрасывает данные сущностей по куче и стабильно промахивается мимо кешей L1 и L2.
Eisen Engine отвечает на это архитектурой: явные абстракции рендера над Vulkan и OpenGL, система сущностей и компонентов с выравниванием под кеш-линию, диспетчеризация событий без блокировок и тик-цикл, рассчитанный на ИИ-нагрузку.
Разбор интересен как чертёж: видно, какие решения принимаются, когда за спиной нет чужого рантайма.
Аргументация автора против готовых движков конкретная: пустой стартовый проект в современном движке компилируется в сотни мегабайт бинарных зависимостей, а объектная иерархия вида Actor, Pawn, Character разбрасывает данные сущностей по куче и стабильно промахивается мимо кешей L1 и L2.
Eisen Engine отвечает на это архитектурой: явные абстракции рендера над Vulkan и OpenGL, система сущностей и компонентов с выравниванием под кеш-линию, диспетчеризация событий без блокировок и тик-цикл, рассчитанный на ИИ-нагрузку.
Разбор интересен как чертёж: видно, какие решения принимаются, когда за спиной нет чужого рантайма.
DEV Community
Building Eisen Engine: Architecture of a Custom C++20 Game Engine from Scratch (Vulkan, ECS & AI Subsystems)
An exhaustive architectural breakdown of building Eisen Engine in modern C++20: explicit Vulkan 1.3 rendering pipelines, cache-aligned ECS data locality, and embedded AI-native subsystems at 60 FPS.
❤3👎1
Физика, стеклянные деформации и процедурный звук в одном эксперименте на WebGPU
Франк Райтбергер с появлением
В сцене сходятся три вещи: физика, деформации стекла и процедурно генерируемый звук. Последнее в браузерных демках встречается редко, и именно связка звука с симуляцией отличает эксперимент от обычного шейдерного этюда.
Компактный образец того, на что уже сегодня годится WebGPU в связке с TSL, без разрастания в полноценный проект.
Франк Райтбергер с появлением
WebGPURenderer и TSL сознательно перевёл свои эксперименты на новый стек, чтобы публиковать их уже на современной технологии. «Садовая аномалия» один из них.В сцене сходятся три вещи: физика, деформации стекла и процедурно генерируемый звук. Последнее в браузерных демках встречается редко, и именно связка звука с симуляцией отличает эксперимент от обычного шейдерного этюда.
Компактный образец того, на что уже сегодня годится WebGPU в связке с TSL, без разрастания в полноценный проект.
Codrops
Garden Anomaly: A Tiny WebGPU and TSL Experiment | Codrops
A tiny WebGPU and TSL experiment, tinkering with physics, deformations, and procedural audio, all tied together inside a sphere to play with.
👍3❤1🤔1💋1
Forwarded from Zen of Python
EVE Online начала переезд на Python 3 после двух десятилетий на второй ветке
Под каждым прыжком через гейт, каждым ордером на рынке и каждым флитфайтом в EVE лежит очень много Python. Он держит New Eden больше двадцати лет, и теперь CCP объявила о начале перехода на третью ветку.
Формулировка успеха у команды показательная: миграция должна пройти совершенно незаметно, если не считать моментов, когда что-то начнёт работать глаже. Первые шаги уже выкачены на тестовый сервер Singularity.
Это редкий публичный кейс переезда живого продакшена такого возраста. Обещают в итоге более быстрый поиск багов, место под новые фичи и общее ускорение, но дорога, по их же словам, длинная.
Под каждым прыжком через гейт, каждым ордером на рынке и каждым флитфайтом в EVE лежит очень много Python. Он держит New Eden больше двадцати лет, и теперь CCP объявила о начале перехода на третью ветку.
Формулировка успеха у команды показательная: миграция должна пройти совершенно незаметно, если не считать моментов, когда что-то начнёт работать глаже. Первые шаги уже выкачены на тестовый сервер Singularity.
Это редкий публичный кейс переезда живого продакшена такого возраста. Обещают в итоге более быстрый поиск багов, место под новые фичи и общее ускорение, но дорога, по их же словам, длинная.
EVE Online
The Move to Python 3 Begins! | EVE Online
How do you migrate 2.4 million lines of code?
💊1
Unity расспросила инди-разработчицу, как она на самом деле пользуется Copilot
Своих ИИ-инструментов у Unity теперь хватает: ассистент прямо в редакторе и интеграции с привычным инструментарием вышли в бету. Тем интереснее, что компания отдельно поговорила про чужой инструмент.
Собеседница выбрана не случайно: Стейси Хаффнер была principal developer advocate в Microsoft, ведёт собственную инди-студию и больше десяти лет делает игры, а её опыт покрывает .NET, Xbox и Unity. То есть это практика, а не маркетинговая подводка к бете.
В разговоре пять приёмов, которыми она встраивает Copilot в свой процесс разработки игр. Примерить их стоит, если Copilot у вас уже открыт в проекте, но дальше автодополнения дело не идёт.
Своих ИИ-инструментов у Unity теперь хватает: ассистент прямо в редакторе и интеграции с привычным инструментарием вышли в бету. Тем интереснее, что компания отдельно поговорила про чужой инструмент.
Собеседница выбрана не случайно: Стейси Хаффнер была principal developer advocate в Microsoft, ведёт собственную инди-студию и больше десяти лет делает игры, а её опыт покрывает .NET, Xbox и Unity. То есть это практика, а не маркетинговая подводка к бете.
В разговоре пять приёмов, которыми она встраивает Copilot в свой процесс разработки игр. Примерить их стоит, если Copilot у вас уже открыт в проекте, но дальше автодополнения дело не идёт.
Unity
👎1
Точек от MediaPipe мало, чтобы натянуть шейдер на лицо игрока: нужна топология и проекция
Для аватара или AR-маски трекер отдаёт 468 точек в кадре, и на этом всё: ни граней, ни UV-развёртки, рендерить нечего.
Поверхность собирается отдельно: фиксированную топологию лица Google надо достать и натянуть на точки, а UV перенести с канонической модели. Дальше проекция обязана повторить то, что происходит с картинкой на экране: её зеркалят и обрезают под размер контейнера. Иначе меш разъезжается с видео, а текстура садится вверх ногами.
Второй источник проблем: распознавание и рендер идут по разным часам. Трекер пишет результат в изменяемую ссылку, а рендер мутирует существующий BufferGeometry, и 468 позиций не проходят через реактивность каждый кадр. В движке приём тот же: обновлять буфер вершин, а не пересобирать меш.
Разбор на Codrops идёт по шагам, вместе с настройкой GPU-делегата.
Для аватара или AR-маски трекер отдаёт 468 точек в кадре, и на этом всё: ни граней, ни UV-развёртки, рендерить нечего.
Поверхность собирается отдельно: фиксированную топологию лица Google надо достать и натянуть на точки, а UV перенести с канонической модели. Дальше проекция обязана повторить то, что происходит с картинкой на экране: её зеркалят и обрезают под размер контейнера. Иначе меш разъезжается с видео, а текстура садится вверх ногами.
Второй источник проблем: распознавание и рендер идут по разным часам. Трекер пишет результат в изменяемую ссылку, а рендер мутирует существующий BufferGeometry, и 468 позиций не проходят через реактивность каждый кадр. В движке приём тот же: обновлять буфер вершин, а не пересобирать меш.
Разбор на Codrops идёт по шагам, вместе с настройкой GPU-делегата.
👎2😇1
Заглавную тему DOOM сыграла схема из 555-х таймеров, в которой нет ни одной строчки кода
Когда в проекте играет зацикленный трек, за темп и высоту нот отвечает аудиодвижок. Автор собрал то же самое на россыпи микросхем, и разбор схемы на Hackaday читается как устройство трекера изнутри.
Первый 555 тикает чуть быстрее семи раз в секунду и задаёт темп. Двоичный счётчик с дешифратором превращают тики в 15 последовательных позиций: это шаги секвенсора. Диодная матрица хранит партитуру, каждый шаг замкнут на одну из шести нот. Дальше шаг подключает свою резисторную цепочку ко второму 555, а от номиналов зависит частота, на которой он пищит.
Полезно как схема мышления про процедурный звук: сетка времени, таблица нот, генератор тона. Чиптюн-саундтрек в вашем движке раскладывается на те же три части, и отлаживать его проще, когда видно, какая из них врёт.
Когда в проекте играет зацикленный трек, за темп и высоту нот отвечает аудиодвижок. Автор собрал то же самое на россыпи микросхем, и разбор схемы на Hackaday читается как устройство трекера изнутри.
Первый 555 тикает чуть быстрее семи раз в секунду и задаёт темп. Двоичный счётчик с дешифратором превращают тики в 15 последовательных позиций: это шаги секвенсора. Диодная матрица хранит партитуру, каждый шаг замкнут на одну из шести нот. Дальше шаг подключает свою резисторную цепочку ко второму 555, а от номиналов зависит частота, на которой он пищит.
Полезно как схема мышления про процедурный звук: сетка времени, таблица нот, генератор тона. Чиптюн-саундтрек в вашем движке раскладывается на те же три части, и отлаживать его проще, когда видно, какая из них врёт.
❤7
Сцена в 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, поэтому переносится на любой рантайм, который грузит ту же сцену.
Подвинули объект в Blender, экспортировали glTF, перезагрузили страницу, увидели не тот масштаб, и всё сначала. Сама правка занимает минуту, круг вокруг неё — пять.
На Codrops Andrew Woan разбирает, как эту рутину снимает связка ИИ-агента и Blender MCP: сервера, через который агент выполняет команды прямо в Blender.
Что уже работает:
• аддон с вкладкой экспорта, после которого сцена в Three.js перезагружается сама (кейс Merci-Michel);
• синхронизация поворота, масштаба и перемещения в обе стороны, так что править можно там, где удобнее;
• инстансы из аддона Geoscatter и модификатора Scatter on Surface (Blender 5.0+) доезжают до Three.js через MCP.
К статье приложены демка и исходники. Пайплайн держится на Blender и glTF, поэтому переносится на любой рантайм, который грузит ту же сцену.
🫡1
Порт движка ломается незаметно, но записанные демки ловят это бесплатно
Переносите движок на другой язык, и сложнее всего доказать, что геймплей остался прежним. Инженер перевёл doomgeneric на Rust утилитой c2rust: 73 095 строк за 23,2 секунды. Сам перевод занял секунды, дольше всего шла проверка.
Первый гейт — записи демок. Каждое игровое решение DOOM считает в фиксированной точке, поэтому одно расхождение рассинхронизирует воспроизведение: счётчик тиков перестаёт совпадать с записью.
Второй гейт: хеш каждого кадра, который движок отдаёт на экран. Из 11 113 кадров разошёлся один. Но контрольный прогон оригинального C-бинарника против самого себя дал то же расхождение на том же пикселе: DOOM читает один неинициализированный пиксель памяти, и перевод это повторил.
Отсюда приём: сначала прогоните эталон против эталона, иначе шум собственной сборки уедет в отчёт как чужой баг.
Переносите движок на другой язык, и сложнее всего доказать, что геймплей остался прежним. Инженер перевёл doomgeneric на Rust утилитой c2rust: 73 095 строк за 23,2 секунды. Сам перевод занял секунды, дольше всего шла проверка.
Первый гейт — записи демок. Каждое игровое решение DOOM считает в фиксированной точке, поэтому одно расхождение рассинхронизирует воспроизведение: счётчик тиков перестаёт совпадать с записью.
Второй гейт: хеш каждого кадра, который движок отдаёт на экран. Из 11 113 кадров разошёлся один. Но контрольный прогон оригинального C-бинарника против самого себя дал то же расхождение на том же пикселе: DOOM читает один неинициализированный пиксель памяти, и перевод это повторил.
Отсюда приём: сначала прогоните эталон против эталона, иначе шум собственной сборки уедет в отчёт как чужой баг.
⚡1❤1
Пружинящую деформацию модели в Three.js собирают на костях, а не на симуляции мягкого тела
Гнущийся объект в вебе обычно делают либо запечённой анимацией, которая не отвечает на ввод, либо симуляцией мягкого тела, которая съедает кадр.
В демке Codrops Эйфелева башня работает катапультой: тянешь её мышью, она гнётся и копит энергию, отпускаешь — и шар летит через Париж. Гибкость держит библиотека Wiggle: в модель встраивают цепочку костей, каждая догоняет родительскую по пружинному закону, поэтому объект качается в ответ на действие игрока, а не проигрывает готовый клип.
Париж вокруг собран не руками: город стримится из Cesium ion, это фотореалистичные 3D-тайлы Google. На стороне 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.
Обычно 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.
👎2❤1🍾1
Движок на Vulkan с бинлесс-рендером и глобальным освещением пишет один человек, чтобы устроиться в геймдев
Посмотреть, как современный рендер собран в живом коде, почти негде: учебные примеры заканчиваются на треугольнике, а в большом движке нужный кусок ищешь неделю.
Spartan автор пишет в одиночку, и с 2021 года движок заметно оброс возможностями. Основной бэкенд Vulkan, DirectX 12 в работе, шейдеры общие на HLSL. Дизайн полностью бинлессный: материалы, источники света и сэмплеры лежат в общих массивах, и шейдер берёт их по индексу вместо пересвязывания дескрипторов на каждую отрисовку.
Сверху глобальное освещение в реальном времени на FidelityFX Brixelizer, экранные тени по методу Bend Studio из Days Gone, XeSS 2 и FSR 3 с динамическим разрешением, а на видеокартах AMD breadcrumbs, помогающие найти, на чём упал GPU. Остальное перечисляет обзор GameFromScratch.
Посмотреть, как современный рендер собран в живом коде, почти негде: учебные примеры заканчиваются на треугольнике, а в большом движке нужный кусок ищешь неделю.
Spartan автор пишет в одиночку, и с 2021 года движок заметно оброс возможностями. Основной бэкенд Vulkan, DirectX 12 в работе, шейдеры общие на HLSL. Дизайн полностью бинлессный: материалы, источники света и сэмплеры лежат в общих массивах, и шейдер берёт их по индексу вместо пересвязывания дескрипторов на каждую отрисовку.
Сверху глобальное освещение в реальном времени на FidelityFX Brixelizer, экранные тени по методу Bend Studio из Days Gone, XeSS 2 и FSR 3 с динамическим разрешением, а на видеокартах AMD breadcrumbs, помогающие найти, на чём упал GPU. Остальное перечисляет обзор GameFromScratch.
❤3
Плоские нити не ловят свет, но в WebGPU их можно сделать объёмными
Светящаяся линия в трёхмерной сцене быстро выдаёт плоскую основу: на ней нет блика, а освещение не меняется по ширине. У ленты meshline причина в устройстве геометрии. Пары вершин раздвигаются уже в экранных координатах, лента всегда повёрнута к камере, поэтому у неё нет поверхности с нормалью, на которую может подействовать свет.
В разборе Codrops ленты заменили настоящими трубками. Их координаты и нормали вычисляет видеокарта поверх материала с физической моделью освещения, а исходную геометрию не приходится пересобирать.
Для эффектов в three.js граница практичная: meshline подходит экранным штрихам, а для нитей, которые должны ощущаться частью освещённой сцены, нужны трубки.
Светящаяся линия в трёхмерной сцене быстро выдаёт плоскую основу: на ней нет блика, а освещение не меняется по ширине. У ленты meshline причина в устройстве геометрии. Пары вершин раздвигаются уже в экранных координатах, лента всегда повёрнута к камере, поэтому у неё нет поверхности с нормалью, на которую может подействовать свет.
В разборе Codrops ленты заменили настоящими трубками. Их координаты и нормали вычисляет видеокарта поверх материала с физической моделью освещения, а исходную геометрию не приходится пересобирать.
Для эффектов в three.js граница практичная: meshline подходит экранным штрихам, а для нитей, которые должны ощущаться частью освещённой сцены, нужны трубки.
❤3💔1
Листву в 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.
Каждое дерево, которое качается на ветру, заставляет пересобирать структуру ускорения лучей, поэтому в трассируемых сценах растительность режут первой. На 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 платит именно за эту часть цепочки, объясняет сооснователь компании Лиор Шифф.
Для инди это меняет адрес, но не расклад: билд вы соберёте и вдвоём, а закупку трафика на миллионы игроков всё так же берёте у чужой компании. Вы бы отдали проект издателю ради трафика или тянули бы его сами?
Unity продала издательский бизнес Supersonic студии Tripledot Studios за $40 млн, о сделке объявили в начале августа. Вместе с бизнесом переходят продуктовая команда, SDK и технология автоматической закупки пользователей: то, чем издатель разгоняет игру после софт-лонча. Supersonic будет работать рядом с Lion Studios, собственным издателем Tripledot.
Аргумент покупателя: ИИ сделал игры быстрее и дешевле в производстве, но не сделал проще их запуск. Узкое место переехало из сборки в вывод на рынок, и $40 млн Tripledot платит именно за эту часть цепочки, объясняет сооснователь компании Лиор Шифф.
Для инди это меняет адрес, но не расклад: билд вы соберёте и вдвоём, а закупку трафика на миллионы игроков всё так же берёте у чужой компании. Вы бы отдали проект издателю ради трафика или тянули бы его сами?
Сотни стеклянных карточек уложились в один рендер-проход
В браузерном эксперименте на Three.js каждая карточка — плоская сетка. Скругления, фаска и преломление рассчитываются в материале, который смещает выборку из видеотекстуры: изображение будто проходит через стекло. Сцена на WebGPU обходится без освещения, постобработки и промежуточных буферов.
Бесконечность тоже имитируется. Карточка, ушедшая за край, переносится на противоположный, а сетку размещают на большой сфере. Наклон и уменьшение элементов по краям создают глубину без бесконечной геометрии.
В разборе Codrops есть код на TSL, языке шейдеров Three.js, расчёт нормалей из карты высот и настройка числа выборок под мощные и мобильные графические процессоры. Приём можно примерить к меню выбора уровней и галереям с десятками анимированных элементов.
В браузерном эксперименте на Three.js каждая карточка — плоская сетка. Скругления, фаска и преломление рассчитываются в материале, который смещает выборку из видеотекстуры: изображение будто проходит через стекло. Сцена на WebGPU обходится без освещения, постобработки и промежуточных буферов.
Бесконечность тоже имитируется. Карточка, ушедшая за край, переносится на противоположный, а сетку размещают на большой сфере. Наклон и уменьшение элементов по краям создают глубину без бесконечной геометрии.
В разборе Codrops есть код на TSL, языке шейдеров Three.js, расчёт нормалей из карты высот и настройка числа выборок под мощные и мобильные графические процессоры. Приём можно примерить к меню выбора уровней и галереям с десятками анимированных элементов.
👍1
Первый кадр на WebGPU пришлось ждать почти 20 секунд
В веб-проекте Cerebrium одна область рендеринга содержала несколько окружений со своими материалами, частицами, светом и постобработкой. Перед стартом Three.js обходил графы узлов на TSL, языке описания шейдеров Three.js, собирал из них шейдеры и компилировал графические конвейеры. На эталонной машине эта подготовка занимала почти 20 секунд, хотя после запуска производительность рендеринга проблемой не была.
Проверяйте два этапа отдельно: скорость уже запущенного рендера и время до первого кадра. В насыщенной сцене стоит отдельно профилировать сборку шейдеров и создание конвейеров до показа изображения.
В разборе Codrops есть весь путь выбора между WebGPU и WebGL, устройство нескольких окружений в одном холсте и объяснение, почему более чистой архитектуры оказалось недостаточно.
В веб-проекте 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 осталось устройство выборочного рендеринга и переходов между сценами.
Shader Development Studio собрала почти весь сайт внутри HTML-холста. Three.js рендерит 3D-сцены, React Three Fiber описывает их компонентами, а язык материалов TSL компилируется и для WebGPU, и для WebGL. Так студия сохраняет совместимость со старым графическим API, не отказываясь от нового.
Интерфейс тоже рисуется внутри Three.js через изменённый @pmndrs/uikit, поэтому проходит через ту же постобработку, что и сцены. Плавную прокрутку ведёт доработанная библиотека Lenis: она фиксирует переходы между главным экраном и разделом работ.
Для геймдева здесь узнаваемая архитектура: меню, 3D и эффекты собраны в одном графическом конвейере. В разборе Codrops осталось устройство выборочного рендеринга и переходов между сценами.
❤1
Настройте синусоиду тремя параметрами
Если движение объекта уже задано синусоидой, размах меняет коэффициент A. При A=2 значение становится вдвое больше в обоих направлениях.
За скорость повторения отвечает w в
Фаза θ задаёт точку начала цикла, не меняя размах или частоту. В примере
В разборе Eli Bendersky параметры можно покрутить в интерактивной демонстрации. Если синусоида уже задаёт колебание объекта, камеры или числового параметра шейдера, меняйте A, w и θ по отдельности: так видно, что отвечает за размах, темп и стартовую точку.
Если движение объекта уже задано синусоидой, размах меняет коэффициент A. При A=2 значение становится вдвое больше в обоих направлениях.
За скорость повторения отвечает w в
sin(wx). Базовый период равен 2π; при w=2 он сокращается до π, поэтому цикл проходит вдвое быстрее. Для нужного периода p используйте w=2π/p.Фаза θ задаёт точку начала цикла, не меняя размах или частоту. В примере
sin(x+π/2) синусоида сразу оказывается на положительном пике и сдвигается влево на π/2; отрицательная θ сдвигает её вправо.В разборе Eli Bendersky параметры можно покрутить в интерактивной демонстрации. Если синусоида уже задаёт колебание объекта, камеры или числового параметра шейдера, меняйте A, w и θ по отдельности: так видно, что отвечает за размах, темп и стартовую точку.
❤2💔2
Как Celeste незаметно прощает неточный ввод
Celeste остаётся сложной, но управление ощущается отзывчивым: разработчики расширяют окна времени и позиции в пользу игрока. После схода с края прыгнуть можно ещё несколько мгновений. Зажатая перед приземлением кнопка срабатывает точно в кадр касания. У вершины прыжка гравитация вдвое слабее, пока кнопка нажата, поэтому есть время поправить траекторию.
При ударе головой об угол Мэдлин сдвигают в сторону, а боковой рывок у края поднимает её на платформу. Импульс движущейся платформы хранится несколько кадров после остановки.
Принцип для разработчика: немного расширить допуски и незаметно помочь игроку выполнить задуманное действие. В авторском разборе Celeste & Forgiveness собраны десять приёмов, включая прыжки от стены и возврат выносливости при поздней смене направления.
Celeste остаётся сложной, но управление ощущается отзывчивым: разработчики расширяют окна времени и позиции в пользу игрока. После схода с края прыгнуть можно ещё несколько мгновений. Зажатая перед приземлением кнопка срабатывает точно в кадр касания. У вершины прыжка гравитация вдвое слабее, пока кнопка нажата, поэтому есть время поправить траекторию.
При ударе головой об угол Мэдлин сдвигают в сторону, а боковой рывок у края поднимает её на платформу. Импульс движущейся платформы хранится несколько кадров после остановки.
Принцип для разработчика: немного расширить допуски и незаметно помочь игроку выполнить задуманное действие. В авторском разборе Celeste & Forgiveness собраны десять приёмов, включая прыжки от стены и возврат выносливости при поздней смене направления.
❤2
Forwarded from Веб-страница
Как читать ввод геймпада в JavaScript и находить дрейф стиков
Gamepad API прост, но первая проверка может объявить неисправный контроллер здоровым. Chromium держит значение оси на нуле, пока хотя бы раз не увидит её около центра: по модулю меньше 0,1. Поэтому сильный дрейф может оставаться скрытым сколько угодно.
Есть и вторая ловушка:
Я сохранил практический разбор freeCodeCamp как чеклист для браузерного тестера. После подключения попросите пользователя провести стики через центр, дождитесь ненулевого значения каждой оси и только затем ищите дрейф. Без контроллера опрашивайте API редко, после подключения переходите к каждому кадру.
Gamepad API прост, но первая проверка может объявить неисправный контроллер здоровым. Chromium держит значение оси на нуле, пока хотя бы раз не увидит её около центра: по модулю меньше 0,1. Поэтому сильный дрейф может оставаться скрытым сколько угодно.
Есть и вторая ловушка:
navigator.getGamepads() возвращает снимок состояния. Его нужно вызывать заново в каждом кадре requestAnimationFrame, а пустые ячейки массива пропускать.Я сохранил практический разбор freeCodeCamp как чеклист для браузерного тестера. После подключения попросите пользователя провести стики через центр, дождитесь ненулевого значения каждой оси и только затем ищите дрейф. Без контроллера опрашивайте API редко, после подключения переходите к каждому кадру.
Как устроена физика Celeste и TowerFall
В Celeste и TowerFall физика построена на двух классах.
Движущаяся платформа сначала запоминает пассажиров, затем сдвигается и расталкивает пересёкшихся с ней актёров. Остальных пассажиров она переносит на полное расстояние. В разборе физики Celeste и TowerFall есть код схемы, обработка зажатых объектов и варианты столкновений для тайлового платформера.
В Celeste и TowerFall физика построена на двух классах.
Solid описывает геометрию уровня, Actor отвечает за подвижные объекты. Коллайдеры прямоугольные, их координаты и размеры целочисленные.Actor накапливает дробную часть перемещения, округляет остаток, затем идёт по одному пикселю и перед каждым шагом проверяет препятствие. При столкновении движение останавливается и вызывается переданный обработчик.Движущаяся платформа сначала запоминает пассажиров, затем сдвигается и расталкивает пересёкшихся с ней актёров. Остальных пассажиров она переносит на полное расстояние. В разборе физики Celeste и TowerFall есть код схемы, обработка зажатых объектов и варианты столкновений для тайлового платформера.