Что такое рендеринг

Содержание

Что такое рендеринг? И что такое рендер? Словарь разработчиков компьютерных игр!

В продолжении ликбеза по компьютерной графике как для программистов, так и для художников хочу поговорить о том что такое рендеринг. Вопрос не так сложен как кажется, под катом подробное и доступное объяснение!

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

Что такое рендеринг? (для программистов)

Итак, Википедия дает такое определение: Ре́ндеринг (англ. rendering — «визуализация») — термин в компьютерной графике, обозначающий процесс получения изображения по модели с помощью компьютерной программы.

Довольно неплохое определение, продолжим с ним. Рендеринг — это визуализация. В компьютерной графике и 3д-художники и программисты под рендерингом понимают создание плоской картинки — цифрового растрового изображения из 3д сцены.
То есть, неформальный ответ на наш вопрос «Что такое рендеринг?» — это получение 2д картинки (на экране или в файле не важно). А компьютерная программа, производящая рендеринг, называется рендером (англ. render) или рендерером (англ. renderer).

Рендер

В свою очередь словом «рендер» называют чаще всего результат рендеринга. Но иногда и процесс называют так же (просто в английском глагол — render перенесся в русский, он короче и удобнее). Вы, наверняка, встречали различные картинки в интернете, с подписью «Угадай рендер или фото?». Имеется ввиду это 3D-визуализация или реальная фотография (уж настолько компьютерная графика продвинулась, что порой и не разберешься).

Виды рендеринга

В зависимости от возможности сделать вычисления параллельными существуют:

  • многопоточный рендеринг — вычисления выполняются параллельно в несколько потоков, на нескольких ядрах процессора,
  • однопоточный рендеринг — в этом случае вычисления выполняются в одном потоке синхронно.

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

В чем суть методов? Как работает растеризация и трасировка лучей? Начнем с растеризация.

Растеризация полигональной модели

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

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

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

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

Сложная модель персонажа состоит из мельчайших треугольников и растеризатор генерирует из неё вполне достоверную картинку. Почему тогда заморачиваться с трассировкой лучей? Почему не растеризовать и все? А смысл вот в чем, растеризатор знает только своё рутинное дело, треугольники — в пиксели. Он ничего не знает об объектах рядом с треугольником.

А это значит что все физические процессы которые происходят в реальном мире он учесть не в состоянии. Эти процессы прямым образом влияют на изображение. Отражения, рефлексы, тени, подповерхностное рассеивание и так далее! Все без чего мы будем видеть просто пластмассовые модельки в вакууме…
А игроки хотят графоний! Игрокам нужен фотореализм!

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

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

Трасировка лучей (англ. ray tracing)

Помните о корпускулярно волновом дуализме? Напомню в чем суть: свет ведёт себя и как волны и как поток частиц — фотонов. Так вот трассировка (от англ «trace» прослеживать путь), это симуляция лучей света, грубо говоря. Но трассирование каждого луча света в сцене непрактично и занимает неприемлемо долгое время.

Мы ограничимся относительно малым количеством, и будем трассировать лучи по нужным нам направлениям.
А какие направления нам нужны? Нам надо определять какие цвета будут иметь пиксели в результирующей картинке. Тоесть количество лучей мы знаем, оно равно количеству пикселей в изображении.

Что с направлением? Все просто, мы будем трассировать лучи в соответствии с точкой наблюдения (то как наша виртуальная камера направлена). Луч встретится в какой-то точке с объектом сцены (если не встретится, значит там темный пиксель или пиксель неба из скайбокса, например).

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

Рендеринг для художников

Но рендеринг это не только программная визуализация! Хитрые художники тоже используют его. Так что такое рендеринг с точки зрения художника? Примерно то же самое, что и для программистов, только концепт-художники выполняют его сами. Руками. Точно так же как рендерер в видео-игре или V-ray в Maya художники учитывают освещение, подповерхностное рассеивание, туман и др. факторы, влияющие на конечный цвет поверхности.

К примеру картинка выше, поэтапно прорабатывается таким образом: Грубый скетч — Лайн — Цвет — Объем — Рендер материалов.

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

Растеризация векторной графики

Суть примерно такая же, есть данные 2д кривых, это те контуры, которыми заданы объекты. У нас есть конечное растровое изображение и растеризатор переводит данные кривых в пиксели. После этого у нас нет возможности масштабировать картинку без потери качества.

Читайте дальше

Статьи из рубрики «Ликбез для начинающих разработчиков игр», скорее всего окажутся очень для Вас полезными, позвольте-с отрекомендовать:

  • Что такое шейдеры? — простое объяснение сложных и страшных шейдеров
  • Партиклы — система частиц — Полезный обзор частиц и подборка видео-уроков, по созданию спецэффектов в Unity3d

Послесловие

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

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

> Этимология слова «Рендер».

Слово Рендер (Рендеринг) — это англицизм, который зачастую переводится на русский язык словом “Визуализация”.

Что такое Рендеринг в 3D?

Чаще всего, когда мы говорим о рендере, то имеем в виду рендеринг в 3D графике. Сразу стоит отметить, что на самом деле в 3D рендере нету трех измерений как таковых, которые мы зачастую можем увидеть в кинотеатре надев специальные очки. Приставка “3D” в название скорее говорит нам о способе создание рендера, который и использует 3-х мерные объекты, созданные в компьютерных программах для 3D моделирования. Проще говоря, в итоге мы все равно получаем 2D изображение или их последовательность (видео) которые создавались (рендерелись) на основе 3-х мерной модели или сцены.

Рендеринг — это один из самых сложных в техническом плане этапов в работе с 3D графикой. Чтоб объяснить эту операцию простым языком, можно привести аналогию с работами фотографов. Для того, чтоб фотография предстала во всей красе, фотографу нужно пройти через некоторые технические этапы, например, проявление пленки или печать на принтере. Примерно такими же техническими этапами и обременены 3d художники, которые для создания итогового изображения проходят этап настройки рендера и сам процесс рендеринга.

Построение изображения.

Как уже говорилось ранее, рендеринг — это один из самых сложных технических этапов, ведь во время рендеринга идут сложные математические вычисления, выполняемые движком рендера. На этом этапе, движок переводит математические данные о сцене в финальное 2D-изображение. Во время процесса идет преобразование 3d-геометрии, текстур и световых данных сцены в объединенную информацию о цветовом значение каждого пикселя в 2D изображение. Другими словами, движок на основе имеющихся у него данных, просчитывает то, каким цветом должен быть окрашено каждый пиксель изображения для получения комплексной, красивой и законченной картинки.

Основные типы рендеринга:

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

Что такое Рендеринг в реальном времени?

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

Поскольку ключевым фактором в таком типе рендеринга есть интерактивность со стороны пользователя, то изображение приходится просчитывать без задержек и практически в реальном времени, так как невозможно точно предсказать поведение игрока и то, как он будет взаимодействовать с игровой или с интерактивной сценой. Для того, чтоб интерактивная сцена или игра работала плавно без рывков и медлительности, 3D движку приходится рендерить изображение со скоростью не менее 20-25 кадров в секунду. Если скорость рендера будет ниже 20 кадров, то пользователь будет чувствовать дискомфорт от сцены наблюдая рывки и замедленные движения.

Большую роль в создание плавного рендера в играх и интерактивных сценах играет процесс оптимизации. Для того, чтоб добиться желаемой скорости рендера, разработчики применяют разные уловки для снижения нагрузки на рендер движок, пытаясь снизить вынужденное количество просчетов. Сюда входит снижение качества 3д моделей и текстур, а также запись некоторой световой и рельефной информации в заранее запеченные текстурные карты. Также стоит отметить, что основная часть нагрузки при просчете рендера в реальном времени ложиться на специализированное графическое оборудование (видеокарту -GPU), что позволяет снизить нагрузку с центрального процессора (ЦП) и освободить его вычислительные мощности для других задач.

Что такое Предварительный рендер?

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

В отличие от Рендера в реальном времени, где основная нагрузка приходилась на графические карты(GPU) В предварительном рендере нагрузка ложится на центральный процессор(ЦП) а скорость рендера зависит от количества ядер, многопоточности и производительности процессора.

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

Программы для рендеринга.

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

Как правило, рендер движки являются встроенными в крупные 3D программы для работы с графикой и имеют огромный потенциал. Среди наиболее популярных 3D программ (пакетов) есть такой софт как:

  • 3ds Max;
  • Maya;
  • Blender;
  • Cinema 4d и др.

Многие из этих 3D пакетов имеют уже идущие в комплекте рендер движки. К примеру, рендер-движок Mental Ray присутствует в пакете 3Ds Max. Также, практически любой популярный рендер-движок, можно подключить к большинству известных 3d пакетов. Среди популярных рендер движков есть такие как:

  • V-ray;
  • Mental ray;
  • Corona renderer и др.

Хотелось бы отметить, что хоть и процесс рендеринга имеет очень сложные математические просчеты, разработчики программ для 3D-рендеринга всячески пытаются избавить 3D-художников от работы со сложной математикой лежащей в основе рендер-программы. Они пытаются предоставить условно-простые для понимания параметрические настройки рендера, также материальные и осветительные наборы и библиотеки.

Многие рендер-движки сыскали славу в определенных сферах работы с 3д графикой. Так, например, “V-ray” имеет большую популярность у архитектурных визуализаторов, из-за наличия большого количества материалов для архитектурной визуализации и в целом, хорошего качества рендера.

Методы визуализации.

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

1. Scanline (сканлайн).

Сканлайн рендер — выбор тех, кто приоритет отдаст скорости, а не качеству. Именно за счет своей скорости, данный тип рендера зачастую используется в видеоиграх и интерактивных сценах, а также во вьюпортах различных 3D пакетов. При наличие современного видеоадаптера, данный тип рендера может выдавать стабильную и плавную картинку в реальном времени с частотой от 30 кадров в секунду и выше.

Алгоритм работы:

Вместо рендеринга «пикселя по пикселю», алгоритм функционирования «scanline» рендера заключается в том, что он определяет видимую поверхность в 3D графике, и работая по принципу «ряд за рядом», сперва сортирует нужные для рендера полигоны по высшей Y координате, что принадлежит данному полигону, после чего, каждый ряд изображения просчитывается за счет пересечения ряда с полигоном, который является ближайшим к камере. Полигоны, которые больше не являются видимыми, удаляются при переходе одного ряда к другому.

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

2. Raytrace (рейтрейс).

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

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

Идея Raytrace алгоритма заключается в том, что для каждого пикселя на условном экране, от камеры прослеживается один или несколько лучей до ближайшего трехмерного объекта. Затем луч света проходит определенное количество отскоков, в которые может входить отражения или преломления в зависимости от материалов сцены. Цвет каждого пикселя вычисляется алгоритмически на основе взаимодействия светового луча с объектами в его трассируемом пути.

Метод Raycasting.

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

Нередко бывает, что «метод трассировки лучей» (raytrace) путают с методом «бросания лучей» (raycasting). Но на самом деле, «raycasting» (метод бросания луча) фактически является упрощенным «raytrace» методом, в котором отсутствует дальнейшая обработка отбившихся или заломленных лучей, а просчитывается только первая поверхность на пути луча.

3. Radiosity.

Вместо «метода трассировки лучей», в данном методе просчет работает независимо от камеры и является объектно-ориентированным в отличие от метода «пиксель по пикселю». Основная функция “radiosity” заключается в том, чтобы более точно имитировать цвет поверхности путем учета непрямого освещения (отскок рассеянного света).

Преимуществами «radiosity» являются мягкие градуированные тени и цветовые отражения на объекте, идущие от соседних объектов с ярким окрасом.

Достаточно популярна практика использования метода Radiosity и Raytrace вместе для достижения максимально впечатляющих и фотореалистичных рендеров.

Что такое Рендеринг видео?

Иногда, выражение «рендерить» используют не только в работе с компьютерной 3D графикой, но и при работе с видеофайлами. Процесс рендеринга видео начинается тогда, когда пользователь видеоредактора закончил работу над видеофайлом, выставил все нужные ему параметры, звуковые дорожки и визуальные эффекты. По сути, все что осталось, это соединить все проделанное в один видеофайл. Этот процесс можно сравнить с работой программиста, когда он написал код, после чего все что осталось, это скомпилировать весь код в работающую программу.

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

Contract Wars Club

Ответы на популярные вопросы.
Большая просьба прочесть данный FAQ перед там как задавать вопросы в сообществе.
Какие системные требования у игры?
Минимальные системные требования игры
Процессор: AMD 64 3200+ или Intel Pentium 4 3.0GHz или лучше
Память: 1 Gb Видео: Shader 2.0 или выше 256 Mb nVidia GeForce 6600GT / ATI Radeon 1600 XT или лучше
Интернет: 5 мбит/сек Браузер: Google Chrome (предпочтительно), Internet Explorer 9, firefox.
Как запустить игру?
прочитать первое сообщение данной темы: http://fotostrana.ru/community/45979/forum/57715/subforum/128081/…st/336914/
если описанное в ней не помогает , написать о вашей проблеме в этой теме группы
У меня возникли проблемы с запуском игры, что делать?
прочитать первое сообщение данной темы
http://fotostrana.ru/community/45979/forum/57715/subforum/128081/…st/336915/
если описанное в ней не помогает , написать о вашей проблеме в этой теме группы
Как играть в игру?
Чтобы играть в игру вам необходимо зайти на игровой сервер.
Для этого нажмите «Поиск игр» и у вас появится список доступных серверов.
Если у вас не появляется список серверов , читайте ниже
У меня не показывает список серверов, что делать?
Список серверов не показывается, если на компьютере есть ПО, блокирующее сетевые соединения. Попробуйте отключить брэндмауэр, антивирус, плагины к браузеру, блокировщики рекламы. Также соединение может блокировать роутер, или иное оборудования провайдера. Для начала имеет смысл последовательно отключать вышеперечисленное ПО до тех пор, пока список серверов не появится. Для справки — должен быть открыт порт 23466.
Почему не пускает на сервер?
Убедитесь что вы подходите по уровню к данном серверу , так как у каждого сервера есть ограничение по уровню. Также убедитесь что сервер не заполнен , в этом случае вам тоже нельзя будет зайти на сервер.
У меня загрузка остановилась на 98-99 процентах! Что делать?
Видимо у вас слишком медленная скорость интернета. Для комфортного скачивания контента игры нужно минимальная скорость интернета в 5 мегабит/сек. В противном случае вам просто придется долго ждать загрузки. Как вариант — можно очистить кэш и попробовать зайти еще раз.
Где можно скачать игру?
Игру не нужно скачивать , все что нужно скачать это Unity Web Player и играть через ваш интернет браузер. Тем не менее , разработчики обещают выпустить клиент в первом-втором квартале(первые 6 месяцев) 2012 года.
Когда будет клиент?
в первом-втором квартале(первые 6 месяцев) 2012года
Можно ли играть на Mac?
На компьютерах apple перед игрой нужно обязательно перенастроить клавиши управления. Игра работает на MacOS, но официальной поддержки пока что нет.
Будет ли клиент под линукс?
Нет, пока это невозможно сделать технически, в будущем — возможно.
Как сделать игру на весь экран?
Клавиша F12. Эту клавишу при желании можно поменять в настройках управления.
Как поменять чувствительность мыши?
В настройках управления игры.
Как выбрать оружие?
В нижнем левом углу есть наборы снаряжения. Нужно выбрать набор снаряжения который вам нужен , выбрать оружие и перки которые вы хотите и нажать на иконку дискетки возле выбранного набора. В игре можно играть только выбранным набором снаряжения. Во время игры можно менять только наборы снаряжения.
Как писать в чат?
Клавиша ENTER для команды.
Клавиша Y для всех (либо комбинация ENTER+SHIFT).
Что такое консоль?
Область для ввода команд и просмотра различного рода отладочной информации (клавиша Ё).
Сохранится ли то , что я накопил играя вконтакте (в альфа, бета версии т.п.) при переходе в клиентскую версию (либо на новые версии)?
Да
Что такое пинг?
Показатель качества интернет соединения , а именно задержки сигнала между вами и игровым сервером. Чем выше , тем хуже соединение.
Что мне сделать чтоб пинг стал меньше?
Постарайтесь выключить все сторонние программы , которые требуют постоянного интернет соединения. Минимальная скорость интернета для игры должна быть не менее 3-5 мегабит/сек
Я нашел баг,что мне делать и что мне за это будет?
Лучше всего сообщить о баге вот в эту тему
http://fotostrana.ru/community/45979/forum/57715/subforum/128080/…st/336918/
Желательно убедится что о баге никто еще не писал , чтобы не повторятся. Если вы будете постоянно искать баги , то вы можете получить поощрение от разработчиков.
Что будет если я буду использовать баги?
Если вы будете пользоватся багами для какой-либо цели в игре , то вы получите бан.
Почему меня забанили?
Вероятнее всего вы нарушили одно из правил группы или игры описанные в правилах игры
Я закинул ФМ, а золото(ГП) не получил, что делать?
Обратитесь в эту тему , внимательно прочитав первое сообщение , прежде чем чтото писать.
http://fotostrana.ru/community/45979/forum/57715/subforum/128081/…st/336919/
Что такое Black Division(BD)?
Black Division это клан , созданный разработчиками вступит ьв который сможет каждый по достижению определенных требований, которые будут опубликованы позже уровня. В этом клане можно будет выполнять специальные задания , а также зарабатывать Black Gold.
Что такое hardcore режим?
В будущем будет второй режим игры под названием hardcore в котором игроки будут сражатся в условиях приближенных к реальности.
Что такое iron sight (aim to sights)?
Это механические прицельные приспособления на оружии , в компьютерных играх чаще всего так называют режим прицеливания.
А будут ли и другие поддержки вроде сонара и минометного удара?
Будет , так же будет еще снайперская поддержка, ракетный удар, пулеметная поддержка и т.д.
Почему в игре всего 49 лвл?
Потомучто последующие уровни и сеты оружия находятся в стадии разработки, как и сама игра.
Когда будет 5ый сет?
Когда его сделают , точной даты неизвестно.
Будут ли еще сеты?
Всего будет 6 сетов + несколько специальных сетов
Будет ли в игре бег(спринт)?
Будет, но позже
Будет ли возможность опробовать оружие перед покупкой?
Да, позже будет создано стрельбище

В игре будут разные скины(камуфляжи,модельки) солдат?
Да, но еще не скоро.
Будет ли новое оружие?
да , арсенал Contract Wars постоянно пополняется новым оружием. В игре CW будет больше всего оружия в сравнении с другими шутерами.
Будет ли в игре бронетехника?
Нет , игра нацелена на битвах живой силы(пехоты). Но возможно будет вызов поддержки легкого вертолета либо suv
Будет ли в игре клановая система и битвы кланов?
Да, будет большая клановая система, но когда — пока не известно.
Будет ли возможность полной модификации оружия(в том числе и цветовая схема)?
Да , но не скоро и неизвестно когда.
Будет ли возможность подбирать чужое оружие?
Да
Есть ли читы или возможность использовать читы?
Нет, в отличии от других шутеров в КВ читерство невозможно
Будут новые карты(уровни)?
Да , новые карты(уровни) постоянно находятся в разработке. Скриншоты карт которые будут добавлены в альбомы сообщества.
Будут ли новые игровые режимы?
Да
Будет ли возможность воевать против ботов(управляемых компьюетром противников)?
Планируется
Что такое Хит-Детекшен?
Это регистрация сервером попаданий пуль игроков.
У меня зависает игра во время загрузки уровня, что делать?
Вывйдите из игры, очистите кэш браузера, попробуйте снова. Инструкцию как очистить кэш браузера легко можно найти в поисковиках.
Игра сильно лагает, почему?
Скорее всего у вас одна из последующих проблем:
-Медленный интернет
-Вы живете далеко от сервера
-У вас слабый компьютер
По остальным вопросам пишите вот сюда
http://fotostrana.ru/community/45979/forum/57715/subforum/128081/…st/336914/
Владельцам видеокарт Radeon.
Если вы испытываете проблему с рендерингом в игре (изображение палочками и квадратиками) — решить ее можно установкой фирменных[ драйверов с сайта
Проверено в частности на ATI Radeon HD 3800 Series



Рендеринг

Фотореалистичное изображение, созданное POV-Ray 3.6. Модели кувшина, стаканов и пепельницы созданы при помощи Rhinoceros 3D, модель игральной кости — в Cinema 4D.

Ре́ндеринг (англ. rendering — «визуализация») — термин в компьютерной графике, обозначающий процесс получения изображения по модели с помощью компьютерной программы.

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

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

Часто в компьютерной графике (художественной и технической) под рендерингом (3D-рендерингом) понимают создание плоского изображения (картинки) по разработанной 3D-сцене. Изображение — это цифровое растровое изображение. Синонимом в данном контексте является Визуализация.

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

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

Компьютерная программа, производящая рендеринг, называется рендером (англ. render) или рендерером (англ. renderer).

Методы рендеринга (визуализации)

На текущий момент разработано множество алгоритмов визуализации. Существующее программное обеспечение может использовать несколько алгоритмов для получения конечного изображения.

Трассирование каждого луча света в сцене непрактично и занимает неприемлемо долгое время. Даже трассирование малого количества лучей, достаточного, чтобы получить изображение, занимает чрезмерно много времени, если не применяется аппроксимация (семплирование).

Вследствие этого, было разработано четыре группы методов, более эффективных, чем моделирование всех лучей света, освещающих сцену:

  • Растеризация (англ. rasterization) совместно с методом сканирования строк (англ. scanline rendering). Визуализация производится проецированием объектов сцены на экран без рассмотрения эффекта перспективы относительно наблюдателя.
  • Ray casting (рейкастинг) (англ. ray casting). Сцена рассматривается, как наблюдаемая из определённой точки. Из точки наблюдения на объекты сцены направляются лучи, с помощью которых определяется цвет пиксела на двумерном экране. При этом лучи прекращают своё распространение (в отличие от метода обратного трассирования), когда достигают любого объекта сцены либо её фона. Возможно использование каких-либо очень простых способов добавления оптических эффектов. Эффект перспективы получается естественным образом в случае, когда бросаемые лучи запускаются под углом, зависящим от положения пикселя на экране и максимального угла обзора камеры.
  • Трассировка лучей (англ. ray tracing) похожа на метод бросания лучей. Из точки наблюдения на объекты сцены направляются лучи, с помощью которых определяется цвет пиксела на двумерном экране. Но при этом луч не прекращает своё распространение, а разделяется на три компонента, луча, каждый из которых вносит свой вклад в цвет пиксела на двумерном экране: отражённый, теневой и преломленный. Количество таких разделений на компоненты определяет глубину трассирования и влияет на качество и фотореалистичность изображения. Благодаря своим концептуальным особенностям, метод позволяет получить очень фотореалистичные изображения, но при этом он очень ресурсоёмкий, и процесс визуализации занимает значительные периоды времени.
  • Трассировка пути (англ. path tracing) содержит похожий принцип трассировки распространения лучей, однако этот метод является самым приближенным к физическим законам распространения света. Также является самым ресурсоёмким.

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

Математическое обоснование

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

Основное уравнение

Основная статья: Уравнение рендеринга

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

Неформальное толкование таково: Количество светового излучения (Lo), исходящего из определённой точки в определённом направлении есть собственное излучение и отражённое излучение. Отражённое излучение есть сумма по всем направлениям приходящего излучения (Li), умноженного на коэффициент отражения из данного угла. Объединяя в одном уравнении приходящий свет с исходящим в одной точке, это уравнение составляет описание всего светового потока в заданной системе.

Программное обеспечение для рендеринга — рендеры (визуализаторы)

  • 3Delight
  • AIR
  • ART
  • AQSIS
  • Angel
  • BMRT (Blue Moon Rendering Tools) (распространение прекращено)
  • Brazil R/S
  • BusyRay
  • Entropy (продажи прекращены)
  • finalRender
  • Fryrender
  • Gelato (разработка прекращена в связи с покупкой NVIDIA, mental ray)
  • Holomatix Renditio (интерактивный рейтрейсер)
  • Hypershot
  • Indigo Renderer
  • Kerkythea
  • Keyshot
  • mental ray
  • LuxRender
  • Mantra renderer
  • Maxwell Render
  • Meridian
  • POV-Ray
  • Pixie
  • RenderDotC
  • RenderMan (PhotoRealistic RenderMan, Pixar’s RenderMan или PRMan)
  • Sunflow
  • Turtle
  • V-Ray
  • YafaRay
  • Octane Render
  • Arion Renderer

Рендереры, работающие в реальном (или почти в реальном) времени.

  • Arion
  • VrayRT
  • FinalRender
  • iray
  • Shaderlight
  • Showcase
  • Rendition
  • Brazil IR
  • Artlantis Render
  • Cycles

Пакеты трёхмерного моделирования, имеющие собственные рендереры

Таблица сравнения свойств рендеров

RenderMan mental ray Gelato (разработка прекращена) V-Ray finalRender Brazil R/S Turtle Maxwell Render Fryrender Indigo Renderer LuxRender Kerkythea YafaRay
совместим с 3ds Max Да, через MaxMan встроен Да Да Да Да Нет Да Да Да Да Да Нет
совместим с Maya Да, через RenderMan Artist Tools встроен Да Да Да Нет Да Да Да Да Да Нет
совместим с Softimage Да, через XSIMan встроен Нет Да Нет Нет Нет Да Да Да Да Нет
совместим с Houdini Да Да Нет Нет Нет Нет Нет Нет Да Да Нет Нет
совместим с LightWave Нет Нет Нет Нет Нет Нет Нет Да Да Нет Нет Нет
совместим с Blender Нет Нет Нет Нет Нет Нет Нет Нет Нет Да Да Да Да
совместим с SketchUp Нет Нет Нет Да Нет Нет Нет Да Да Да Нет Да Нет
совместим с Cinema 4D Да (начиная с 11-ой версии) Да Нет Да Да Нет Нет Да Да Да Да Нет, заморожен Нет
платформа Microsoft Windows, Linux, Mac OS X Microsoft Windows, Linux, Mac OS X
biased, unbiased (без допущений) biased biased biased biased biased biased biased unbiased unbiased unbiased unbiased
scanline Да Да Да Нет Нет Нет Нет Нет Нет Нет Нет
raytrace очень медленный Да Да Да Да Да Да Нет Нет Нет Нет Да
алгоритмы Global Illumination или свои алгоритмы Photon, Final Gather (Quasi-Montecarlo) Light Cash, Photon Map, Irradiance Map, Brute Force (Quasi-Montecarlo) Hyper Global Illumination, Adaptive Quasi-Montecarlo, Image, Quasi Monte-Carlo Quasi-Montecarlo, PhotonMapping Photon Map, Final Gather Metropolis Light Transport Metropolis Light Transport Metropolis Light Transport Metropolis Light Transport, Bidirectional Path Tracing
Camera — Depth of Field (DOF) Да Да Да Да Да Да Да Да Да Да Да Да Да
Camera — Motion Blur (vector pass) очень быстрый Да быстрый Да Да Да Да Да Да Да Да Да
Displacement быстрый Да быстрый медленный, 2d и 3d медлленный Нет быстрый Да Да Да Да
Area Light Да Да Да Да Да Да Да Да Да Да
Glossy Reflect/Refract Да Да Да Да Да Да Да Да Да Да Да Да
SubSurface Scattering (SSS) Да Да Да Да Да Да Да Да Да Да Нет Да
Standalone Да Да Да 2005 года (сырая) Нет Нет Нет Да Да Да
текущая версия 13.5,2,2 3.7 2.2 2.02a Stage-2 2 4.01 1.61 1.91 1.0.9 v1.0-RC4 Kerkythea 2008 Echo 0.1.1 (0.1.2 Beta 5a)
год выпуска 1987 1986 2003 2000 2002 2000 2003 2007 (?) 2006 (?) 2006 2011 2008
библиотека материалов Нет 33 My mentalRay Нет 2300+ vray-materials 30 оф. сайт 113 оф. сайт Нет 3200+ оф. сайт 110 оф. сайт 80 оф. сайт 61 оф. сайт
основан на технологии liquidlight Metropolis Light Transport
normal mapping
IBL/HDRI Lighting Да
Physical sky/sun Да Да
официальный сайт MaxwellRender.com Fryrender.com IndigoRenderer.com LuxRender.net kerkythea.net YafaRay.org
страна производитель США Германия США Болгария Германия США Швеция Испания Испания
стоимость $ 3500 195 бесплатное 1135 (Super Bundle) 999 (Bundle) 899 (Standart) 240 (Educational) 1000 735 1500 995 1200 295€ бесплатное, GNU бесплатное бесплатное, LGPL 2.1
основное преимущество Baking высокая скорость (не очень высокое качество) бесплатное бесплатное бесплатное
компания производитель Pixar mental images (c 2008 NVIDIA) NVIDIA Chaos Group Cebas SplutterFish Illuminate Labs Next Limit Feversoft

См. также

В Википедии есть портал
«Компьютерная графика»
  • Ray tracing
  • Шейдер
  • Алгоритмы использующие z-буфер и Z-буферизация
  • Нефотореалистичный рендеринг
  • Алгоритм художника
  • Алгоритмы построчного сканирования like Reyes
  • Алгоритмы глобального освещения
  • Излучательность
  • Отсечение
  • Текст как изображение
  • Рендер-ферма

> Хронология важнейших публикаций

Как работает рендеринг 3D-игр: обработка вершин

В этом посте мы рассмотрим этап работы с вершинами. То есть нам придётся снова достать учебники по математике и вспомнить линейную алгебру, матрицы и тригонометрию. Ура!
Мы выясним, как преобразуются 3D-модели и учитываются источники освещения. Также мы подробно объясним разницу между вершинными и геометрическими шейдерами, и вы узнаете, на каком этапе находится место для тесселяции. Чтобы облегчить понимание, мы используем схемы и примеры кода, демонстрирующие, как в игре выполняются вычисления и обрабатываются значения.
На скриншоте в начале поста показана игра GTA V в каркасном (wireframe) режиме отображения. Сравните её с намного менее сложным каркасным отображением Half-Life 2. Изображения созданы thalixte при помощи ReShade.

Что такое точка?

В мире математики точка — это просто место в геометрическом пространстве. Нет ничего меньше точки, она не имеет размера, поэтому точки можно использовать для точного задания местоположения начала и конца таких объектов, как отрезки прямых, плоскости и объёмы.
Для 3D-графики такая информация критически важна, от неё зависит внешний вид всего, потому что все объекты отображаются как наборы отрезков прямых, плоскостей и т.п. На изображении ниже показан скриншот из игры Bethesda 2015 года Fallout 4:
Возможно, вам будет непросто увидеть, что это всего лишь огромная куча точек и линий, поэтому мы покажем, как та же сцена выглядит в режиме wireframe. В таком режиме движок 3D-рендеринга пропускает текстуры и эффекты, выполняемые на этапе пикселей, и отрисовывает только разноцветные линии, соединяющие точки.
Теперь всё выглядит совершенно иначе, но мы видим, как все линии объединяются, образуя различные объекты, окружения и фон. Некоторые состоят всего лишь из десятков линий, например, камни на переднем плане, другие же содержат столько линий, что выглядят сплошными.
Каждая точка в начале и конце каждой линии обработана выполнением целой кучи вычислений. Некоторые вычисления очень просты и быстры, другие намного сложнее. Обрабатывая точки группами, особенно в виде треугольников, можно добиться значительного роста производительности, поэтому давайте внимательнее приглядимся к ним.

Что же нужно для треугольника?

Название треугольник даёт нам понять, что фигура имеет три внутренних угла; для этого ей нужны три угловых точки и три соединяющих их отрезка. Правильно называть угловую точку вершиной (vertex) (во множественном числе — vertices); каждая вершина задаётся точкой. Так как мы находимся в трёхмерном геометрическом мире, то для точек используется декартова система координат. Обычно координаты записываются в виде трёх значений, например, (1, 8, -3), или обобщённо (x, y, z).
Далее мы можем добавить ещё две вершины, чтобы образовать треугольник:
Учтите, что показанные линии не обязательны — мы можем задать точки и сказать системе, что эти три вершины образуют треугольник. Все данные вершин хранятся в непрерывном блоке памяти, который называется буфером вершин (vertex buffer); информация об образуемой ими фигуре или закодирована непосредственно в программе рендеринга, или хранится в ещё одном блоке памяти, называемом буфером индексов (index buffer).
Если информация закодирована в программе рендеринга, то различные фигуры, которые могут образованы вершинами, называются примитивами. Direct3D предлагает использовать для них список (list), полосы (strips) и «вееры» (fans) в форме точек, линий и треугольников. При правильном использовании полосы треугольников используют вершины более чем для одного треугольника, что позволяет повысить производительность. В показанном ниже примере мы видим, что для создания соединённых вместе двух треугольников нужно всего четыре вершины — если они разделены, то нам понадобится шесть вершин.
Слева направо: список точек, список линий и полоса треугольников
Если нам нужно обрабатывать больший набор вершин, например, в модели игрового NPC, то лучше использовать объект под названием меш (mesh) — ещё один блок памяти, но состоящий из нескольких буферов (вершин, индексов и т.д.) и ресурсов текстур модели. В онлайн-документации Microsoft есть краткое объяснение того, как использовать эти буферы.
Пока давайте сосредоточимся на том, что происходит с этими вершинами в 3D-игре при рендеринге каждого нового кадра. Если вкратце, то с ними выполняется одна из двух операций:

  • Вершина перемещается в новую позицию
  • Меняется цвет вершины

Готовы к математике? Отлично, потому что она нам и понадобится.

На сцене появляется вектор

Представьте, что у вас на экране есть треугольник и вы нажимаете клавишу, чтобы переместить его влево. Естественно, мы ожидаем, что числа (x, y, z) каждой вершины будут соответствующим образом меняться; так и происходит, однако довольно неожиданно выглядит способ реализации изменений. Вместо простого изменения координат подавляющее большинство систем рендеринга 3D-графики использует особый математический инструмент: мы имеем в виду векторы.
Вектор можно представить как стрелку, направленную в определённую точку пространства и имеющую нужную длину. Вершины обычно задаются при помощи векторов на основе декартовых координат:
Заметьте, что синяя стрелка начинается в одном месте (в данном случае это точка начала координат (origin)) и растягивается до вершины. Для задания вектора мы использовали запись в столбец, но вполне можно применять и запись в строку. Вы могли заметить, что есть ещё одно, четвёртое, значение, обычно называемое w-компонентом. Оно используется для того, чтобы показать, что обозначает вектор: позицию точки (вектор позиции) или общее направление (вектор направления). В случае вектора направления это будет выглядеть следующим образом:
Этот вектор указывает в том же направлении и имеет ту же длину, что и предыдущий вектор позиции, то есть значения (x, y, z) будут такими же; однако w-компонент равен не 1, а нулю. Применение векторов направлений мы объясним позже, а пока запомните тот факт, что все вершины в 3D-сцене будут описываться таким образом. Почему? Потому что в таком формате гораздо проще их перемещать.

Математика, математика, и ещё раз математика

Вспомним, что у нас есть простой треугольник и мы хотим переместить его влево. Каждая вершина описывается вектором позиции, поэтому «математика перемещения» (называемая преобразованиями) должна работать с этими векторами. Появляется новый инструмент: матрицы (matrices) (matrix в единственном числе). Это массив значений, записанный в формате, похожем на электронную таблицу Excel, со строками и столбцами.
Для каждого типа преобразований существует соответствующая матрица, и для преобразования достаточно просто перемножить матрицу преобразования и вектор позиции. Мы не будем вдаваться в подробности того, как и почему это происходит, а просто посмотрим, как это выглядит.
Перемещение вершины в 3D-пространстве называется переносом (translation) и для него требуется следующий расчёт:
Значения x0, и т.д. представляют исходные координаты вектора; значения delta-x представляют величину, на которую нужно переместить вершину. Перемножение матрицы и вектора приводит к тому, что они просто суммируются (заметьте, что w-компонент остаётся неизменным, чтобы готовый ответ по-прежнему оставался вектором позиции).
Кроме перемещения нам также может понадобиться поворачивать треугольник или изменять его масштаб — для этих операций тоже существуют преобразования.
Это преобразование поворачивает вершину вокруг оси z в плоскости XY
А это используется, если нужно изменить масштаб фигуры
Мы можем воспользоваться графическим инструментом на основе WebGL с сайта Real-Time Rendering, чтобы визуализировать эти вычисления для всей фигуры. Давайте начнём с прямоугольного параллелепипеда в стандартной позиции:
В этом онлайн-инструменте model point является вектором позиции, world matrix — матрицей преобразования, а world-space point — вектором позиции для преобразованной вершины.
Давайте применим к параллелепипеду различные преобразования:
На показанном выше изображении фигура была перенесена на 5 единиц по каждом из осей. Эти значения можно видеть в последнем столбце средней большой матрицы. Исходный вектор позиции (4, 5, 3, 1) остаётся таким же, как и должен, но преобразованная вершина теперь перенесена в (9, 10, 8, 1).
В это преобразовании всё было отмасштабировано на коэффициент 2: теперь стороны параллелепипеда стали в два раза длинее. Наконец, посмотрим на пример поворота:
Параллелепипед был повёрнут на угол 45°, но в матрице используются синус и косинус этого угла. Проверив на научном калькуляторе, мы можем увидеть, что sin(45°) = 0.7071…, что округляется до показанного значения 0.71. Тот же ответ мы получим для значения косинуса.
Матрицы и векторы использовать не обязательно; популярной альтернативой для них, особенно в случае обработки сложных поворотов, является использование комплексных чисел и кватернионов. Эти вычисления сильно отличаются от векторов, поэтому мы не будем их рассматривать, продолжив работать с преобразованиями.

Мощь вершинного шейдера

На этом этапе нам нужно уяснить, что всем этим занимаются люди, программирующие код рендеринга. Если разработчик игр использует сторонний движок (например, Unity или Unreal), то всё это уже сделано за него; но если кто-то делает свой движок с нуля, то ему придётся выполнять все эти вычисления с вершинами.
Но как всё это выглядит с точки зрения кода?
Чтобы понять это, мы воспользуемся примерами с потрясающего веб-сайта Braynzar Soft. Если вы хотите самостоятельно начать работу с 3D-программированием, то это подходящее место для изучения основ, а также более сложных вещей…
Это пример преобразования «всё в одном». Он создаёт соответствующие матрицы преобразования на основании ввода с клавиатуры, а затем применяет их к исходному вектору позиции за одну операцию. Заметьте, что это всегда выполняется в заданном порядке (масштабирование — поворот — перенос), потому что любой другой способ совершенно испортит результат.
Такие блоки кода называются вершинными шейдерами (vertex shaders), их сложность и размер могут варьироваться в огромных масштабах. Показанный выше пример прост, это только вершинный шейдер, не использующий полной программируемой природы шейдеров. Более сложная последовательность шейдеров могла бы преобразовывать объекты в 3D-пространстве, обрабатывать их внешний вид с точки зрения камеры сцены, а затем передавать данные на следующий этапе процесса рендеринга. Рассматривая порядок обработки вершин, мы изучим и другие примеры.
Разумеется, они могут использоваться для гораздо большего, поэтому, играя в 3D-игру, не забывайте, что всё движение, которое вы видите, выполнено графическим процессором, исполняющим команды вершинных шейдеров.
Однако так было не всегда. Если вернуться в середину-конец 1990-х, то графические карты той эпохи не имели возможности самостоятельно обрабатывать вершины и примитивы, всем этим в одиночку занимался центральный процессор.
Одним из первых процессоров, имеющих собственное аппаратное ускорение данного процесса, был Nvidia GeForce, выпущенный в 2000 году, и эту функциональность назвали Hardware Transform and Lighting (сокращённо Hardware TnL). Процессы, которые могло обрабатывать это оборудование, были очень ограниченными с точки зрения команд, но с выходом новых чипов ситуация быстро менялась. Сегодня не существует отдельного оборудования для обработки вершин и одно устройство занимается всем сразу: точками, примитивами, пикселями, текстурами и т.д.
К слову, об освещении (lighting): стоит заметить, что мы видим всё благодаря свету, поэтому давайте посмотрим, как его можно обрабатывать на этапе вершин. Для этого нам нужно воспользоваться тем, о чём мы говорили ранее.

Свет, камера, мотор!

Представьте такую картину: игрок стоит в тёмной комнате, освещённой одним источником света справа. В середине комнаты висит огромный чайник. Возможно, для этого вам понадобится помощь, поэтому давайте воспользуемся веб-сайтом Real-Time Rendering, и увидим, как это будет выглядеть:
Не забывайте, что этот объект является набором соединённых вместе плоских треугольников; то есть плоскость каждого треугольника будет направлена в определённую сторону. Некоторые из них направлены в сторону камеры, некоторые — в другую, некоторые будут искажены. Свет от источника падает на каждую плоскость и отражается от неё под определённым углом.
В зависимости от того, куда отразился свет, могут меняться цвет и яркость плоскости, и чтобы цвет объекта выглядел правильно, всё это нужно вычислить и учесть.
Начнём с того, что нам нужно узнать, куда направлена каждая плоскость, и для этого нам потребуется вектор нормали (normal vector) плоскости. Это ещё одна стрелка, но в отличие от вектора позиции, её размер не важен (на самом деле после вычисления масштаб векторов нормалей всегда уменьшается чтобы они имели длину 1), и она всегда направлена перпендикулярно (под прямым углом) к плоскости.
Нормаль к плоскости каждого треугольника вычисляется определением векторного произведения двух векторов направления (показанных выше p и q), образующих стороны треугольника. На самом деле лучше вычислять их для каждой вершины, а не для треугольника, но поскольку первых всегда больше, чем вторых, быстрее будет вычислять нормали для треугольников.
Получив нормаль к поверхности, можно начать учитывать источник освещения и камеру. В 3D-рендеринге источники освещения могут быть разного типа, но в этой статье мы будем рассматривать только направленные источники, например, прожекторы. Как и плоскость треугольника, прожектор и камера будут указывать в определённом направлении, примерно так:
Вектор источника освещения и вектор нормали можно использовать для вычисления угла, под которым свет падает на поверхность (используя отношение между скалярным произведением векторов и произведением их размеров). Вершины треугольника будут содержать дополнительную информацию о своём цвете и материале. Материал описывает, что происходит со светом, когда он падает на поверхность.
Гладкая металлическая поверхность будет отражать почти весь падающий свет под тем углом, под которым он упал, и едва изменит цвет объекта. Шероховатый матовый материал рассеивает свет менее предсказуемым образом и немного меняет цвет. Чтобы учесть это, нужно добавить вершинам дополнительные значения:

  • Исходный базовый цвет
  • Атрибут материала Ambient — значение, определяющее, сколько «фонового» освещения может поглотить и отразить вершина
  • Атрибут материала Diffuse — ещё одно значение, но на этот раз определяющее «шероховатость» вершины, что, в свою очередь, влияет на величину поглощения и отражения рассеянного света
  • Атрибуты материала Specular — два значения, задающие величину «блеска» вершины

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

Пример кода B. Anguelov, показывающий, как в вершинном шейдере можно обрабатывать модель отражения света по Фонгу.
Всё, что мы рассматривали выше, выполняется вершинными шейдерами, и кажется, что для них нет ничего невозможного; к несчастью, это не так. Вершинные шейдеры не могут создавать новых вершин и каждый шейдер должен обрабатывать каждую отдельную вершину. Было бы удобно, если бы можно было использовать код для создания новых треугольников между тех, которые мы уже имеем (для повышения визуального качества), и иметь шейдер, обрабатывающий целый примитив (чтобы ускорить обработку). Ну, в современных графических процессорах мы можем это сделать!

Пожалуйста, сэр, мне хочется ещё (треугольников)

Современные графические чипы чрезвычайно мощны и способны каждую секунду выполнять миллионы матрично-векторных вычислений; они с лёгкостью справляются с огромной кучей вершин за раз. С другой стороны, создание высокодетализированных моделей для рендеринга — это очень долгий процесс, и если модель будет находиться на каком-то расстоянии от сцены, то все эти детали пропадут впустую.
То есть нам нужно каким-то образом приказать процессору разбить большой примитив, например, один плоский треугольник на набор меньших треугольников, расположенных внутри исходного. Такой процесс называется тесселяцией (tesselation) и графические чипы уже научились выполнять его очень хорошо; за годы развития увеличивалась степень контроля, которым обладают программисты над этим процессом.
Чтобы посмотреть на это в действии, мы воспользуемся инструментом бенчмарка Heaven движка Unigine, потому что он позволяет нам применять к используемым в тесте моделям различные величины тесселяции.
Для начала давайте возьмём место в бенчмарке и изучим его без применения тесселяции. Заметьте, что булыжники на земле выглядят очень неестественными — использованная текстура эффективна, но кажется неправильной. Давайте применим к сцене тесселяцию: движок Unigine применяет её только к отдельным частям, но различие будет значительным.
Земля, края зданий и дверь выглядят намного реалистичнее. Мы можем увидеть, как это было достигнуто, запустив процесс заново, но на этот раз с выделением всех примитивов (то есть в режиме wireframe):
Чётко видно, почему земля выглядит так странно — она совершенно плоская! Дверь сливается со стенами, а края здания представляют собой простые параллелепипеды.
В Direct3D примитивы можно разделить на группу из более мелких частей (этот процесс называется подразделением (sub-division)), выполнив трёхэтапный процесс. Сначала программисты пишут шейдер поверхности (hull shader) — по сути, этот код создаёт структуру под названием патч геометрии (geometry patch). Можно воспринимать её как карту, сообщающую процессору, где внутри начального примитива будут появляться новые точки и линии.
Затем блок-тесселятор внутри графического процессора применяет этот патч к примитиву. В конце выполняется доменный шейдер (domain shader), вычисляющий позиции всех новых вершин. Эти данные при необходимости можно передать обратно в буфер вершин, чтобы можно было заново выполнить вычисления освещения, но на этот раз с более качественными результатами.
Как же это выглядит? Давайте запустим каркасную версию тесселированной сцены:
Честно говоря, мы задали довольно высокую степень тесселяции, чтобы объяснение процесса было нагляднее. Как бы ни были хороши современные графические чипы, такое не стоит проделывать в каждой сцене — посмотрите, например, на фонарь рядом с дверью.
В изображениях с отключенным режимом wireframe вы бы с трудом нашли отличия на этом расстоянии, и мы видим, что такой уровень тесселяции добавил столько треугольников, что их сложно отделить друг от друга. Однако при правильном применении эта функция обработки вершин может создавать фантастические визуальные эффекты, особенно при симуляции столкновений мягких тел.
Давайте посмотрим, как это может выглядеть с точки зрения кода Direct3D; для этого мы используем пример с ещё одного замечательного веб-сайта, RasterTek.
Вот простой зелёный треугольник, тесселированный на множество крошечных треугольничков…
Обработка вершин выполняется тремя отдельными шейдерами (см.пример кода): вершинным шейдером, подготавливающим треугольник к тесселяции, шейдером поверхности, генерирующим патч, и доменным шейдером, обрабатывающим новые вершины. Результат достаточно понятен, но пример с движком Unigine демонстрирует и потенциальные преимущества, и опасности повсеместного использования тесселяции.

«Железо» этого не выдержит!

Помните, мы говорили, что вершинные шейдеры всегда обрабатывают каждую отдельную вершину в сцене? Несложно понять, что тесселяция может стать здесь серьёзной проблемой. И существует множество визуальных эффектов, где нужно обрабатывать различные версии одного примитива, но без создания их с самого начала, например, волосы, мех, трава и частицы взрывов.
К счастью, специально для таких вещей существует ещё один шейдер — геометрический шейдер. Это более ограниченная версия вершинного шейдера, но он может быть применён к целому примитиву. В сочетании с тесселяцией он создаёт программистам повышенный контроль над большими группами вершин.
UL Benchmark’s 3DMark Vantage — геометрические шейдеры обрабатывают частицы и флаги
Direct3D, как и все современные графические API, позволяет выполнять с вершинами большое множество вычислений. Готовые данные могут быть или переданы на следующий этап процесса рендеринга (растеризацию), или вернуться в пул памяти для повторной обработки или считывания центральным процессором для других целей. Как сказано в документации Microsoft по Direct3D, это можно реализовать как поток данных:
Этап вывода потока (stream output) необязателен, особенно потому, что он может передавать обратно в цикл рендеринга только целые примитивы (а не отдельные вершины), но он полезен для эффектов, требующих большого количества частиц. Такой же трюк можно провернуть при помощи изменяемого или динамического вершинного буфера, но буферы входящих данных лучше хранить неизменными, потому что при их открытии для изменения снижается производительность.
Обработка вершин — это критически важная часть рендеринга, потому что она определяет, как будет выглядеть сцена с точки зрения камеры. В современных играх для построения миров могут использоваться миллионы треугольников, и каждая из этих вершин каким-то образом преобразуется и освещается.
Треугольники. Их миллионы.
Обработка всех этих вычислений и математики может показаться логистическим кошмаром, но графические процессоры (GPU) и API разрабатываются с учётом всего этого — представьте идеально работающую фабрику, пропускающую через производственный конвейер по одному изделию за раз.
Опытные программисты рендеринга 3D-игр имеют фундаментальные знания в области математики и физики; они используют все возможные трюки и инструменты для оптимизации операций, сжимая этап обработки вершин всего до нескольких миллисекунд. А ведь это только самое начало построения 3D-кадра — следующим идёт этап растеризации, затем чрезвычайно сложная обработка пикселей и текстур, и уже потом изображение попадает на монитор.

Быстрый старт: Многопроходной Рендеринг

Как вы заметили по предыдущей главе, Рендеринг может занимать значительное время. Именно для такой анимации не всегда бывает желание повторять вторичный её просчёт. Например, из-за неправильной установки для одного из атрибутов в закладке Рендеринга. А теперь представьте себе, что вы на следующий день ещё раз просмотрели созданный вами фильм. При этом вы обратили внимание, что глянец сферы слишком интенсивен. Или ещё хуже: Вы занимаетесь 3D на профессиональном уровне, клиент сидит за вашей спиной и радует вас следующими выражениями, „Собственно говоря, розовый цвет меня не совсем устраивает, меня устроил бы тёмно-голубой». В этом случае вы должны были бы создать новый материал в CINEMA 4D для вашего персонажа и произвести новый Рендеринг сцены. Но к вашему счастью и по причине седьмого чувства вы установили активным многопроходной Рендеринг. Посредством многопроходного Рендеринга, возможно размещение 3D объектов перед реальным фоном (Кодовое слово: Compositing) или изменять их качество посредством фильтров специальных программ. Для того чтобы вы в вашей бедующей работе при общении с клиентами не боялись таких ситуаций, мы намерены в этой главе объяснить вам что такое многопроходной Рендеринг и как вы можте его использовать.

Откройте файл „multipass.c4d».

Бегунок таймлайна находится сейчас на кадре 15. Мы намерены произвести сейчас Рендеринг этого кадра и затем модифицировать в одной из программ для обработки изображений.

Откройте установки Рендеринга (Рендеринг / Настройки рендера). Выделите теперь закладку многоп-

роходного Рендеринга.

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

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

Установите формат „JPG» и кликните затем на кнопку «Путь». Определите место на жёстком диске вашего ПК и присвойте для изображения соответствующее название, Многопроходная _Сцена». (если вы работаете с демонстрационной версией, вы найдёте результат этого раздела в файлах „сцена

_diffuse0015 jpg», „сцена_specular0015.jpg», „сцена_trans0015.jpg» и „сцена_ refl0015.jpg»).

Добавьте из меню каналов по очереди, следующие каналы изображения „Диффузия», «Глянец», „Отражение» и „Преломление». Произведите Рендеринг сцены посредством команды «Рендеринг / Рендеринг в менеджере изображений».

Во время процесса рендеринга сначала не видно ничего, что сразу заметно. Но если вы посмотрите в меню каналов менеджера изображений, то у вас появится возможность, просмотра всех имеющихся каналов по отдельности. При окончании процесса рендеринга, если вы посмотрите на свой жёсткий диск, вы должны найти 4 файла. Вследствие того, что установка „Имя канала как Suffix» в закладке многопроходного Рендеринга была активна, изображения были названы согласно их содержания: „диффузия» для диффузного освещения, „refl» для отражения, „specular» для глянца и „trans» для прозрачности\преломления, с соответствующим номером кадра изображения. Если вы посмотрите на эти изображения вы установите, что они содержать только информацию каналов оригинала. Например, на изображении

„trans» вы видите только сферу, так как она является единственным объектом в сцене обладающим прозрачностью.

Но как мы можем использовать эти отдельные изображения, для дополнительной манипуляции сцены? Нам нужно просто загрузить их в одну из программ для обработки изображения, например Adobe Photoshop. Программа Photoshop является очень распространённой и практически стала стандартом для программ обработки изображений. Если у вас нет этой программы, вы можете бесплатно загрузить демонстрационную версию на странице www.adobe.de (com) в сети Интернет.

Photoshop обладает способностью разделять изображение на слои. Такие слои вы можете смешивать различными способами. Но это было бы слишком медленно, если бы мы должны были все 4 изображения открывать и смешивать их между собой в программе Photoshop. С программой CINEMA 4D является возможным интеграция различных слоёв в один файл. К сожалению не каждый формат подходит для этого, например, мы не можем для этого использовать формат JPEG. Так как мы намерены работать в Photoshop, программа имеет свой собственный формат „PSD» (Photoshop Document).

Установите в закладке многопроходного рендеринга формат „Photoshop (PSD)». Если вы используете новую версию программы Photoshop (начина с версии 7), установите активной соответствующую галочгку. Произведите Рендеринг.

Если мы выбрали формат PSD, установка „Сохранить многослойный файл» будет активна, что означает, что все 4 изображения, которые мы сейчас видели ещё по отдельности, теперь будут содержаться в одном файле.

Проверьте сами: На жёстком диске вы найдёте файл с названием „Многопроходная_Сцена0015.psd». Если вы используете демонстрационную версию, вы найдёте готовый файл на Demo-CD. Откройте этот файл в программе Photoshop.

Открытое изображение в программе Photoshop похоже на результат рендеринга в CINEMA 4D. Взгляд на панель слоёв в программе Photoshop откроет для нас известные каналы изображения, с правильными названиями и связанными между собой.

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

Выделите в программе Photoshop слой „Глянец». Выберите функцию „Авто-Коррекция света» (Изображение / Согласовать/ Авто-Коррекция света). В этом случае глянец стал заметнее интенсивней, без проведения дополнительного Рендеринга.

Очевидно, вы заметили, что в сцене оригинала были тени. Но в файле Photoshop они отсутствуют. Причина в том, что тени при процессе Рендеринга имеют свой собственный канал, который мы не создали в установках многопроходного Рендеринга. Добавьте в CINEMA 4D тени на закладке Рендеринга

к другим каналам.

Произведите новый Рендеринг и откройте новое изображение в Photoshop. (Если вы используете демо-

нстрационную версию: результат соответствует файлу „MultipassShadow _ Szene 0015. psd» CD).

Теперь и тень имеет собственный слой в Photoshop. Она является слишком тёмной, левый край конуса практически сливается с задним фоном.

Это мы изменим без промедления. Выделите в Photoshop слой тени и установите на панели теней вел-

ичину для атрибута „Непрозрачность» = 50%.

Теперь изображение не кажется таким тёмным.

А что же нам делать теперь с клиентом, который вместо розового, хочет иметь синий цвет? Несмотря на действительность, что наша сцена не содержит не розовый цвет, не модель, что нам делать, если мы направленно хотим изменить цвет конуса, или по-другому говоря, как можем мы манипулировать отдельным объектом в сцене?

Для этого нам необходимо в программе CINEMA 4D произвести дополнительную подготовку. Назначьте в менеджере объектов программы CINEMA 4D для сферы так называемый Тег Рендеринга „CINEMA 4D Tags / Render». В менеджере атрибутов выделите участок «Канал» и установите активным «Канал 1».

Посредством тега Рендеринга у нас есть возможность назначения одного или нескольких объектов для определённого канала изображения. Для конуса также назначьте тег Рендеринга и установите активным «Канал 2».

Сфера и конус находятся теперь на двух раздельных каналах изображения, 1 и 2. В установках Рендеринга нам необходимо теперь установить эти каналы активными. Добавьте в установках многопроходного Рендеринга два «Канала Объекта». Для первого установите „ID» на „1″, и для второго на „2″. Произведите теперь Рендеринг сцены и откройте затем файл в программе Photoshop.

При первом осмотре файла Photoshop мы не находим абсолютно никаких изменений. На данном этапе имеется только 5 слоёв. Но где, же наши новые объекты? Они спрятаны на панели каналов программы Photoshop. Для каждого объекта был создан отдельный канал Альфа. Альфа канал это чёрно-белое изображение, которое можно использовать для свободного размещения объектов.

Выделите в Photoshop слой „Преломление». Выделите затем „Выбор/Загрузить выбор». Установите в меню „Канал» атрибут „Объект-Канал 1″.

Мы загрузили канал Альфа как выбор. Все без исключения манипуляции с изображением ограничиваю-

тся сейчас в пределах этого выбора, то есть сферы.

Выберите теперь установку „Изображение / Согласовать / Оттенок Насыщение». Кликните затем на опцию „краска» и установите оттенок на 240, а насыщение на 100.

Только цвет сферы при этом будет изменён. Так как она практически состоит из преломления, предвар-

ительно мы установили активным соответствующий слой.

Но все свои преимущества многопроходной Рендеринг показывает тогда, если речь идёт о перемещаюющихся изображениях. Чем Photoshop является для отдельных изображений, тем же являются программы Compositing для анимации.

К таким программам относятся, например, After Effects и Combustion.

Также посредством программы Final Cut возможна обработка слоёв изображения. CINEMA 4D может работать совместно с этими программами, частично посредством специальных плугинов экспорта, которые предоставляют при этом необходимые, а также дополнительные установки. При этом изменение цвета анимации продолжительностью в 15 минут, вы можете выполнить за несколько секунд.

Источник: Cinema 4D R11, Техническая документация Быстрый старт, MAXON Computer GmbH, 2008 г.

По теме:

  • Кто вы, мистер пиксел?
  • Немного о растровой графике
  • Преимущества и недостатки векторной и растровой графики
  • Основные понятия растровой графики
  • Программа к запуску готова!
  • Что можно настроить в настройках?
  • Давайте уже знакомиться!

>Описание проблемы



Как оживить картинку в браузере. Многопроходный рендеринг в WebGL +33

  • 18.12.17 11:04
  • olegchir
  • #344930
  • Хабрахабр
  • 6
  • 6100

JavaScript, WebGL, Блог компании JUG.ru Group, Разработка игр, Разработка веб-сайтов

Каждый, кто сталкивался с трехмерной графикой, рано или поздно открывал документацию на методы отрисовки, которые предполагают несколько проходов рендерера. Такие методы позволяют дополнить картинку красивыми эффектами, вроде свечения ярких пятен (Glow), Ambient occlusion, эффекта глубины резкости.

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

Чтобы разобраться, как правильно готовить WebGL, мы обратились к специалистам компании Align Technology. Они решили создать специальный менеджер для управления всем этим зоопарком из разных текстур, которым было бы удобно пользоваться. Что из этого получилось — будет под катом. Важно, что неподготовленного читателя, который никогда до этого не сталкивался с необходимостью организации многопроходного рендеринга, статья может показаться непонятной. Задача довольно специфическая, но и безумно интересная.

Чтобы вы понимали всю серьезность сиутации, коротко расскажу о компании. В Align выпускают продукт, который позволяет людям исправлять улыбки без традиционных брекетов. То есть их непосредственные потребители — это доктора. Это довольно ограниченная аудитория со специфическими запросами, накладывающими фантастические требования на надежность, производительность и качество пользовательского интерфейса. В свое время основным инструментом был выбран С++, но у него было серьезное ограничение: только десктопное приложение, только для Windows. Примерно два года назад начался переход на веб-версию. Возможности современных браузеров и стека технологий позволили быстро и удобно пересоздавать пользовательский интерфейс и адаптировать кодовую базу, которая до этого писалась почти 15 лет. Конечно, это привело к необходимости решать кучу задач на фронте и бэкенде, в том числе — к необходимости оптимизировать объемы данных и скорости загрузки. Этим задачам будут посвящены эта и следующие статьи.

И дабы дважды не вставать, я постараюсь не загромождать пост исходниками. То есть все, что входит в детали реализации и навевает тоску читателям кода, будет по возможности поскипано или сокращено до чистой, незамутненной идеи. Повествование будет вестись от первого лица, как это рассказывал Василий Ставенко — один из специалистов Align Technology, который согласился приоткрыть нам завесу тайны внутренней кухни WebGL-фронта.

Для начала стоило бы рассказать, что, собственно, мы хотели реализовать и что для этого требовалось. Наша специфика не подразумевает большое количество визуальных эффектов. Мы решили реализовать Screen Space Ambient Occlusion (или SSAO) и простенькую тень.

SSAO — это, грубо говоря, подсчет суммарного затенения в точке, окруженной другими точками. Вот суть этой идеи:

float light = 0; float deltaLight; for(int astep =0; astep < ANGULAR_STEPS; ++astep){ vec2 offset = getOffset(astep, ANGULAR_STEPS); for (int rstep = 0; rstep < RADIAL_STEPS; ++rstep ){ float radius = getRadius(rstep, RADIAL_STEPS); vec4 otherPointPosition = textureLookup(offset, radius); float screenSpaceDistance = length(point.xy — otherPointPosition.xy); screenSpaceDistance = max(screenSpaceDistance, 0.00001); float deltaHeight = otherPointPosition.z — point.z; float lightness = (deltaHeight / screenSpaceDistance); // Суть! deltaLight = companyRelatedMagic(lightness); } light += companyRelatedMagic2(deltaLight); }

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

Получившаяся текстура будет иметь примерно вот такой вид:

Вот так выглядит окончательный результат:

Заметно, что SSAO-текстура имеет меньшее разрешение, чем полное изображение. Это сделано нарочно. Сразу после отрисовки позиций в фрагменты мы ужимаем текстуру, и только после этого вычисляем SSAO. Меньшее разрешение означает более быструю отрисовку и процессинг. А значит, что перед тем, как мы будет компоновать конечное изображение, нам надо увеличить разрешение промежуточного изображения.

Резюмируя, нам необходимо отрисовывать следующие текстуры:

  1. Текстура позиций оригинального разрешения в формате GL_FLOAT
  2. Текстура позиций малого разрешения.
  3. Текстура SSAO малого разрешения.
  4. Размытая текстура SSAO малого разрешения.
  5. Размытая текстура SSAO высокого разрешения.
  6. Текстура маски тени.
  7. Изображение сцены, отрисованное с правильными материалами.

Зависимость и переиспользование

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

>Отладка

Для отладки процесса рендеринга может быть полезно вывести любую из текстур в имеющийся контекст.

Управление текстурами и фреймбуферами

Поскольку для нашей работы мы уже используем фреймворк THREE.js, следующие требования уже вытекают из взаимодействия с ним. Мы решили не скатываться в чистый WebGL и задействовали THREE.WebGLRenderTarget, который, к сожалению, дает оверхед фреймбуферов, связывая воедино текстуру и созданный объект фреймбуфера, не позволяя использовать имеющиеся буфера для других текстур. Но даже с этим оверхедом наш рендеринг работает на приемлемых скоростях, а управление таким объектом намного легче, чем управление двумя связанными, но при этом независимыми объектами.

Управление разрешением текстур

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

Замена материала перед рендерингом сцены

Материал всех объектов в THREE.Scene должен быть заменен для отрисовки позиций, с учетом видимости объектов, а потом восстановлен без потерь. Тут следует отметить, что можно было бы воспользоваться параметром Scene.overrideMaterial. Но в нашем случае логика оказалась несколько более сложной.

Реализация — основная идея

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

Этот менеджер должен был, по задумке, быть проинициализирован экземплярами класса Pass. То есть понадобится еще один объект, который добавит в него проходы и будет уже application-specific. Из-за того, что в современных WebGL-шейдерах мы не можем задать имя исходящей текстуры, нам пришлось сделать ScreenSpacePass безымянным и давать ему имя при добавлении. А могли бы вычитывать его из текста шейдера.

Вот такой вот метод:

addPass(name, pass){ if(!pass instanceof Pass) throw new Error(«Adding wrong class to renderer passes»); pass.setSceneAndCamera(this.screenSpaceScene, this.camera); this.passes.set(name, pass); }

Да, на этот же менеджер мы повесили и управление состоянием screenSpaceScene. К счастью, это один единственный меш с геометрией, чтобы закрыть весь экран.

Вот такой вот метод нам понадобился для отрисовки конкретного прохода на экран:

if(!this.passes.has(name)) throw new Error(`Multipass manager has no rendertarget named ${name}`) const target = this.passes.get(name); if(target.dependencies) { this._prepareDependencies(target.dependencies); // <— Ради чего все делалось target.installDependencies(this.passes); } if(this.prerenderCallbacks) // это позволяет делать функциональные юниформы. this.prerenderCallbacks.forEach(fn=>fn(this)); let clear = options.clear || {color:true, depth:true, stencil:true}; clear = {…clear, …target.clearOptions} target.setResolutionWithoutScaling(this.width, this.height); // Куча настроек — скукотища target.prerender(); this.setupClearing(clear); this.renderer.render(target.getScene(), target.getCamera()); this.restoreClearing(); target.postrender();

Немного комментариев:

  1. Каждая цель — это наш Pass для отрисовки.
  2. this.passes — это экземпляр javascript Map() (Тип: Map<String, Pass>).
  3. target.dependencies — это список текстурных юниформ в шейдере. Их мы считываем из исходника шейдера с помощью регулярных выражений.
  4. installDependencies — это ничто иное, как установка юниформ.
  5. prepareDependencies для каждой зависимости запускает функцию this.prerender, которая является младшей сестрой указанной функции. Разница методов небольшая, например, отрисовка идет в фреймбуфер цели:

this.renderer.render(target.getScene(), target.getCamera(), target.framebuffer);

Таким образом, у нас нарисовался общий класс для наших проходов с вот таким вот интерфейсом:

class Pass{ // Публичное: constructor(framebufferOptions = {}) {} // Детали реализации get clearOptions() get framebuffer() resize(w, h) // Это изменяет фреймбуфер setResolution(width, height) // это задает разрешение рисуемой текстуры. setResolutionWithoutScaling(width, height) // это изменяет разрешение текстуры в особых случаях. touchUniformFunctions() prerender() postrender() installDependencies(dependenciesMap) getScene() getCamera() }

Как это должно работать

Для начала надо настроить наш менеджер. Для этого мы его инстанциируем и добавляем в него некоторое количество Pass-ов. Затем, когда нам надо нарисовать какой-то Pass на наш контекст, мы просто вызываем

manager.renderOnCanvas(«passName»);

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

function render(){ manager.start(); manager.renderOnCanvas(‘mainPass’); }

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

  1. Стираем фон с помощью gl.Clear — three.js делает это автоматически, если ему не сказать, что стирать не надо.
  2. Накладываем тень с помощью блендинга.
  3. Накладываем изображение нашей челюсти, используя прозрачность.
  4. Накладываем SSAO.

Вот так:

function render(){ this.passManager.start(); if(showShadow) this.passManager.renderOnCanvas(‘displayShadow’); this.passManager.renderOnCanvas(‘main’, { clear:{color:false, stencil:true, depth:true} }); if(showSSAO) this.passManager.renderOnCanvas(‘displaySSAO’,{ clear:{color:false, stencil:true, depth:true} }); }

Видно, что небольшое отличие состоит в том, что буфер цвета не стирается, а все остальные буферы очищаются.

Если нам захочется вывести на экран какую-то промежуточную текстуру (например, в целях отладки), мы можем лишь слегка модифицировать render. Например, текстура с SSAO, которуя я привел выше, была отрисована вот таким кодом:

function render(){ this.passManager.start(); this.passManager.renderOnCanvas(‘ssao’); }

Реализация ScenePass

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

export class ScenePass extends Pass{ constructor(scene, camera, options={}){ let prerender=options.prerender ||null, postrender=options.postrender || null; super(options.framebufferOptions); this.scene = scene; this.camera = camera; this._prerender = prerender; this._postrender = postrender; this._clearOptions = options.clearOptions; this.overrideMaterial = options.overrideMaterial || null; } setSceneAndCamera(){ // Do not rewrite our scene } }

Это весь класс. Получился довольно простым, поскольку почти всю функциональность удалось оставить в родителе. Как видите, я решил оставить overrideMaterial на тот возможный случай, когда мы сможем заменить материал на всей сцене разом в одну операцию присваивания, а не во время последовательной замены материала на всех подходящих объектах. Собственно, _prerender и _postrender — это и есть довольно умные заменители материала для каждого отдельного меша. Вот как они выглядят в нашем случае:

class Pass{ /// Skip-skip prerender(){ if(this.overrideMaterial) this.scene.overrideMaterial = this.overrideMaterial; if(this._prerender) this.scene.traverse(this._prerender); } postrender(){ if(this.scene.overrideMaterial) this.scene.overrideMaterial = null; if(this._postrender) this.scene.traverse(this._postrender); } /// Skip-skip }

Scene.traverse — это метод THREE.js, который рекурсивно проходит по всей сцене.

Реализация ScreenSpacePass

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

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

export class ScreenSpacePass extends Pass { constructor(fragmentShader, options = {}){ // scaleFactor = 1.0, uniforms={}){ let scaleFactor = options.scaleFactor || 1.0; let uniforms = options.uniforms || {}; let blendingOptions = options.blendingOptions || {}; super(options.framebufferOptions); /// Skip } resize(w, h){ const scaler = getScaler(this.scaleFactor, w, h); let v = new Vector2(w,h).multiply(scaler); this.framebuffer.setSize(Math.round(v.x), Math.round(v.y)); } setResolution(width, height){ const scaling = getScaler(this.scaleFactor, width, height); let v = new Vector2(width, height).multiply(scaling); this.uniforms.resolution.value = v; } setResolutionWithoutScaling(width, height){ this.uniforms.resolution.value = new Vector2(width, height); } isSampler(uname){ return this.samplerUniforms.indexOf(uname) != -1; } tryFindDefaultValueForUniformType(utype){ switch(utype){ case ‘vec2’: return new Vector2(0., 0.); default: return null; } } getValueForUniform(uniformDescr){ if(!this.uniformData.hasOwnProperty(uniformDescr.name )){ if(uniformDescr.name != ‘resolution’ && !this.isSampler(uniformDescr.name)) console.warn(`Value for uniform ‘${uniformDescr.name}’ is not found.`); return this.tryFindDefaultValueForUniformType(uniformDescr.type); } if(typeof(this.uniformData) == ‘function’){ this.uniformData = this.uniformData.bind(this); return this.uniformData(); } else return this.uniformData; } touchUniformFunctions(){ for(const k in this.uniformData){ if(typeof this.uniformData !== ‘function’) continue; this.uniforms.value = this.uniformData(); } } prerender(){ this.scene.overrideMaterial = this.shader; this.touchUniformFunctions(); } parseUniforms(glslShader){ let shaderLines = glslShader.split(‘\n’); const uniformRe = /uniform (+) (+);/; let foundUniforms = shaderLines.map(line=>line.match(uniformRe)) .filter(x=>x) .map(x=>{return {type:x,name:x}}); const umap = this.mapping; this.dependencies = foundUniforms.filter(x=>x.type == ‘sampler2D’).map(x=>umap?umap:x.name); this.samplerUniforms = foundUniforms.filter(x=>x.type == ‘sampler2D’).map(x=>x.name); this.uniforms = {}; foundUniforms.forEach(u=>{ this.uniforms = {value:this.getValueForUniform(u)}; }); if(!this.uniforms.hasOwnProperty(‘resolution’)) throw new Error(‘ScreenSpace shader in WebGL must have resolution uniform’); } installDependencies(dependenciesMap){ this.samplerUniforms.forEach(uname=>{ this.uniforms.value = dependenciesMap.get(uname).framebuffer.texture; }) } parseShader(fragmentShader){ let glslShader = parseIncludes(fragmentShader); this.parseUniforms(glslShader); return new RawShaderMaterial({ vertexShader: ssVertex, fragmentShader:glslShader, uniforms: this.uniforms, transparent: this.blendingOptions.transparent || false }); } } function parseIncludes( string ) { // Stolen from three.js var pattern = /#include +<(+)>/g; function replace( match, include ) { var replace = ShaderChunk; if ( replace === undefined ) { throw new Error( ‘Can not resolve #include <‘ + include + ‘>’ ); } return parseIncludes( replace ); } return string.replace( pattern, replace ); }

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

Ну и в самом конце, я покажу, как мы этим пользовались. Application specific-сущность мы назвали EffectComposer. В его конструкторе создаем описанный менеджер и создаем ему пассы:

this.passManager = new PassManager(threeRenderer); this.passManager.addPass(‘downscalePositionSSAO’, new ScreenSpacePass(require(‘./shaders/passingFragmentShader.glsl’), {scaleFactor}) ); this.passManager.addPass(‘downscalePositionShadow’, new ScreenSpacePass(require(‘./shaders/positionDownSampler.glsl’), {scaleFactor}) ); this.passManager.addPass(‘ssao’, new ScreenSpacePass(require(‘./shaders/SSAO.glsl’), {scaleFactor}) ); /// Skip-skip-skip

В качестве примера — содержимое файла passingFragmentShader.glsl:

precision highp float; uniform sampler2D positions; // это зависимость — нужно сначала отрисовать текстуру positions uniform vec2 resolution; void main(){ vec2 vUv = gl_FragCoord.xy / resolution; gl_FragColor = texture2D(positions, vUv); }

Шейдер очень короткий — достать пиксель, который проинтерполируется, и тут же отдать его. Всю работу сделает линейная интерполяция в настройках текстуры (GL_LINEAR).

Теперь посмотрим, как будет отрисована positions.

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

function updateScenes(scenes, camera){ this.passManager.addPass(‘main’, new ScenePass(scene, camera)); this.passManager.addPass(‘positions’, new ScenePass(scene, camera, { prerender: materialReplacer, postrender:materialRestore, framebufferOptions })) }

Как видно, если кто-то сообщил нам об изменении сцены, EffectComposer создаст два Pass-a: один с настройками по умолчанию, а другой — с хитрой заменой материалов. Проходы сцены у нас не содержат каких-то хитрых зависимостей, они, как правило, рисуются сами по себе, однако описываемый подход позволяет это делать, если мы добавим в ScenePass несколько методов для того, чтобы добавлять зависимости. Потому что это неочевидно, какой именно материал из сцены захочет иметь отрисованную зависимость.

Несмотря на простоту использования в нашем случае, нам не удалось добиться полностью автоматической генерации пассов, основанных на шейдерах. Мне не хотелось добавлять в шейдеры маркеров, которые бы дополняли проходы прорисовки сцены дополнительными параметрами, такими как параметры вывода текстуры — GL_RGB, GL_RGBA, GL_FLOAT, GL_UNSIGNED_BYTE. Это бы, с одной стороны, упростило код, но дало бы меньше свободы переиспользования шейдеров. То есть эту настройку все равно пришлось описывать.

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

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

Вы можете помочь и перевести немного средств на развитие сайта

Что такое рендеринг

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *