Технологии рендеринга, доступные во внешнем интерфейсе, — это html + css, canvas, svg, webgl, и мы будем использовать эти технологии всесторонне для отрисовки страниц. Вы когда-нибудь задумывались, каковы различия и связи между этими технологиями и как они связаны с графикой?
В этой статье мы поговорим о компьютерных теоретических основах технологии рендеринга веб-страниц.
Теоретические основы рендеринга
Сетчатка человеческого глаза имеет механизм визуальной персистенции, то есть увиденное изображение будет продолжать сохраняться в течение примерно 0,1 с.Графический интерфейс представляет собой механизм покадрового обновления, спроектированный по этому принципу. убедитесь, что за 1 с отрисовывается не менее 10 кадров, чтобы человеческий глаз воспринимал картинку как непрерывную.
Каждый кадр отображает изображение, которое состоит из пикселей и является основной единицей отображения. Разные дисплеи реализуют разные принципы работы пикселей.
Цели, которые мы хотим нарисовать, представляют собой различные формы, такие как прямоугольники, круги, эллипсы, кривые и т. д. После рисования нам нужно преобразовать их в изображения. Существует ряд теорий рисования графики, например, кривая Безье — это теория рисования кривых. Процесс преобразования графики в изображения называется растеризацией. Процесс рисования и растеризации этой графики составляет содержание графических исследований.
Графику можно масштабировать, переводить, поворачивать и т. д., что реализуется посредством матричных вычислений и также является содержанием графики.
Кроме 2D-графики рисуется и 3D-графика. Принцип 3D заключается в соединении вершин трехмерных координат для формирования треугольника, что и является процессом моделирования. После этого грани каждого треугольника наклеиваются на карту, которая называется текстурой. Это 3D-графика, также называемая 3D-моделью.
3D-графику также необходимо растеризовать в двумерное изображение, а затем отобразить. Для растеризации этой трехмерной графики необходимо найти угол наблюдения, как и для фотографирования, поэтому эта концепция обычно называется камерой.
В то же время, чтобы сделать 3D-графику более реалистичной, также вводится понятие света, то есть при попадании луча света, как будет изменяться каждая поверхность 3D-графики, как отражаться и т.д. на. Объекты из разных материалов отражают по-разному, например, диффузное отражение, зеркальное отражение и т. д., и существуют разные формулы расчета. Луч света будет облучать некоторые объекты и отражаться от них.Этот процесс требует серии вычислений слежения, называемых технологией трассировки лучей.
Мы также можем почувствовать, что объем вычислений 3D-графики намного больше, чем у 2D-графики, и весьма вероятно, что вычисление с помощью ЦП не будет достигать 1 с больше, чем 10 кадров, поэтому существует специальное оборудование для ускорения 3D-рендеринга. , называемый графическим процессором. Он специально используется для такого рода параллельных вычислений.Он может вычислять растеризацию группы вершин, группы треугольников и группы пикселей в пакетах.Этот процесс рендеринга называется конвейером рендеринга.
Текущий конвейер рендеринга является программируемым, то есть он может управлять положением вершин и раскраской каждого треугольника, которые называются вершинными шейдерами и фрагментными шейдерами.
Короче говоря, 2D- или 3D-графика визуализируется и растрируется в покадровые изображения.
Превратив его в изображение, вы можете выполнить некоторую обработку изображения, например, реализовать различные фильтры, такие как оттенки серого, инвертированный цвет и размытие по Гауссу.
так,Теоретическая основа технологии фронтенд-рендеринга — компьютерная графика + обработка изображений.
Различия и связи между различными технологиями рендеринга
Что касается технологий внешнего рендеринга, то html+css, svg, canvas и webgl — это технологии, используемые для рендеринга графики и изображений, но каждая из них имеет свои особенности:
html + css
html+css используется для графической верстки, то есть для расчета позиции отображения текста, картинок, видео и т.д. Он предоставляет множество правил расчета, например, гибкий макет очень подходит для графического макета, гибкий макет легко сделать адаптивным макетом и так далее. Но для более гибкого графического рисования он не годится, и тогда используются несколько другие приемы.
canvas
Холст — это заданная область холста для рисования графики и изображений в разных положениях, он не имеет правил компоновки, поэтому он очень гибкий и часто используется для визуализации или разработки игр. Однако канвас не сохраняет информацию о нарисованной графике.Сгенерированное изображение может отображаться только в фиксированной области.Когда область отображения становится больше, его нельзя масштабировать вместе с ним, и оно будет искажаться.Если есть необходимость для масштабирования без искажений Пришло время использовать другие техники рендеринга.
svg
svg сохранит информацию о нарисованной графике в памяти, и будет пересчитываться после изменения области отображения.Это векторная диаграмма, которую часто используют для отрисовки иконок, шрифтов и т.д.
webgl
Вышеуказанные три метода используются для рисования 2D-графики и изображений.Если вы хотите рисовать 3D-контент, вы должны использовать webgl. Он предоставляет API-интерфейсы для рисования 3D-графики, такие как составление 3D-моделей через вершины, отображение каждой поверхности, установка источников света и растеризация их в изображения. Он часто используется для улучшения взаимодействия веб-сайтов с помощью 3D-контента, 3D-визуализации, 3D-игр и т. д., а затем 3D-взаимодействия в виртуальной реальности.
Таким образом, хотя базовыми принципами технологии внешнего рендеринга являются графика + обработка изображений, четыре технологии рендеринга, предоставляемые верхним уровнем, имеют свои особенности.
Однако у них все же есть много общего:
- Изменения положения, размера и т. д. рассчитываются с помощью матрицы
- Он должен пройти процесс преобразования графики в изображения, то есть растеризацию.
- Оба поддерживают дальнейшую обработку изображений, например различные фильтры.
- Рендеринг HTML + css будет рассчитываться в разных слоях, а холст также будет разделен на разные холсты для расчета в соответствии с объемом вычислений.
Потому что их основные графические принципы остаются прежними.
Кроме того, 3D-контент, то есть содержимое webgl, будет рассчитываться GPU, но css также может рассчитываться GPU.Это называется аппаратным ускорением css.Есть четыре свойства, которые могут запускать аппаратное ускорение: преобразование, непрозрачность. , отфильтровать, будет - менять. (Подробнее об аппаратном ускорении GPU и CSS можно найти в этой статье:На этот раз досконально изучите аппаратное ускорение GPU и CSS.)
Применение принципов составления
В дополнение к технологии графики и изображений, html+css также использует технологию компиляции. Потому что html и css — это DSL (dominspecific language, предметно-ориентированный язык), то есть язык, специально разработанный для описания интерфейсов. Использование html для выражения структуры dom, использование css для добавления стилей в dom требует очень небольшого кода, а затем анализ html и css во время выполнения для создания dom и добавления стилей.
DSL могут упростить выражение логики предметной области, и во внешнем домене есть другие технологии, использующие DSL, такие как graphql.
Суммировать
Из-за механизма визуального сохранения человеческого глаза, пока каждый кадр рисуется в течение 0,1 с, изображение, которое видят люди, является непрерывным, что является принципом отображения. Рисунок каждого кадра проходит через процесс растеризации рендеринга графики и преобразования графики в изображение.2D и 3D графика имеют разные алгоритмы рендеринга и растеризации соответственно. Кроме того, дальнейшая обработка изображения может производиться после преобразования в изображение.
Четыре технологии рендеринга во внешнем интерфейсе: html+css, canvas, svg и webgl, каждая из которых имеет свою направленность и используется для рендеринга различного контента:
- html css для макета
- холст для гибкой графики и рендеринга изображений
- svg для векторного рендеринга
- webgl для рендеринга 3D-графики
Но их теоретическая основа — компьютерная графика + обработка изображений. (Более того, чтобы облегчить выражение логики, html+css также разработал DSL, который использует технологию компиляции)
Эти четыре метода рендеринга могут показаться очень разными, но на теоретическом уровне многие вещи одинаковы. Вот почему мы хотим изучать основы работы с компьютером, потому что это позволяет нам глубже и глубже понимать технологии.