Всем привет! Итак, что это за канал и о чём я тут буду писать?

Чтож, видимо таки настало время завести себе канал в телеграмме. А то всё собирался, собирался и никак руки не доходили. В основном тут будут мысли и публикации про сферу моих профессиональных интересов. Мои публикации, заметки на тему виртуальной и дополненной реальности, компьютерной графике, R&D и эксперименты. Сейчас например я активно углубляюсь в WebAR и буду писать на эту тему в любом случае

Давно про это думал, так как не всё подходит под формат целой статьи на хабре. Иногда просто интересно писать заметки о наблюдениях в стиле того, на что я недавно убил два часа времени, просто не зная, что чтобы получить доступ к камере в мобильном вебе сайт должен быть обязательно размещён по https адресу. Но через некоторое время нашёл на эту тему мысли умных людей, и теперь у меня есть первая часть для моих приключений под названием WebAR

Если вас интересует тема Unity, WebGL, виртуальная и дополненная реальность — добро пожаловать. Так же думаю в качестве рубрики добавлю обзор важных новостей из мира всех этих технологий. В общем буду писать про всё, что мне интересно, про крутые штуки которые нахожу и так далее. Кажется это называется — личный блог

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

Смотрится довольно красиво — https://github.com/linwe2012/SchroedingerSmoke
Штука любопытная, так как визуально тут может быть всё просто, зато симуляция использует уравнение Навье-Стокса https://github.com/mwarzech/SmokeSimulationCFD

Возможная эра веба

Чтож. Предположим вы решили остаться в РФ, как и я. Сейчас есть некоторые риски и сложности связанные с инструментами разработки. Допустим на данный момент для многих нет возможности оплатить лицензии Unity, LFS в битбакете и другие прелести жизни. Кроме того так же JetBrains и т.п. заявили о том, что приостанавливают деятельность в РФ. Со временем я уверен, что это устаканится и можно будет по старинке, закинуть куда-то деньги через 3 колена и всё оплатить. И лицензии никто не отзывает, так что если они у вас предоплачены, то в ближайшее время проблем не будет. Но в целом, а какие у нас альтернативы?

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

Во-вторых, что мне больше по душе, бесплатные альтернативы.

По части IDE отлично можно перестроится на Visual Studio Code, с точки зрения 3д моделирования мы уже давно огромными шагами движемся в сторону Blender. Больше всех пожалуй неповезло пользователям фотошопа, так как для него я даже не знаю альтернативы (может вы подскажете, если кто знает. Ну только не GIMP) Фигма достаточно функциональна в бесплатной версии. В плане гита можно развернуть свой gitlab (хотел посоветовать вообще сначала Spaces, но как я говорил брейнсы к сожалению тоже уходят из РФ). Но что интересует меня в первую очередь — это игровые движки. Что же с движками?

Я даже писал статью когда-то, что есть два движка и все остальные. https://habr.com/ru/post/571806/ Но тут есть два нюанса. Скажем так, из-за всех проблем с билингами приложений, с приёмом оплаты, сейчас вполне может наступить эра "яндекс денег" и веба, если это всё затянется. Так как "мы не можем принимать оплату в виде inApp", но никто не запретит вебаппы. Поэтому возможно пора точить лыжи в веб.

А что интересного в этом вашем вебе? Там много крутого и бесплатного. Да, конечно же любое веб приложение в производительности и многих других деталях не сравнится с возможностями апп на Unity или Unreal Engine. Но зато они:

1) Опенсорсные — можно сейчас сделать свой форк и поддерживать свою версию, на случай блокировки. Хотя любой разработчик пройдёт до них через VPN, так что это уж для совсем параноиков
2) Многие бесплатные — нет проблем с билингом, так что не надо платить, чтобы убрать сплеш скрин или типа того

Конечно же это кризисный план, но в наши времена надо рассматривать все варианты.

Для себя я выделил несколько самых интересных инструментов:

Низкоуровневые инструменты: Это практически рендер апи, а не полноценные движки. Приходится писать много своего, но зато можно выжать максимум.

1. https://threejs.org/ — по сути это достаточно интересно рендер апи для веба для 3д проектов, которое позволяет делать много крутого. Достаточно посмотреть на сделанный с помощью него https://bruno-simon.com/ чтобы понять его возможности. Или на https://threejs-journey.com/ — это просто стиль

2. https://pixijs.com/ — если же вас больше интересуют 2д проекты, то можно обратить внимание на этот инструмент. С помощью него сделано тоже много классных веб проектов. Например https://poki.com/en/g/stickman-hook

Высокоуровневые инструменты: Эти инструменты уже ближе к полноценным движкам.

1. https://www.babylonjs.com/ — уже более полноценный движок. Есть физическая движок, лоды, оптимизаторы и многое другое. Вроде нодового редактора материалов. Из прикольных демок https://www.productexample.com/unit21/index.html

2. https://phaser.io/ — тоже движок, но для 2д игр. В него уже встроено также много готовых модулей, различные обёртки для мобильных браузеров, физика, системы инпутов и т.п. из интересных игр https://www.crazygames.com/game/idle-zoo

Единственное, что по вебу я выделил лично для себя. Если нет требований очёнь жестких по скорости скачивания — лучше комбинировать игровой движок с каким-нить классическим фреймворком. Причина проста — вебгл очень плох в отрисовке шрифтов + там нужно морочиться с клавиатурами и прочими деталями, которые в классическом вебе работают из коробки. Поэтому для интерфейсов я предпочитаю React.js. Слава богу по своей идеологии их не так трудно между собой дружить. Если кому-то будет интересна тема веба, то может выложу пару исходников своих проектов чисто для примера

Конечно же я считаю, что резко бежать куда-то рано, и что всё можно будет решить и на текущих инструментах, но всё же лучше всегда иметь план Б про запас! Если я что-то забыл, или у вас есть свои предложения, что делать в сложившейся ситуации — пишите в комментариях (надеюсь я их включил правильно). Речь про инструменты, если что :)

Да, конечно же я понимаю всех юнити разработчиков и отношение к JS :) Но чтож, в наши времена может прийдётся идти на компромиссы :)

Меня всегда поражали 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) будет смотреть вперёд, когда камера телефона смотрит вниз