Привет, меня зовут Ваня! Я фронтенд-разработчик в Лиге А. и часто работаю с анимациями на клиентских проектах. В основном, использую Gsap, простые CSS-анимации или Lottie. А вот проекты, которые нужно реализовывать на WebGL встречаются редко и почти всегда задача по ним звучит необычно.
Давайте исследуем одну загадку: как Bethesda смогла сделать такие грибообразные облака ядерных взрывов?
Источник: Fallout 4
Почему грибообразные облака сложно создавать в играх? Давайте рассмотрим пример из реальной жизни:
Пишем Surfgrad, высокопроизводительную библиотеку для автоматического дифференцирования выражений при помощи WebGPU.
Я работаю в компании Nomic, и многие из моих коллег заняты созданием больших TSNE-подобных визуализаций, работающих в браузере. При визуализации таких двумерных карт возникает две проблемы: проецировать эти конструкции (напр. TSNE и UMAPЧитать полностью »
Как работают шейдеры в GMS2? Как их писать и использовать? Что означают термины attribute, varying и uniform? Какой тип шейдера выбрать? Почему шейдер всегда состоит из двух файлов? Чем отличается вершинный шейдер от фрагментного? И причём здесь треугольники?
В ноябре 2022 года мы задали себе задачку: можно ли запрограммировать анимацию, воспроизводимую в режиме реального времени, как обычный короткий мультик, но с условием, что файл должен быть не больше 8 килобайт. При этом цель считалась бы достигнутой, если бы у нас получилась нормальная графика, анимация, режиссёрская и операторская работа, а ещё подходящая музыка. Да, 8 килобайт — на секундочку, в два с лишним раза меньше этого поста. Мы не представляли, насколько это вообще возможно, так что оставалось только попробовать.
В апреле 2023 года, спустя несколько месяцев работы, мы, наконец, выкатили ленту Читать полностью »
В приложении Авто.ру есть такая фича — панорамы автомобилей. Она позволяет любому сделать 3D-фото своей машины, показать её во всей красе. Как это работает и как нашим коллегам из ML удалось уместить в смартфон то, что раньше требовало целого ангара, напичканного дорогостоящим оборудованием, yaantonn уже рассказывал на Хабре.
Но отснять панораму — лишь полдела. Затем её предстоит воспроизвести, причём сделать это одинаково хорошо и на топовом флагмане, и на бюджетном смартфоне.
В обновлении «Новая сила» в War Thunder у самых результативных игроков в бою появилась возможность использовать атомное оружие. И появилась чертовски интересная задача создания визуального эффекта атомной бомбардировки.
Исходя из существующих в 40-х и 50-х годах калибров советского и американского тактического атомного вооружения, мощность взрыва была выбрана на уровне 30-40 килотонн (бомбы Mark 4 и РДС-2Читать полностью »
Каждый год выпускаются сотни новых игр. Некоторые из них добиваются успеха и продаются миллионами копий, но само по себе это не гарантирует статуса легенды. Однако изредка появляются игры, которые становятся частью истории отрасли, и мы продолжаем обсуждать их и играть в них спустя годы после выпуска.
Для игроков на PC есть одна игра, ставшая почти легендарной благодаря своей невероятной, обогнавшей своё время графике и способности снижать фреймрейты компьютера до однозначных чисел. Позже она стала знаменитой благодаря тому, что на десяток лет превратилась в надёжный источник мемов. В этой статье мы расскажем о Crysis и о том, что сделало его таким уникальным.
Прежде чем погрузиться в историю Crysis, стоит совершить краткое путешествие во времени и узнать, как было заложено основание Crytek. Эта компания по разработке ПО была основана осенью 1999 года в Кобурге, Германия тремя братьями — Авни, Джеватом и Фаруком Йерли. Объединившись под руководством Джевата, братья начали создавать демо игр для PC.
Читать полностью »
Современный OpenGL и, в более широком смысле, WebGL, сильно отличается от старого OpenGL, который я изучал в прошлом. Я понимаю, как работает растеризация, поэтому вполне разбираюсь в концепциях. Однако в каждом прочитанном мной туториале предлагались абстракции и вспомогательные функции, усложнявшие мне понимание того, какие части относятся к самим API OpenGL.
Уточню — такие абстракции, как разделение данных позиций и функциональности рендеринга на отдельные классы важны в реальных приложениях. Однако эти абстракции раскидывают код по разным областям и добавляют избыточность из-за бойлерплейта и передачи данных между логическими единицами. Мне удобнее всего изучать тему на линейном потоке кода, в котором каждая строка непосредственно относится к этой теме.
Во-первых, нужно поблагодарить создателя использованного мной туториала. Взяв его за основу, я избавлялся от всех абстракций, пока не получил «minimal viable program». Надеюсь, она поможет вам начать освоение современного OpenGL. Вот что мы будем делать:
Равносторонний треугольник, зелёный сверху, чёрный в нижнем левом углу и красный в нижнем правом, с интерполированными между точками цветами. Чуть более яркая версия чёрного треугольника [перевод на Хабре].
Читать полностью »
Недавно я работал над анимацией респауна и спецэффектом главного героя моей игры “King, Witch and Dragon”. Для этого спецэффекта мне нужна была пара сотен анимированных крыс.
Создание двухсот мешей со скиннингом с анимацией ключевыми кадрами всего для одного спецэффекта — это пустая трата ресурсов. Поэтому я решил использовать систему частиц, но для этого мне пришлось выбрать другой подход к анимации.
В этом посте я объясню, как анимировать простых существ при помощи вершинного шейдера. В качестве примера я использую крысу, но тот же способ применим для анимации рыб, птиц, летающих мышей и других существ, не являющихся основной целью взаимодействий игрока.
В большинстве туториалов про шейдерную анимацию для начинающих рассказывается о том, как анимировать флаг при помощи синусоиды. Я покажу чуть более сложную версию, в которой мы разобьём модель на разные части тела и анимируем их по отдельности.
Я подробно опишу создание вот этой анимации:
