Что такое рендеринг? И что такое рендер? Словарь разработчиков компьютерных игр!
В продолжении ликбеза по компьютерной графике как для программистов, так и для художников хочу поговорить о том что такое рендеринг. Вопрос не так сложен как кажется, под катом подробное и доступное объяснение!
Я начал писать статьи, которые являются ликбезом для разработчика игр. И поторопился, написав статью про шейдеры, не рассказав что же такое рендеринг. Поэтому эта статья будет приквелом к введению в шейдеры и отправным пунктом в нашем ликбезе.
Что такое рендеринг? (для программистов)
Итак, Википедия дает такое определение: Ре́ндеринг (англ. rendering — «визуализация») — термин в компьютерной графике, обозначающий процесс получения изображения по модели с помощью компьютерной программы.
Довольно неплохое определение, продолжим с ним. Рендеринг – это визуализация. В компьютерной графике и 3д-художники и программисты под рендерингом понимают создание плоской картинки — цифрового растрового изображения из 3д сцены.
То есть, неформальный ответ на наш вопрос “Что такое рендеринг?” – это получение 2д картинки (на экране или в файле не важно). А компьютерная программа, производящая рендеринг, называется рендером (англ. render) или рендерером (англ. renderer).
Рендер
В свою очередь словом “рендер” называют чаще всего результат рендеринга. Но иногда и процесс называют так же (просто в английском глагол – render перенесся в русский, он короче и удобнее). Вы, наверняка, встречали различные картинки в интернете, с подписью “Угадай рендер или фото?”. Имеется ввиду это 3D-визуализация или реальная фотография (уж настолько компьютерная графика продвинулась, что порой и не разберешься).
Виды рендеринга
В зависимости от возможности сделать вычисления параллельными существуют:
- многопоточный рендеринг – вычисления выполняются параллельно в несколько потоков, на нескольких ядрах процессора,
- однопоточный рендеринг – в этом случае вычисления выполняются в одном потоке синхронно.
Существует много алгоритмов рендеринга, но все их можно разделить на две группы по принципу получения изображения: растеризация 3д моделей и трасировка лучей. Оба способа используются в видеоиграх. Но трасировка лучей чаще используется не для получения изображений в режиме реального времени, а для подготовки так называемых лайтмапов – световых карт, которые предрасчитываются во время разработки, а после результаты предрасчета используются во время выполнения.
В чем суть методов? Как работает растеризация и трасировка лучей? Начнем с растеризация.
Растеризация полигональной модели
Сцена состоит из моделей, расположенных на ней. В свою очередь каждая модель состоит из примитивов.
Это могут быть точки, отрезки, треугольники и некоторые другие примитивы, такие как квады например. Но если мы рендерим не точки и не отрезки, любые примитивы превращаются в треугольники.
Задача растеризатора (программа, которая выполняет растеризацию) получить из этих примитивов пиксели результирующего изображения. Растеризация в разрезе графического пайплайна, происходит после вершинного шейдера и до фрагментного (Статья про шейдеры).
*возможно следующей статьёй будет обещанный мной разбор графического пайплайна, напишите в комментариях нужен ли такой разбор, мне будет приятно и полезно узнать скольким людям интересно это всё. Я сделал отдельную страничку где есть список разобранных тем и будущих – Для разработчиков игр
В случае с отрезком нужно получить пиксели линии соединяющей две точки, в случае с треугольником пиксели которые внутри него. Для первой задачи применяется алгоритм Брезенхема, для второй может применяться алгоритм заметания прямыми или проверки барицентрических координат.
Сложная модель персонажа состоит из мельчайших треугольников и растеризатор генерирует из неё вполне достоверную картинку. Почему тогда заморачиваться с трассировкой лучей? Почему не растеризовать и все? А смысл вот в чем, растеризатор знает только своё рутинное дело, треугольники – в пиксели. Он ничего не знает об объектах рядом с треугольником.
А это значит что все физические процессы которые происходят в реальном мире он учесть не в состоянии. Эти процессы прямым образом влияют на изображение. Отражения, рефлексы, тени, подповерхностное рассеивание и так далее! Все без чего мы будем видеть просто пластмассовые модельки в вакууме…
А игроки хотят графоний! Игрокам нужен фотореализм!
И приходится графическим программистам изобретать различные техники, чтобы достичь близости к фотореализму. Для этого шейдерные программы используют текстуры, в которых предрассчитаны разные данные света, отражения, теней и подповерхностного рассеивания.
В свою очередь трассировка лучей позволяет рассчитать эти данные, но ценой большего времени рассчета, которое не может быть произведено во время выполнения. Рассмотрим, что из себя представляет этот метод.
Трасировка лучей (англ. ray tracing)
Помните о корпускулярно волновом дуализме? Напомню в чем суть: свет ведёт себя и как волны и как поток частиц – фотонов. Так вот трассировка (от англ “trace” прослеживать путь), это симуляция лучей света, грубо говоря. Но трассирование каждого луча света в сцене непрактично и занимает неприемлемо долгое время.
Мы ограничимся относительно малым количеством, и будем трассировать лучи по нужным нам направлениям.
А какие направления нам нужны? Нам надо определять какие цвета будут иметь пиксели в результирующей картинке. Тоесть количество лучей мы знаем, оно равно количеству пикселей в изображении.
Что с направлением? Все просто, мы будем трассировать лучи в соответствии с точкой наблюдения (то как наша виртуальная камера направлена). Луч встретится в какой-то точке с объектом сцены (если не встретится, значит там темный пиксель или пиксель неба из скайбокса, например).
При встрече с объектом луч не прекращает своё распространение, а разделяется на три луча-компонента, каждый из которых вносит свой вклад в цвет пикселя на двумерном экране: отражённый, теневой и преломлённый. Количество таких компонентов определяет глубину трассировки и влияет на качество и фотореалистичность изображения. Благодаря своим концептуальным особенностям, метод позволяет получить очень фотореалистичные изображения, однако из-за большой ресурсоёмкости процесс визуализации занимает значительное время.
Рендеринг для художников
Но рендеринг это не только программная визуализация! Хитрые художники тоже используют его. Так что такое рендеринг с точки зрения художника? Примерно то же самое, что и для программистов, только концепт-художники выполняют его сами. Руками. Точно так же как рендерер в видео-игре или V-ray в Maya художники учитывают освещение, подповерхностное рассеивание, туман и др. факторы, влияющие на конечный цвет поверхности.
К примеру картинка выше, поэтапно прорабатывается таким образом: Грубый скетч – Лайн – Цвет – Объем – Рендер материалов.
Рендер материалов включает в себя текстурирование, проработку бликов – металлы, например, чаще всего очень гладкие поверхности, которые имеют четкие блики на гранях. Помимо всего этого художники сталкиваются с растеризацией векторной графики, это примерно то же самое, что и растеризация 3д-модели.
Растеризация векторной графики
Суть примерно такая же, есть данные 2д кривых, это те контуры, которыми заданы объекты. У нас есть конечное растровое изображение и растеризатор переводит данные кривых в пиксели. После этого у нас нет возможности масштабировать картинку без потери качества.
Читайте дальше
Статьи из рубрики “Ликбез для начинающих разработчиков игр“, скорее всего окажутся очень для Вас полезными, позвольте-с отрекомендовать:
- Что такое шейдеры? – простое объяснение сложных и страшных шейдеров
- Партиклы — система частиц – Полезный обзор частиц и подборка видео-уроков, по созданию спецэффектов в Unity3d
Послесловие
В этой статье, я надеюсь, вы осили столько букв, вы получили представление о том, что такое рендеринг, какие виды рендеринга существуют. Если какие-то вопросы остались – смело задавайте их в комментариях, я обязательно отвечу. Буду благодарен за уточнения и указания на какие-то неточности и ошибки.
Понравилась статья? Поделиться с друзьями:
Время от времени пишет статьи о разработке игр и проводит интервью с разработчиками. Сейчас работает engine-progremmer’ом в Larian Studios. Большой поклонник игр Naughty Dog.
Помечаю для себя, что еще не рассказано: Forward/Deferred Rendering, хочу сделать обзор Unity 2017, там будет новая фича с возможностью модификации rendering-цикла на C#, очень интересная тема, кмк. Попытаюсь распросить опытных коллег, что они об этом думают 🙂
Добрый день, подскажите пожалуйста какую книгу почитать по паттернам и по разбору чего то как SOLID. Спасибо)
Привет, немного не о рендеринге вопрос 🙂
По Паттернам даже и не знаю что посоветовать, наверное Head first Patterns, потому что оригинал от банды четырёх читать сильно сложнее. А про SOLID – в принципе все на википедии написано, но понимание их приходит с опытом, кмк.
Спасибо, да просто читал статью и решил спросить)
Думал что может еще что то есть о паттернах интересное, а эти 2 книги я уже скачал для изучения)
render js что это
Говоря о библиотеке React, render — это метод жизненного цикла компонента, который вызывается для отображения компонента на странице. Он возвращает React-элемент, представляющий содержимое компонента.
Метод render определяет, что должно быть отображено на экране в ответ на изменение состояния или свойств компонента. Он вызывается автоматически, когда компонент монтируется или обновляется.
Пример использования render :
Hello, World!
В этом примере метод render возвращает React-элемент, содержащий заголовок h1 . Когда компонент MyComponent монтируется на странице или обновляется, React вызывает метод render , чтобы отобразить содержимое компонента.
13 апреля 2023
В контексте JavaScript, render может использоваться для динамического изменения содержимого веб-страницы без перезагрузки страницы. Другими словами, render — это такая функция, которая отвечает за отображение информации на странице.
Например, если у нас есть элемент div с id=»output» , мы можем задействовать render при отображении текста внутри этого элемента следующим образом:
const outputDiv = document.getElementById('output'); outputDiv.innerHTML = 'Привет, мир!';
Еще пример, где будет задействован render при создании новых элементов и добавления их на страницу:
const newDiv = document.createElement('div'); newDiv.innerHTML = 'Этот элемент создан с помощью JavaScript и добавлен на страницу!'; document.body.appendChild(newDiv);
Рендеринг WEB-страницы: что об этом должен знать front-end разработчик
Приветствую вас, уважаемые хабравчане! Сегодня я бы хотел осветить вопрос рендеринга в веб-разработке. Конечно, на эту тему уже написано много статей, но, как мне показалась, вся информация довольно разрознена и отрывочна. По крайней мере, чтобы собрать всю картину в своей голове и осмыслить её, мне пришлось проанализировать немало информации (в основном — англоязычной). Именно поэтому я решил формализовать свои знания в статью, и поделиться результатом с сообществом Хабра. Думаю, информация будет полезна как начинающим веб-разработчикам, так и более опытным, чтобы освежить и структурировать свои знания.
Данное направление можно и нужно оптимизировать на этапе вёрстки/frontend-разработки, поскольку, очевидно, что разметка, стили и скрипты принимают в рендеринге непосредственное участие. Для этого соответствующие специалисты должны знать некоторые тонкости.
Отмечу, что статья нацелена не на точную передачу механики работы браузеров, а, скорее, на понимание её общих принципов. Тем более, разные браузерные движки сильно отличаются в алгоритмах работы, поэтому охватить все нюансы в рамках одной статьи не представляется возможным.
Процесс обработки WEB-страницы браузером
Для начала, рассмотрим последовательность работы браузера при отображении документа:
- Из полученного от сервера HTML-документа формируется DOM (Document Object Model).
- Загружаются и распознаются стили, формируется CSSOM (CSS Object Model).
- На основе DOM и CSSOM формируется дерево рендеринга, или render tree — набор объектов рендеринга (Webkit использует термин «renderer», или «render object», а Gecko — «frame»). Render tree дублирует структуру DOM, но сюда не попадают невидимые элементы (например — , или элементы со стилем display:none; ). Также, каждая строка текста представлена в дереве рендеринга как отдельный renderer. Каждый объект рендеринга содержит соответствующий ему объект DOM (или блок текста), и рассчитанный для этого объекта стиль. Проще говоря, render tree описывает визуальное представление DOM.
- Для каждого элемента render tree рассчитывается положение на странице — происходит layout. Браузеры используют поточный метод (flow), при котором в большинстве случаев достаточно одного прохода для размещения всех элементов (для таблиц проходов требуется больше).
- Наконец, происходит отрисовка всего этого добра в браузере — painting.
Repaint
В случае изменения стилей элемента, не влияющих на его размеры и положение на странице (например, background-color , border-color , visibility ), браузер просто отрисовывает его заново, с учётом нового стиля — происходит repaint (или restyle).
Reflow
Если же изменения затрагивают содержимое, структуру документа, положение элементов — происходит reflow (или relayout). Причинами таких изменений обычно являются:
- Манипуляции с DOM (добавление, удаление, изменение, перестановка элементов);
- Изменение содержимого, в т.ч. текста в полях форм;
- Расчёт или изменение CSS-свойств;
- Добавление, удаление таблиц стилей;
- Манипуляции с атрибутом « class »;
- Манипуляции с окном браузера — изменения размеров, прокрутка;
- Активация псевдо-классов (например, :hover ).
Оптимизация со стороны браузера
Браузеры по возможности локализуют repaint и reflow в пределах элементов, подвергнувшимися изменению. Например, изменение размеров абсолютно или фиксировано спозиционированного элемента затронет только сам элемент и его потомков, в то время как изменение статично спозиционированного — повлечет reflow всех элементов, следующих за ним.
Ещё одна особенность — во время выполнения JavaScript браузеры кэшируют вносимые изменения, и применяют их в один проход по завершению работы блока кода. Например, в ходе выполнения данного кода произойдет только один reflow и repaint:
var $body = $('body'); $body.css('padding', '1px'); // reflow, repaint $body.css('color', 'red'); // repaint $body.css('margin', '2px'); // reflow, repaint // На самом деле произойдет только 1 reflow и repaint
Однако, как описано выше, обращение к свойствам элементов вызовет принудительный reflow. То есть, если мы в приведённый блок кода добавим обращение к свойству элемента, это вызовет лишний reflow:
var $body = $('body'); $body.css('padding', '1px'); $body.css('padding'); // обращение к свойству, принудительный reflow $body.css('color', 'red'); $body.css('margin', '2px');
В итоге мы получим 2 reflow вместо одного. Поэтому, обращения к свойствам элементов по возможности нужно группировать в одном месте, дабы оптимизировать производительность (см. более подробный пример на JSBin).
Но, на практике встречаются ситуации, когда без принудительного reflow не обойтись. Допустим, у нас есть задача: к элементу нужно применить одно и то же свойство (возьмём « margin-left ») сначала без анимации (установить в 100px ), а затем — анимировать посредством transition в значение 50px . Можете сразу посмотреть этот пример на JSBin, но я распишу его и тут.
Для начала заведём класс с transition:
.has-transition
Затем, попробуем реализовать задуманное следующим образом:
var $targetElem = $('#targetElemId'); // наш элемент, по умолчанию у него присутствует класс "has-transition" // убираем класс с transition $targetElem.removeClass('has-transition'); // меняем свойство, ожидая, что transition отключён, ведь мы убрали класс $targetElem.css('margin-left', 100); // ставим класс с transition на место $targetElem.addClass('has-transition'); // меняем свойство $targetElem.css('margin-left', 50);
Данное решение не будет работать, как ожидается, т.к. изменения кэшируются и применяются только в конце блока кода. Нас выручит принудительный reflow, в результате код приобретёт следующий вид, и будет в точности выполнять поставленную задачу:
// убираем класс с transition $(this).removeClass('has-transition'); // меняем свойство $(this).css('margin-left', 100); // принудительно вызываем reflow, изменения в классе и свойстве будут применены сразу $(this)[0].offsetHeight; // как пример, можно использовать любое обращение к свойствам // ставим класс с transition на место $(this).addClass('has-transition'); // меняем свойство $(this).css('margin-left', 50);
Практические советы по оптимизации
На основе данной статьи, а также других статей на Харбе, где освещается вопрос оптимизации клиентской части, можно вывести следующие советы, которые пригодятся при создании эффективного фронтенда:
div * // плохо .list li // плохо .list-item // хорошо #list .list-item // хорошо
- How browsers work
- Rendering: repaint, reflow/relayout, restyle
Надеюсь, каждый читатель извлёк из статьи что-нибудь полезное. В любом случае — спасибо за внимание!
UPD: Спасибо SelenIT2 и piumosso за верные замечания по поводу эффективности обработки CSS-селекторов.
3д моделирование и рендеринг одно и тоже?Что такое рендеринг?
3d рендеринг на cpu
Здравствуйте. Существуют ли какие-то графические библиотеки для рендеринга 3д моделей на cpu.
Рендеринг анимированного морского скайбокса
Возникла потребность сделать виджет для моделирования морской обстановки. Скайбокс с морем и.
Создание 3D модели на рисованном фоне и рендеринг в мультфильм
Подскажите простую программу, очень важно — простую, для создания 3D модели и последующего создания.
Что такое рендеринг?
Здрасте! Почитал про рендеринг в википедии и хочу спроосить. правильно ли я понял. В процессе.
2899 / 1758 / 179
Регистрация: 19.02.2011
Сообщений: 6,462
Моделирование — создание модели (математической), т.е. понимаеие того, где какая плоскость находится, ее координаты, рзмер и т.п.
Рендер — визуализация, отображение созданных моделей.
5146 / 2759 / 464
Регистрация: 05.10.2013
Сообщений: 7,281
Записей в блоге: 145
Моделирование — это процесс создания 3D моделей человеком.
Рендеринг — это процесс создания изображения сцены компьютером.
Человек создаёт 3D модели, то есть моделирует. Он же создаёт текстуры и материалы (материалы — это комбинации текстур и шейдеров). Расставляет объекты и настраивает освещение. Далее он нажимает кнопку «Рендер» и запускается процесс (рендеринг) создания изображения сцены, которое он может сохранить.
В играх тоже происходит рендеринг, но автоматически в реальном времени. Вы, наверное, слышали про FPS (Frame Per Second — количество кадров в секунду). Например, можно выставить 60 fps и видео карта будет осуществлять рендеринг 60 раз в секунду, обеспечивая плавные анимации.
Регистрация: 29.03.2016
Сообщений: 1,154
8Observer8, правильно ли я понимаю?
Ренндеринг это создания кадров.
Допустим,как в киноленте,где каждый кадр это часть фильма.Если же запустить киноленту вращаться то кадры меняются и создаётся целая сцена постоянного изменения.
Например на одном кадре нарисован человек с поднятой рукой а на второй уже с опущенной и если такую киноленту с двух кадров запустить(и зациклить) то на экране будет видно как человек то поднимает то опускает руку.То есть таким образом создается фильм.
А рендеринг это тоже как создание фильмов только вместо отснятых кадров используются 3d модели.А результат рендеринга компьютерная графика.
5146 / 2759 / 464
Регистрация: 05.10.2013
Сообщений: 7,281
Записей в блоге: 145
Сообщение было отмечено TVPNERO как решение
Решение
Я где-то слышал, что для фильмов с очень красивой компьютерной графикой каждый кадр может рендериться несколько минут, поэтому их заранее создают, чтобы потом быстро прокрутить. Допустим, фильм идёт с частотой 60 кадров в секунду. За секунду пролетят 60 кадров. А для создания одного кадра нужна 1 минута. Получается, что на 60 кадров нужно 60 минут. Но это не для всего фильма, а для каких-то очень красивых сцен.
Если нужно создать красивую картину в виде одного изображения, то рендеринг может тоже занять несколько минут. В результате мы получаем один кадр, который используют, например, на каком-нибудь сайте.
В играх анимация создаётся за счёт того, что модель меняет своё положение на чуть-чуть в течении секунды. К примеру, робот за секунду должен поднять руку вверх на 180 градусов. Мы можем в секунду показать 60 кадров, где рука будет сдвигаться на угол в 3 градуса. Мозг имеет инертность и мы не заметим за секунду, что рука передвигалась рывками по 3 градуса, а нам будет казаться, что она движется очень плавно. Мы можем заметить рывки, если кадров будет меньше 24 кадров в секунду. В играх рендеринг кадра происходит в реальном времени и очень быстро, потому что нужно отрисовать в секунду 25 кадров и более.
Это как я понимаю. Может по поводу фильмов я не правильно написал. Но по поводу игр так оно есть.