Red Collar | DEV

#WebGL

Разбираем тени / 2 (простой пример работы шейдеров)

☀️ За первый проход с камерой нужно поступить немного по-другому: нам нужно поставить ее не туда, где мы хотим, чтобы она была, а именно туда, откуда «светит» солнце.

Мало того, что мы по-особенному ставим камеру, так еще и рисуем не прямо на экран, а в отдельный буфер, который на самом деле является обычной текстурой. Плюсом ко всему, нам не нужен цвет или освещение, нам нужно просто понять, насколько отрисованный пиксель находится далеко от «солнца» — поэтому нам хватит текстуры только с красным каналом, куда мы и пишем расстояние от камеры до пикселя. Если все сделано правильно, мы получим карту теней, или shadow map.

🌪Второй проход — это как раз стандартная отрисовка нашей сцены, но с небольшой оговоркой.

Теперь, когда мы будем рисовать нашу сцену, мы ставим камеру как нам нужно и рисуем все, но только для каждого пикселя нам нужно вычислить другой алгоритм: мы берем каждый пиксель, опять считаем его удаленность от солнца и сравниваем с той самой картой теней. Пиксель находится дальше от солнца, чем значение в карте теней по этим координатам? Значит, наш пиксель находится в тени, так как есть какой-то объект, который находится к солнцу ближе, чем наш пиксель.

Это очень упрощенное описание алгоритма, но оно позволяет понять общий принцип работы теней в графике. Также почти всегда одной картой теней все не ограничивается, и их рендерят 3 или 4 штуки — каждая из них охватывает площадь больше, чем предыдущая. Это сделано для того, чтобы рядом с игроком качество теней было выше, чем грубо говоря в 100 метрах от камеры. 💨

#rdclr_frontend #WebGL

Red Collar | DEV pinned a GIF

#WebGL

Разбираем тени / 1 (простой пример работы шейдеров)

Из-за того, что Blitz3D, с которого я начинал знакомство с графикой, не сильно был способен реализовать какие-либо графические эффекты (а связано это было с тем, что он был довольно старым и использовал под капотом Direct3D 7), меня всегда впечатляли приемы, которые использовали «взрослые» игры, например — тени. 👣

Если мы соберем сцену с улицей, она будет казаться неполной и плоской, так как обычно мы привыкли видеть тень от солнца на всех объектах. И как оказалось, тень от солнца является одним из самых простых эффектов, который можно реализовать с помощью шейдеров. Как же оно работает?

На самом деле, чтобы представить и посчитать тени, мы должны подумать немного нестандартно, и представить: «а что бы мы видели, если бы именно мы были солнцем?» Звучит странно, но именно такой подход является ключом к реализации нашего эффекта. Чтобы полностью понять принцип, мы откажемся от наших мебельных условностей и соберем абстрактную сцену, как на картинке. —>

#rdclr_frontend #WebGL

Типы конвейеров в WebGL — шейдеры/2

Если коротко, то шейдер — это маленькая программка на C-подобном языке, которая сначала выполняется для каждой вершины, а потом для каждого пикселя модели на экране, и определяет какой цвет должен быть в этом пикселе.
Благодаря шейдерам нам становится доступен огромнейший пласт эффектов, ведь теперь мы не ограничены растрированием со стороны OpenGL.

Однако, шейдерный конвейер автоматически указывает нам, что все прошлые манипуляции со стороны программы становятся устаревшими, и нужно внести некоторые коррективы, которые на самом деле ускорят наш рендер.

💛 Вся матричная математика уезжает на видеокарту — не просто так у нее есть compute-ядра, которые считают перемножения матриц в сотни раз быстрее ЦП, тут и выигрыш.
💙 Освещение целиком и полностью ложится на программиста, так как на пиксели, которые выводит шейдер, не распространяется фиксированный конвейер.
💜 Наложение текстуры тоже теперь должно считаться на видяхе, делается очень просто, но мы можем полностью контролировать какой пиксель с текстуры брать для текущего пикселя.
🤎 Мы можем передавать в шейдеры какие угодно данные: как общие, например текущий цвет освещения, так и повершинные, например текстурная координата этой вершины.
❤️ Вершинный и фрагментный (попиксельный) шейдеры могут обмениваться информацией для удобства рендера.

Но лучше всего будет объяснить это наглядно, чем мы и займемся в следующем посте. 👀
#rdclr_frontend #WebGL

Типы конвейеров в WebGL — шейдеры/1

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

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

Так как OpenGL (как и WebGL) является по сути процедурной стейт-машиной, перед каждой отрисовкой нам нужно объяснить ему, что нам нужно, что нет, какие режимы включить и так далее. Когда мы работаем с фиксированным конвейером, общая последовательность действий такая:

- Установить все три матрицы из прошлого поста - model, view & projection.
- Включить текстурирование, привязать текстуру стула.
- Отправить данные о вершинах на видяху.
- Привязать эти данные в отрисовку.
- Настроить светильники.
- Вызвать отрисовку.
- Отключить светильники, отвязать данные вершин, отключить текстурирование.

И вот эта последовательность действий у нас выполняется каждый кадр для каждой модели. Казалось бы, все логично, но фиксированный конвейер накладывает свои ограничения:
💣 1. Мы ограничены в светильниках, максимум — 8
🔮 2. Мы не можем влиять на отрисовку, все растрирование лежит на зашитых алгоритмах
🧿 3. Сложно сделать красиво, в основном приходится прибегать к хакам

И в какой-то момент ребята подумали, и решили: а почему бы нам не дать разработчикам возможность настраивать рендер целиком? Так появились шейдеры (ждите, ща второй пост).
#rdclr_frontend #WebGL

Матрица проекции, матрица отображения и матрица объекта в WebGL

🪡 Матрица объекта — это самая простая в объяснении из всех трех. Допустим, у нас есть стул (ну, в реалиях WebGL это будет просто пачка вершин и треугольников, но давайте оперировать человеческим языком). И вот у нас появляется задача: нужно этот стул переставить в пространстве. Что мы будем делать? Правильно, запишем в матрицу объекта значения, на которые нам нужно подвинуть наш стул. Хотите повернуть его на 90 градусов? Правильно, запишем в матрицу данные о размерах. Стул слишком большой? Я думаю, можно не продолжать.

🧵 Матрица отображения — одна из самых неочевидных вещей, как и Z-координата. Казалось бы, если у нас есть камера, почему бы нам ее не направить на стул и поставить перед ним, и вот он успех, но нет. Не забываем, что для того, чтобы модель отрисовалась, нам нужно вписать ее в тот самый куб, который, к сожалению, двигать нельзя. И как же быть? Да очень просто, мы просто возьмем весь наш трехмерный мир и вместо камеры подвинем и перевернем его. Да, звучит странно, но именно так это и работает. Задумайтесь, во всех играх, в которые вы играли, не камера двигается по миру, а мир вращается и двигается вокруг камеры!

Есть небольшой лайфхак: для того, чтобы быстро построить такую матрицу, мы можем сначала построить матрицу, будто бы мы двигаем именно камеру, а потом инвертировать ее. Если коротко объяснить инверсию матрицы в WebGL, она создает копию ваших преобразований, но наоборот. Например, вы увеличиваете стул в два раза, а инверсная матрица будет его в два раза уменьшать. Подвинули вперед? Инверсная подвинет назад и так далее.

🧶 Что же касается матрицы проекции — это одна из самых сложных в понимании матриц. Она делает так, что пространство как бы сплющивается при ухождении в глубину. Именно за счет нее достигается перспектива (это если мы говорим про перспективную проекцию, существует так же ортографическая проекция, но про нее как-нибудь в другой раз). Здесь же я бы рассказал про Z-координату нашего куба и почему она вообще существует, но про это мы поговорим уже в другом посте, про экранные буфферы.

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

#rdclr_frontend #WebGL

Проекция в WebGL, или «алло а камера где дядя»

Когда я только начинал заниматься графикой (а точнее, на тот момент еще геймдевом), совсем зеленый и не нюхавший так сказать полигонов, я взялся за движок Blitz3D. Он был настолько прост, что даже для неподготовленного человека взять и собрать сцену было проще простого. Взял пространство, поставил туда камеру, повесил кубик и уже идешь хвалиться родителям, что ты Senior Graphics Developer. 😎 И вот ты приходишь в OpenGL (да, именно десктопный, про WebGL будет чуть позже) и думаешь «ну я уже все знаю, сейчас все быстренько накину, и все как обычно отрендерится!». Но начинающего разработчика графики ждало крупное разочарование.

На самом деле, в низкоуровневой графике вообще нет такого понятия, как камера. Все, что на самом деле умеет WebGL — это растрировать полигоны, переводя их координаты в экранное пространство.
💅🏻 Так как же это происходит, и что для этого нужно сделать?

WebGL представляет твой экран, как трехмерную координатную систему, где X смотрит вправо, Y вверх, а Z-координата направлена из монитора прямо на тебя (одна из самых нелогичных вещей для неподготовленного человека, так как во всех игровых движках Z обычно смотрит вглубь экрана). Если представить это все в виде куба, то его размеры будут от (-1, -1, -1) до (1, 1, 1), когда (0, 0, 0) будет центром экрана, а ребра этого куба будут краями экрана. И для того, чтобы наша моделька отобразилась, нужно всю ее геометрию преобразовать каким-то неведомым образом так, чтобы она вписывалась в этот куб, иначе мы рискуем отрисовать ее за пределами экрана. Я нарочно не упоминаю про Z-координату, так как не очень просто будет с наскока объяснить, что она из себя здесь представляет, но не волнуйтесь, чуть позже мы к ней вернемся.

🪢 Так как же нам обработать модель так, чтобы она оказалась в этом кубе?
На помощь нам придут матрицы (ну, которые математические, давайте без приколов).

Матрицы в WebGL представляют собой массив из 16 дробных чисел, в виде 4х4, в которых содержится информация о повороте, сдвиге и размере. И вот уже читатель начинает догадываться: «то есть нам надо построить какую-то специфическую матрицу, и уже на нее помножить все точки нашей модельки». И это абсолютно верно, с одной маленькой ремаркой — матриц у нас будет не одна, а целых три: матрица проекции, матрица отображения и матрица объекта. Давайте быстренько их и разберем.

#rdclr_frontend #WebGL

Сегодня с вами поговорим, как же геометрия попадает на экран и как работает камера в WebGL.

Всем привет! Меня зовут Миша, я креативный фронтенд-разработчик в команде Red Collar, и на этой неделе мы с вами погрузимся в удивительный мир трёхмерной браузерной графики.

В качестве краткого предисловия могу сказать, что из-за ограничений, которые на нас накладывает браузер с одной стороны, и возможностей, которые нам даёт OpenGL ES, некоторые вещи приходится реализовать совершенно неочевидным образом. Такие кейсы мы с вами и попробуем изучить, а так же немного поофтопим и поугораем. Готовьтесь, будет очень интересно! А я побежал писать первый пост.

А прямо сейчас можно послушать нашего технического директора Сережу с актуальным докладом) https://youtu.be/oVmhxqpZlfI Минут 5 назад началось, по открытой ссылке

Видосик про прятки от OpenAI

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

Например, OpenAi — компания, одним из основателей которой является Илон Маск. В видео ИИ учится играть в прятки. Приятного просмотра! 🙈
#NN #read

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

Transfer learning
♻️ Трансферное обучение — это повторное использование существующих моделей для решение новой задачи или проблемы.

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

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

🌗 Возвращаясь к задаче раскраски черно-белых изображений, одним из решений было использование предобученной нейронной сети для классификации изображений и объединение выхода данной нейронной сети с собственной нейронной сетью на определенном этапе ее работы. Это и позволило получать более приемлемые результаты.
#rdclr_backend #NN

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

Суть задания:
Описать и обучить нейронную сеть, которая будет переводить изображение из черно-белого формата в цветной.

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

#meme

Библиотеки для работы с нейронными сетями
Теперь рассмотрим основные библиотеки для построения и обучения нейронных сетей.

1. 🍏 TensorFlow — платформа с открытым исходным кодом, разработанная компанией Google для создания приложений глубокого обучения. Он также поддерживает традиционное машинное обучение.

Изначально TensorFlow разрабатывался для больших числовых вычислений без учета глубокого обучения. Однако, он оказался очень полезным и для разработки глубокого обучения, и поэтому Google открыл его исходный код.

2. 🍎 PyTorch — это библиотека машинного обучения, разработанная командой Facebook AI Reseach. Полностью основана на python и использующая мощность графических процессоров. Это также одна из предпочтительных исследовательских платформ глубокого обучения, созданная для обеспечения максимальной гибкости и скорости.

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

3. 🍐 Keras — это высокоуровневый API глубокого обучения. Keras относительно прост в освоении, так как предоставляет интерфейсы с высоким уровнем абстракции. Именно эту библиотеку рекомендуется начать изучать людям, которые только начинают освоение нейронных сетей.

P.S. В конце хотелось бы порекомендовать сайт, который будет полезен студентам и людям, работающим с нейронными сетями. Он позволяет строить базовые схемы нейронных сетей — alexlenail.me 🧩

#rdclr_backend #NN

Инструменты под python для разработки нейронных сетей
Сегодня хотелось бы поговорить об инструментах и библиотеках, которые помогут в разработке и описании нейронных сетей.

Подавляющая доля разработок в области нейронных сетей приходится на язык программирования python 🐍 , поэтому и рассматривать будем решения под этот язык программирования.

🌪 jupyter notebook — это мощный инструмент для разработки и представления data science проектов. Он способен хранить код, графики, изображения и формулы в одном месте.

💨 google colab — бесплатная облачная среда от компании Google, позволяющая работать с jupiter блокнотами. Данный сервис предоставляет 12 ГБ ОЗУ и сессии до 12 часов. Так же, как и у остальных продуктов данной компании, реализована возможность совместного использования.

#rdclr_backend #NN