Pull to refresh
9
0
Никита Черный @nikitablack

Программист на разных языках

Send message

Рендеринг каустики воды в реальном времени

Reading time7 min
Views11K
В этой статье я представлю свою попытку обобщения вычислений каустики в реальном времени с помощью WebGL и ThreeJS. Тот факт, что это попытка, важен, ведь найти решение, работающее во всех случаях и обеспечивающее 60fps — сложная, если не невозможная задача. Но вы увидите, что при помощи моей методики можно достичь достаточно приличных результатов.

Что такое каустика?


Каустика — это световые узоры, возникающие, когда свет преломляется и отражается от поверхности, в нашем случае — на границе воды и воздуха.

Из-за того, что отражение и преломление происходят на волнах воды, вода действует здесь как динамическая линза, создающая эти световые узоры.


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

Чтобы добиться стабильных 60fps, нам нужно вычислять её на графической карте (GPU), поэтому мы будем вычислять каустику только шейдерами, написанными на GLSL.
Читать дальше →
Total votes 35: ↑35 and ↓0+35
Comments1

Простой шейдер для точечных источников света в тумане

Reading time3 min
Views4.6K
Мне нужен был простой и быстрый шейдер, создающий туман, освещённый точечными источниками света. Для его реализации я написал эффект экранного пространства, результаты работы которого показаны ниже. Конвейер почти столь же прост, что и для обычных точечных источников. Он не требует структур данных объёмов, ray marching, и может быть без проблем подключен к уже существующему шейдеру освещения.

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


Небольшая сцена с космическим кораблём, отрендеренная в тумане при помощи моей техники
Читать дальше →
Total votes 11: ↑11 and ↓0+11
Comments3

Реализация эффекта акварели в играх

Reading time10 min
Views5.6K
image

Введение


Когда в январе 2019 года мы начали обсуждать нашу новую игру tint., то сразу решили, что важнейшим элементом будет эффект акварели. Вдохновлённые этой рекламой Bulgari, мы понимали, что реализация рисования акварелью должна соответствовать высокому качеству остальных ресурсов, которые мы планировали создать. Мы обнаружили интересную статью исследователей из Adobe(1). Описанная в ней техника создания акварели выглядела замечательно, а благодаря своей векторной (а не пиксельной) природе она могла работать даже на слабых мобильных устройствах. Наша реализация основана на этом исследовании, мы изменили и/или упростили отдельные его части, потому что наши требования к производительности были другими. tint. — это игра, поэтому кроме самого рисования нам нужно было в одном кадре рендерить всё 3D-окружение и выполнять игровую логику. Также мы стремились к тому, чтобы симуляция выполнялась в реальном времени и игрок сразу видел нарисованное.
Читать дальше →
Total votes 18: ↑18 and ↓0+18
Comments2

Реалистичная каустика отражений

Reading time8 min
Views15K

Большинство технических художников на каком-то этапе карьеры пытается создать правдоподобные отражения каустики. Если вы разработчик игр, то одна из основных причин чтения Twitter заключается в бесконечном потоке вдохновения, которое из него можно почерпать. Несколько дней назад Флориан Гельценлихтер (kolyaTQ в twitter) опубликовал GIF эффекта каустики, созданного в Unity при помощи шейдеров. Пост (представлен ниже) быстро набрал 1,5 тысячи лайков, что показывает искренний интерес к подобного типа контенту.


Хотя меня обычно больше привлекают более длинные и технически сложные серии статей (например, про объёмное атмосферное рассеяние света [перевод на Хабре] и инверсную кинематику [первая и вторая части перевода на Хабре]), я не смог удержаться перед искушением написать короткий и милый туториал об эффектах Флориана.

В конце этой статьи есть ссылка на скачивание пакета Unity и всех необходимых ассетов.
Total votes 33: ↑33 and ↓0+33
Comments6

Реализация физически корректных объемных облаков как в игре Horizon Zero Dawn

Reading time16 min
Views16K
Раньше облака в играх рисовались обычными 2D спрайтами, которые всегда повернуты в направлении камеры, но последние годы новые модели видеокарт позволяют рисовать физически корректные облака без заметных потерь в производительности. Считается, что объемные облака в игры принесла студия Guerrilla Games вместе с игрой Horizon Zero Dawn. Конечно, такие облака умели рендерить и раньше, но студия сформировала что-то вроде промышленного стандарта на исходные ресурсы и используемые алгоритмы, и в настоящее время любая реализация объемных облаков так или иначе этому стандарту соответствует.

UPD. Картинка обновлена. Изменения описаны в конце статьи.


Читать дальше →
Total votes 42: ↑40 and ↓2+38
Comments18

В этой статье слишком много воды

Reading time9 min
Views41K
«Мы начинаем разработку новой игры, и нам нужна классная вода. Такую сможешь?»


, — cпросили меня. «Да не вопрос! Конечно, смогу», — ответил я, но голос предательски задрожал. «А, еще и на Unity?», — и мне стало понятно, что впереди очень много работы.
Читать дальше →
Total votes 175: ↑174 and ↓1+173
Comments36

Написание шейдеров в Unity. GrabPass, PerRendererData

Reading time9 min
Views28K
Привет! Я хотел бы поделиться опытом написания шейдеров в Unity. Начнем с шейдера искажения пространства (Displacement/Refraction) в 2D, рассмотрим функционал, используемый для его написания (GrabPass, PerRendererData), а также уделим внимание проблемам, которые обязательно возникнут.

Информация пригодится тем, кто имеет общее представление о шейдерах и пробовал их создавать, но мало знаком с возможностями, которые предоставляет Unity, и не знает с какой стороны подступиться. Загляните, возможно, мой опыт поможет вам разобраться.


Читать дальше →
Total votes 53: ↑53 and ↓0+53
Comments9

Где мои деньги, чувак: о чем молчит Steam

Reading time8 min
Views89K
Это первая из шести статей, в которых я хочу рассмотреть весь процесс паблишинга игр на ПК от начала и до конца. Оставим за скобками разработку — помимо неё вас ждут много других приключений. Выбор издателя или самостоятельное издание, локализация и адаптация игры, маркетинг и PR, выбор цен и планирование скидок, работа с издателями, дистрибьюторами и посредниками.



Мы много будем говорить о Steam, самой крупной открытой платформе для игр, потом посмотрим на 3rd-party дистрибуцию и альтернативные варианты продаж. До того, как вы найдете свои собственные ответы — давайте трезво посмотрим на то, как маховик издания игр работает сейчас.

Простите, ребята, но это будет очень меркантильная статья с цифрами и процентами — я считаю, что если создание игр ваша страсть и ремесло, без них сложно уверенно идти вперёд. Начнём с цен, скидок и того, как работает список желаемого в Steam.
Читать дальше →
Total votes 122: ↑120 and ↓2+118
Comments182

Имитация естественного движения: Steering Behaviors

Reading time23 min
Views19K
image

Steering behaviors помогают автономным персонажам реалистично двигаться благодаря применению простых сил, сочетание которых создаёт естественно выглядящее и импровизированное движение по окружению. В этом туториале я расскажу об основах теории steering behaviors, а также об их реализации.

Идеи, на которых построены такие поведения, предложены Крейгом Рейндольдсом; они не основаны на сложных стратегиях с использованием планирования пути или глобальных вычислений, а применяют локальную информацию, например, силы соседних объектов. Благодаря этому они просты в понимании и реализации, но в то же время способны создавать очень сложные паттерны движения.
Total votes 41: ↑40 and ↓1+39
Comments7

Процедурная генерация подземелий в roguelike

Reading time31 min
Views45K
image

Процедурно генерируемые карты — базовая особенность roguelike. Для жанра, который почти является синонимом понятия «случайность» (и на то есть причины), рандомизированные карты стали простейшим способом демонстрации его ключевого элемента, потому что они влияют на многие аспекты геймплея — от стратегии исследования и тактического позиционирования до расположения предметов и врагов.

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

Поэтому рандомизированные карты обеспечивают нам бесконечную реиграбельность, каждый раз ставя перед нами разные задачи. Кроме того, удовольствие усиливается тем, что прогресс игрока зависит от его собственного навыка, а не от проб и ошибок. Схема каждой новой карты на 100% неизвестна, что тоже добавляет напряжённости процессу её изучения.

Конечно же, преимущества процедурных карт бессмысленны без большой вариативности механик и контента — однообразный hack-and-slash здесь не подойдёт. Поэтому все roguelike, выдержавшие испытание временем, имеют глубокий геймплей.

Этот пост является результатом моей работы над генерацией карт для Cogmind.
Читать дальше →
Total votes 41: ↑41 and ↓0+41
Comments4

Имитируем иридисценцию: шейдер CD-ROM

Reading time27 min
Views7.8K
Этот туториал посвящён иридисценции. В этом туториале мы исследуем саму природу света, чтобы понять и воссоздать поведение материала, создающего цветные отражения. Туториал предназначен для разработчиков игр на Unity, однако описанные в нём техники можно запросто реализовать на других языках, в том числе в Unreal и на WebGL.


Туториал будет состоять из следующих частей:

  • Часть 1. Природа света
  • Часть 2. Усовершенствуем радугу — 1
  • Часть 3. Усовершенствуем радугу — 2
  • Часть 4. Разбираемся с дифракционной решёткой
  • Часть 5. Математика дифракционной решётки
  • Часть 6. Шейдер CD-ROM: дифракционная решётка — 1
  • Часть 7. Шейдер CD-ROM: дифракционная решётка — 2
Total votes 19: ↑18 and ↓1+17
Comments10

Рендерим облака на мобильных девайсах

Reading time3 min
Views21K
3 года назад художник спросил меня:
— Слушай, а можно в нашу мобильную игру добавить красивые облачка?
— Нет, это абсолютно невозможно, у нас постоянно вращается камера, так что билборды будут смотреться очень фальшиво даже если на них добавить карты нормалей, а другие способы…
*художник погружается в летаргический сон*

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



Про фотореалистичный рендеринг облаков написано много статей, но если хочется рисовать облака на смартфоне, приходится придумывать кучу всяких хаков, упрощений и допущений.
Под катом подробное описание рендеринга облаков на мобильных и много html5 гифок.
Поехали!
Total votes 73: ↑71 and ↓2+69
Comments20

Алгоритмы антиалиасинга в реальном времени

Reading time19 min
Views46K
image

Алиасинг (aliasing) — это, возможно, наиболее фундаментальный и самый широко обсуждаемый артефакт 3D-рендеринга всех времён. Однако в игровом сообществе его часто недопонимают. В этой статье я подробно расскажу о теме сглаживания (антиалиасинга, anti-aliasing, AA) в реальном времени, особенно о том, что касается игр, и в то же время буду излагать всё достаточно простым языком.

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

Эту программу можно скачать здесь.

Прежде чем начать, позвольте мне сказать несколько слов о производительности: поскольку она является самым важным аспектом графики реального времени, мы в основном сосредоточимся на том, почему и как сегодня реализуется антиалиасинг. Я упомяну характеристики производительности, но строгая оценка всех представленных в этой статье способов антиалиасинга во разнообразных случаях реального использования будет слишком широкой темой для поста.
Читать дальше →
Total votes 75: ↑75 and ↓0+75
Comments12

Тернистый путь Hello World

Reading time16 min
Views33K

Вдохновение на написание данной статьи было получено после прочтения похожей публикации для архитектуры x86 [1].


Данный материал поможет тем, кто хочет понять, как устроены программы изнутри, что происходит до входа в main и для чего всё это делается. Также я покажу как можно использовать некоторые особенности библиотеки glibc. И в конце, как и в оригинальной статье [1] будет визуально представлен пройденный путь. В большинстве своём статья представляет собой разбор библиотеки glibc.


Итак, начнём наш поход. Будем использовать Linux x86-64, а в качестве инструмента отладки — lldb. Также иногда будем дизассемблировать программу при помощи objdump.


Исходным текстом будет обычный Hello, world (hello.cpp):


#include <iostream>
int main()
{
        std::cout << "Hello, world!" << std::endl;
}
Читать дальше →
Total votes 76: ↑75 and ↓1+74
Comments4

[в закладки] PDF-версия статей про Bash-скрипты

Reading time1 min
Views47K
Привет Хабр! Летом мы переводили цикл статей про Bash-скрипты — судя по отклику, статьи оказались для вас полезными. И, по многочисленным просьбам, мы решили сделать PDF-версию перевода.



Подробности под катом.
Читать дальше →
Total votes 41: ↑35 and ↓6+29
Comments20

Планетарный ландшафт

Reading time51 min
Views21K
Трудно поспорить, что ландшафт — неотъемлемая часть большинства компьютерных игр на открытых пространствах. Традиционный метод реализации изменения рельефа окружающей игрока поверхности следующий — берем сетку (Mesh), представляющую из себя плоскость и для каждого примитива в этой сетке производим смещение по нормали к этой плоскости на значение, конкретное для данного примитива. Говоря простыми словами, у нас есть одноканальная текстура размером 256 на 256 пикселей и сетка плоскости. Для каждого примитива по его координатам на плоскости берем значение из текстуры. Теперь просто смещаем по нормали к плоскости координаты примитива на полученное значение(рис.1)


Рис.1 карта высот + плоскость = ландшафт

Почему это работает? Если представить, что игрок находится на поверхности сферы, и радиус этой сферы чрезвычайно велик по отношению к размеру игрока, то искривлением поверхности можно пренебречь и использовать плоскость. Но что если не пренебрегать тем фактом, что мы находимся на сфере? Своим опытом построения такого рода ландшафтов я хочу поделиться с читателем в данной статье.
Читать дальше →
Total votes 82: ↑82 and ↓0+82
Comments16

Что за черт, Javascript

Reading time17 min
Views160K


Этот пост — список забавных и хитрых примеров на JavaScript. Это отличный язык. У него простой синтаксис, большая экосистема и, что гораздо важнее, огромное сообщество.


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

Читать дальше →
Total votes 104: ↑89 and ↓15+74
Comments155

Снимаем «4D видео» с помощью depth-сенсора и триангуляции Делоне

Reading time15 min
Views19K


Привет Хабр! Это заметка о небольшом хобби-проекте, которым я занимался в свободное время. Я расскажу, как с помощью несложных алгоритмов превращать карты глубины от depth-сенсоров в забавный вид контента — динамические 3D сцены (их ещё называют 4D video, volumetric capture или free-viewpoint video). Моя любимая часть в этой работе — алгоритм триангуляции Делоне, который позволяет превращать разреженные облака точек в плотную полигональную сетку. Приглашаю всех, кому интересно почитать про алгоритмы, самописные велосипеды на C++11, и, конечно же, посмотреть на трёхмерных котиков.

Для затравки: вот что получается при использовании RealSense R200: skfb.ly/6snzt (подождите несколько секунд для загрузки текстур, а затем используйте мышку, чтобы поворачивать сцену). Под катом есть ещё!
Обладатели лимитированных тарифов, будьте осторожны. В статье много разных изображений и иллюстраций.
Total votes 89: ↑88 and ↓1+87
Comments34

Современный CMake: 10 советов по улучшению скриптов сборки

Reading time8 min
Views80K

CMake — это система сборки для C/C++, которая с каждым годом становится всё популярнее. Он практически стал решением по умолчанию для новых проектов. Однако, множество примеров выполнения какой-либо задачи на CMake содержат архаичные, ненадёжные, раздутые действия. Мы выясним, как писать скрипты сборки на CMake лаконичнее.

Читать дальше →
Total votes 40: ↑40 and ↓0+40
Comments28

Information

Rating
Does not participate
Registered
Activity