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

1. 3д моделирование (хотя бы на базовом уровне)
2. Математику (особенно для симуляций на высоком уровне)
3. Базовые навыки фотошопа
4. Шейдерную разработку (хотя бы на уровне нодовых редакторов)
5. При этом обладать не хилой фантазией, чтобы придумывать где «схитрить»

В целом для разработчиков прямо скажем нет лишних навыков. Недавно наткнулся на прикольный туториал по эффекту огненного торнадо https://youtu.be/xvV90kdBCPQ
Выглядит очень прикольно и при этом работает быстро, хотя по сути штука довольно простая :)

Хитрости с uv координатами

Недавно я начал разрабатывать систему визуализации всяких графиков и чартов в Unity https://github.com/Nox7atra/udvf . Ща немного подразгружусь и продолжу. Вообще на эту тему есть прикольный репозиторий Китайский https://github.com/monitor1394/unity-ugui-XCharts но поковыряв его захотелось тихим ходом сделать своё решение. Хотя он довольно крутой и умеет очень многое. Но не речь сейчас не об этом :)

В целом я всегда топлю за то, что не важно работаете вы с 3д или с 2д, нужно знать основы компьютерной графики. Что такое меш, uv, нормали и т.п. Так как есть очень много примеров творческого применения параметров, когда нормали — это не совсем нормали и т.п. (чаще всего мучают vertex color правда) Эти знания сильно расширяют возможности в огромном спектре задач)

И я столкнулся с довольно забавной проблемой. У Unity есть интересное ограничение, что MSAA (сглаживание) не работает в Screen Space интерфейсах. С точки зрения решения требовать от пользователя перевода в Camera Space странно, да и в целом включать целый MSAA чтобы сглаживать графики — дорого и странно. Поэтому было придумано, на мой взгляд, довольно элегантное решение. Хитрая меш генерация примитивов с хитрыми uv координатами. Плюс довольно простой шейдерный код:

fixed4 frag (v2f i) : SV_Target
{
const float PI = 3.14159;
fixed4 col = SampleSpriteTexture ( i.uv) * i.color;
col.a = clamp(sin(i.uv.x*PI)* i.uv.y / _Smoothing,0,1) ;
return col;
}

Было

Стало

И как раз-таки тут используется хитрость с uv для равномерного сглаживания. Для примера покажу на примитиве в виде квадрата. На рисунке выше uv координаты и вершины этого примитива. Так как для этого нам нужно знать всего 2 вещи. Как должен работать lerp по направлению (Х компонента вектора) и какого размера объект (Y компонента вектора), чтобы сглаживание с помощью математики сделать чётко по краю, и оно не зависело от размера квадрата при использовании одного и того же материала. И по сути за стоимость в пару дополнительных вершин в каждом подобном примитиве и пару треугольников мы получаем аккуратное и красивое сглаживание краёв. И никакой тебе лесенки даже в Screen Space интерфейсах

Ну да, в данном конкретном случае не lerp, а более сложная формула для градиента, так как мне она визуально при переборе понравилась больше

А на тему прикольных фишек с vertex color можно посмотреть этот классный доклад с DevGAMM 2018 https://youtu.be/9SHPUKcLsXA?t=443 Там по таймкоду как раз объясняется такая техника :) Ну и сам доклад в общем интересный

Переезд на новую инфраструктуру

Так как оплатить сейчас ничего зарубежного нельзя за последнюю неделю я перевёл всю свою инфраструктуру в РФ (благо её немного) И на самом деле забавно. Так как это в целом то и выходит ощутимо дешевле

Бекенд — спасибо 152 ФЗ он и так по большей части был размещён в РФ, так что тут ничего и делать не пришлось. Всё и так там где надо. По амазоновской лямбде для календаря я не выхожу за бесплатную квоту, так что полёт нормальный. Плюс в целом там надо было оптимизировать расходы, так как я просто так платил за CDN, который уже давно ни для чего не использовался

Гит — в целом я с давних времён пользуюсь Bitbucket и он меня целиком и полностью устраивал. Но платил я там собственно за Git LFS, так как без него игровые проекты, да и проекты с графикой в целом делать сложно. Но так как сейчас оплата за ЛФС не проходит пришлось быстро сворачивать удочки. Импортозамещением это не назовёшь конечно, но в итоге был выбрал self-managed Gitlab https://about.gitlab.com/install/ Причём забавно что в первый день я положил свой сервер (перемудрил с конфигурациями). Но потом всё откатывая наткнулся на задавную штуку (не реклама) В рувдс есть прикольная стразу настроенная тачка https://ruvds.com/ru-rub/marketplace/gitlab#order с гитлабом. Просто говоришь разверни мне сервер, и он его разворачивает. И в целом оно работает. Конечно рувдс не супер юзерфрендли, но норм за свои бабки. Что там не работает из коробки, так это почта (и нет норм инструкции, но зная как это всё разворачивается — это не проблема). Я сразу купил домен и всё сконфигурировал. Заняло это меньше дня. И если раньше я платил 10$ в месяц за 100гб лфс, то сейчас это выходит около 500р (за саму память, ещё за сервер в целом сейчас расход 2к рублей). Дороже, но есть две крутые фичи. Первое — на любое количество пользователей, второе — можно настроить билд пайплайны и т.п. безо всяких доплат. Ну и в целом все прелести своего сервера)

Корп почта — моя главная боль, так как вся корпоративная почта у меня на гугле. Яндекс 360 выходит сильно дешевле, но я столкнулся с рядом неудобств. Первое — это прямо таки ручной переезд, это заняло большую часть времени. Второе, документы (особенно таблицы) в гугле мне как-то по привычнее. Пока к интерфейсу яндекса не привык. Но зато порадовало прикручивание домена к почте, оно реально сделано удобно. Хотя и есть нюансы, что нет бесплатных сервисных аккаунтов. Но в целом, это не критично, так как если за самый дешёвый GSuit я платил 12$ в месяц за пользователя, то тут с диском на 1ТБ выходит 259р на пользователя, что ощутимо дешевле. Плюс на сервисном аккаунте тоже можно что-то хранить вроде сборок

Из волнующих меня вещей осталось только разобраться с рендер фермами. В целом свои ПК с хорошими видеокартами я уже начал перенастраивать в кластер. Но стало прям любопытно, гпу виртуалка в яндекс облаке выйдет дешевле аренды рендер фермы или дороже. Как там развернуть в докере сами рендер ноды мне +- понятно, но надо посмотреть какой выйдет в целом прайс за рендер одного ролика в хорошем качестве

А ну и да, по таск трекингу из-за специфики моей работы я давно сижу на связке бесплатных Notion + Trello, так что там пока в целом без изменений

Любопытное наблюдение на тему перспективы

Сейчас мы разрабатываем 2д раннер с видом персонажа сзади. И чтобы визуал был поинтереснее захотелось добавить трассе перспективы. Обычно в раннерах как делают трассу произвольной длинны? Делается тайл трассы, клонируется и переставляется. Тайлится она в первую очередь должна в стыках. И трасса так может быть бесконечной. Поверх ещё дизайнятся препятствия и размечаются по сложности, чтобы в дальнейшем генератор расставлял "тайлы с препятствиями" в специальном взвешенном порядке, и получалась интересная трасса

Но сейчас немного не о том. Было найдено прикольное видео по тому, как можно рисовать тайлы в перспективе https://www.youtube.com/watch?v=2gAbvquhbmw и открыто забавное наблюдение, при правильной перспективе нарисовав один тайл можно и в этом случае сделать бесконечную трассу через скейл и перемещение. Так как в правильной перспективе все линии сойдутся. Единственное, что "разделяющие линии", если скажем это плитка, должны быть треугольниками :)

Треугольниками соблюдающими законы перспективы, и тогда всё будет сходится и по толщине линий :)

А то простой способ сделать всё в 3д, и потом натурально повернуть плоскость. Так как если тут честное 3д, то и тайл просто нарисовать и всё сойдётся. Но в 2д движках далеко не всегда хочется связываться с честным 3д или матричными преобразованиями :)

#сниппет #threejs #js #webgl #deviceorientation

Так как на эту задачу было потрачено больше 5-ти минут то положу сюда сниппет по тому, как правильно забирать данные с гироскопа (тут нет части с тем, как правильно забирать разрешения на ios) Но по разрешениям:

1) DeviceOrientationEvent не работает без https
2) DeviceOrientationEvent не работает в iframe
3) DeviceOrientationEvent можно запросить только по действию пользователя, типа клика на кнопку

Пересчёт кватерниона ориентации устройства:

function getQuaternion( alpha, beta, gamma ) {
    let degtorad = Math.PI / 180;
    let _x = beta  ? beta * degtorad : 0;
    let _y = gamma ? gamma * degtorad : 0;
    let _z = alpha ? alpha * degtorad : 0;

    let cX = Math.cos( _x/2 );
    let cY = Math.cos( _y/2 );
    let cZ = Math.cos( _z/2 );
    let sX = Math.sin( _x/2 );
    let sY = Math.sin( _y/2 );
    let sZ = Math.sin( _z/2 );

    let w = cX * cY * cZ - sX * sY * sZ;
    let x = sX * cY * cZ - cX * sY * sZ;
    let y = cX * sY * cZ + sX * cY * sZ;
    let z = cX * cY * sZ + sX * sY * cZ;

    return [ w, x, y, z ];
}

Применение в three.js:

window.addEventListener('deviceorientation',(event) => {
            let threeQuaternion = new Matrix3();
            let quat = getQuaternion(event.alpha, event.beta, event.gamma);
            threeQuaternion.w = quat[0];
            threeQuaternion.x = quat[1];
            threeQuaternion.y = quat[2];
            threeQuaternion.z = quat[3];
            this.camera.setRotationFromQuaternion(threeQuaternion);
            this.camera.rotation.x -= Math.PI / 2;
        });

Важно добавить к повороту по X пи пополам (90 градусов в радианах), так как по умолчанию ориентация устройства (по крайней мере на ios) будет смотреть вперёд, когда камера телефона смотрит вниз

А нужно это для подобного управления в браузере :)

Дешёвый эффект объёма

На чём на чём, а на визуализации данных я за последние годы собаку съел, и на оптимизациях для подобных задач. Да, Unity применяет не только для игр, а для достаточно большого спектра бизнес задач. Например визуализация трёхмерных графов. И когда задача отобразить 10, 100, 1000 объектов, то всё довольно просто. Но что если объектов 100к? Обычные Unlit шейдеры будут давать плоскую картинку и эффект объёма будет теряться

На самом деле одно из забавных наблюдений на тему объёма и его восприятия. По сути — светотень это обычный градиент (вот открытие). Но какой эффект может дать такой же плавный градиент в зависимости от формы 3д объекта? Эффект френеля. Это очень забавный чит, но эффект френеля с очень простой математикой заставляет объекты выглядеть объёмно. И вот уже мы можем отрисовать сотни тысяч кубиков, сфер и т.п. Чего часто достаточно для той же визуализации трёхмерного графа

o.fresnel = _FresnelBias + _FresnelScale * pow(1 + dot(i, v.normal), -_FresnelPower);

И вот наш объект уже обладает объёмом. Да, это не честная светотень, но с точки зрения восприятия данных (да и некоторых других случаев и этого достаточно) :)

#shader #unity #freshnel

Полный код шейдера с возможностью покраски через цвет вершин (вдруг кому пригодится)

В целом с помощью правильных шейдеров на примитивах можно делать всякую разную красоту :)

5 лет на вольных хлебах

Как я подумал, интересно будет ещё периодически писать про работу. А то тут будет слишком много кода. Итак, я ушёл с последней официальной работы порядка 5 лет назад. Хотя и до этого я успел побывать инди разработчиком, что тоже забавный опыт. Поиск издательства. Построение продакшена разработки игры с абсолютно нулевым пониманием, как это делается. В текущей точке это кажется какой-то безумной авантюрой, но до сих пор визуал игры которую мы тогда делали греет мне душу (скину ниже картиночку)

Два года я провёл на фрилансе, потом открыл свою студию и закрыл в последствии, сейчас я занимаюсь чем-то вроде продюсирования (самый простой аналог — кино индустрия). Чтож, можно написать что-то про самый первый этап — фриланс, и дать несколько небольших советов, кому интересно. Ну и плюс можно написать про плюсы и минусы с сугубо моей точки зрения)

Первое довольно банальный совет — сначала стоит побывать в офисе, причём какое-то ощутимое время (хотя бы год), причём лучше в крупной компании. Я вышел в фриланс с 2 годами опыта работы за плечами. От крупных студий до стартапов. И в разы проще работается, когда ты понимаешь процессы, и как они строятся. Их можно конечно выработать самостоятельно, но проще поучиться у опытных :)

Второй самый важный совет. Ваши контакты должны быть везде. И их нужно всегда указывать. Меня находили по гитхабу, аккаунтам на фриланс биржам и многим другим источникам, так как у меня везде указаны контакты. Совет звучит банально, но тем не менее многие почему-то про это забывают :)

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

Третий совет, разберитесь базово в документообороте. Нет ничего сложного в оформлении самозанятого (теперь) или даже оформлении ИП (просто сейчас смысла мало). Но желательно уметь работать с документами на базовом уровне. Хороший заказчик всё объяснит и покажет, но на самом деле так далеко не всегда. В плане налогов всё в целом довольно просто, так как любой банк сейчас всё считает за вас. А скажем так, на больших и интересных проектах никто не работает без договоров :)

В целом у фриланса много и плюсов, и минусов. Я никогда не понимал до конца проблему с дисциплиной, так как когда сделаешь Х и тебе заплатят денюшку, есть довольно простой мотиватор работать быстрее. В этом плане тут мотивация в разы проще, чем на той же работе) Может потом ещё по ряду аспектов чуть подробнее напишу, если кому-то интересно :) А, ну и да, Unity фриланса достаточно много и он есть. Правда в основном не игровой, а ориентированный на другие индустрии :)

А вот картиночка проекта с времён инди ❤️ Один из немногих проектов, который мне даже жаль что мы недоделали. Но увы я тогда был молодой, неопытный, удивительно что мы даже до такого визуала-то классного дошли в далёком 2016 году :)

Ваша игра должна работать в терминале

Когда-то давно я выработал для себя базовую проверку хорошего разделения представления и логики. Игра должна работать в терминале. И тогда действительно логика отделена от представления. Когда от визуала ничего не зависит, то логику можно перенести куда угодно. На сервер закрыв REST API или GRPC и т.п.

Но что же делать со снарядами и заклинаниями, которые летят куда-то? Они так же должны быть логическими. Для простоты восприятия разделим всё на 2 шага. Процессинг и постпроцесс. На шаге процессинга у нас отрабатывает физика, объекты как-то перемещаются (в контексте юнити трансформы) и т.п. А не стадии пост процессинга к ним уже подтягивается графика. Условно так работает к примеру Nvidia Flex. Есть слой симуляции который состоит из условно кучи шариков, и слой отрисовки, который по положениям этих шариков в каждом кадре отрисовывает финальную картинку :) Так что сначала мы на логическом слое определяем где у нас снаряд, а потом передаём эти данные в визуализацию :)