Введение

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

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

Программа WebGL состоит из части кода JavaScript и части «кода шейдера», написанной на GLSL (OpenGL Shading Language). GLSL - это настраиваемый язык, выполняемый непосредственно на графическом процессоре / графической карте, а не на центральном процессоре, таком как Javascript.

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

Рисование конвейера в GLSL

Для начала давайте объясним, что такое конвейер рисования в WebGL.

Webgl выполняет рендеринг в несколько этапов. На каждый шаг подается результат предыдущего шага, поэтому он является конвейером:

Чтобы нарисовать оранжевый квадрат в WebGL, мы должны:

  • Опишите квадрат в JS.

Квадрат состоит из 4 вершин. вершина (особая вершина) - это угловая точка многоугольника. Вершина в 3D имеет три координаты (x, y, z) в пространстве.

  • Превратите квадрат в треугольники с помощью вершинного шейдера.

вершинный шейдер написан на GLSL и обрабатывает каждую вершину (x, y, z), предоставленную JS, и задает ей позицию (a, b) на экране.

Вне вершинного шейдера мы описываем наше изображение только треугольниками, сглаженными в векторном формате. Другими словами, он превращает сложный материал в 3D в 2D векторное изображение / представление SVG, сделанное только с треугольниками.

В нашем примере квадрат преобразован в два треугольника в экранном пространстве.

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

  • Превратите треугольники в пиксели

Растеризация - это задача взять изображение, описанное в формате векторной графики (формы), и преобразовать его в растеризованное изображение (пиксели или точки) для вывода на экран, гарнитуру VR или, в нашем чехол на холсте. Аналогичным образом можно было бы преобразовать изображение SVG в изображение PNG.

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

  • Придайте цвет каждому пикселю

Фрагментный шейдер - это некоторый код, написанный на GLSL, который обрабатывает каждый фрагмент и придает ему цвет. Он принимает один потенциальный пиксель, который по-прежнему называется фрагментом (x, y), в качестве входных данных и создает один фрагмент с цветом в качестве выходных данных. Фрагментные шейдеры также называются пиксельными шейдерами.

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

Вывод

Мы определили конвейер GL:

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

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

Первоначально опубликовано на сайте inovia.fr 23 января 2017 г.