WebGL - Основы: Дружественное введение для начинающих
Здравствуйте, будущие маги WebGL! Я рад быть вашим проводником в этом захватывающем путешествии в мир WebGL. Как кто-то, кто преподавал компьютерную графику на протяжении многих лет, я с нетерпением жду возможности поделиться магией WebGL с вами. Не волнуйтесь, если вы новички в программировании - мы начнем с азов и будем постепенно наращивать наши знания. Так что возьмите杯 кофе (или чая, если это ваше дело) и погружайтесь с нами!
Что такое WebGL?
Прежде чем мы углубимся в Details, давайте поймем, что такое WebGL. WebGL (Web Graphics Library) - это мощная JavaScript API, которая позволяет нам создавать потрясающие 3D-графики прямо в наших веб-браузерах. Это как иметь迷你-киностудию у вас под рукой!
Представьте WebGL как мост между вашим веб-браузером и графикой вашего компьютера. Он позволяет нам использовать мощность вашего GPU (Graphics Processing Unit) для рендеринга сложных 3D-сцен с плавной производительностью. Круто, правда?
WebGL - Координатная система
Теперь давайте поговорим о координатной системе WebGL. Представьте, что вы стоите в центре огромного, невидимого 3D-куба. Это в значительной степени то, что и есть координатная система WebGL!
Декартова координатная система
WebGL использует 3D-декартову координатную систему. Она похожа на 2D-систему, которую вы можете изучить на уроках математики, но с дополнительнойницей:
- X-ось: Горизонтальная (слева направо)
- Y-ось: Вертикальная (снизу вверх)
- Z-ось: Глубина (сзади вперед)
Вот простой пример, чтобы помочь вам visualize это:
// Определите вершину (точку в 3D-пространстве)
var vertex = [
0.5, // X-координата
0.7, // Y-координата
0.0 // Z-координата
];В этом примере мы определяем точку, которая слегка справа (0.5) и выше (0.7) от центра, и прямо на поверхности экрана (0.0).
Промежуточное пространство
Одна особенность WebGL заключается в том, что он использует особый диапазон координат, называемый "промежуточным пространством". Все координаты должны находиться между -1.0 и 1.0 на каждой оси. Anything outside this range gets "clipped" (не рисуется).
// Точка в右上ом углу промежуточного пространства
var cornerPoint = [1.0, 1.0, 0.0];
// Точка, которая будет обрезана (не видна)
var clippedPoint = [1.5, 0.5, 0.0];Графика WebGL
Теперь, когда мы понимаем координатную систему, давайте поговорим о том, как именно WebGL рисует вещи.
Прimitives
WebGL рисует все с помощью простых фигур, называемых примитивами.有三種主要类型：
- Точки
- Линии
- Треугольники
Вот таблица, резюмирующая эти примитивы:
| Примитив | Описание | Случай использования |
|---|---|---|
| Точки | Единичные пиксели | Эффекты частиц, звезды |
| Линии | Прямые линии между точками | Рамки, графики |
| Треугольники | Фигуры с тремя точками | Большинство 3D-моделей, рельеф |
Давайте посмотрим, как мы можем определить простой треугольник:
var triangleVertices = [
0.0, 0.5, 0.0, // Верхняя точка
-0.5, -0.5, 0.0, // Левая нижняя точка
0.5, -0.5, 0.0 // Правая нижняя точка
];Этот код определяет три точки треугольника. Каждая точка представлена тремя числами (x, y, z).
Буферы
Чтобы на самом деле получить наш треугольник на экране, нам нужно использовать что-то called a buffer. Представьте буфер как контейнер, который хранит наши вершины данные и отправляет их на GPU.
Вот как мы можем создать и заполнить буфер:
// Создайте буфер
var buffer = gl.createBuffer();
// Привяжите буфер (сделайте его активным)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
// Заполните буфер данными треугольника
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);Не волнуйтесь, если это пока выглядит немного запутанно. Мы разберем это более подробно по мере продвижения!
Шейдерные программы
Теперь мы подошли к真的很 увлекательной части: шейдеры! Шейдеры - это особые программы, которые работают на вашем GPU. Они как крошечные фабрики, обрабатывающие каждую вершину и пиксель вашей 3D-сцены.
Типы шейдеров
В WebGL есть два основных типа шейдеров:
- Вершинные шейдеры: Обрабатывают каждую вершину (точку) в вашей 3D-сцене
- Фрагментные шейдеры: Определяют цвет каждого пикселя
Вот простой пример каждого:
// Вершинный шейдер
attribute vec4 a_position;
void main() {
gl_Position = a_position;
}
// Фрагментный шейдер
precision mediump float;
void main() {
gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Ярко-красный цвет
}Вершинный шейдер принимает каждую точку (вершину) и решает, где она должна быть на экране. Фрагментный шейдер затем закрашивает все пиксели между этими точками.
Компиляция и liên kết шейдеров
Чтобы использовать наши шейдеры, нам нужно скомпилировать их и связать их в программу:
// Создайте шейдерную программу
var program = gl.createProgram();
// Привяжите и скомпилируйте шейдеры
var vertexShader = createShader(gl, gl.VERTEX_SHADER, vertexShaderSource);
var fragmentShader = createShader(gl, gl.FRAGMENT_SHADER, fragmentShaderSource);
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
// Свяжите программу
gl.linkProgram(program);Этот процесс похож на компиляцию и связь обычной программы, но он происходит на GPU!
Переменные OpenGL ES SL
Наконец, давайте поговорим о некоторых специальных переменных, используемых в Языке shading OpenGL ES (язык, на котором написаны наши шейдеры).
Атрибуты
Атрибуты - это входные переменные, используемые в вершинных шейдерах. Они обычно содержат данные о каждой вершине, такие как положение или цвет.
attribute vec4 a_position;Униформы
Униформы - это глобальные переменные, которые одинаковы для всех вершин и фрагментов. Они很适合 для таких вещей, как матрицы преобразования или информация о освещении.
uniform mat4 u_modelViewMatrix;Переменные
Переменные - это переменные, передающие данные от вершинного шейдера к фрагментному шейдеру. Они интерполируются между вершинами.
varying vec4 v_color;Вот таблица, резюмирующая эти типы переменных:
| Тип переменной | Используется в | Назначение |
|---|---|---|
| Атрибут | Вершинный шейдер | Входные данные для каждой вершины |
| Униформ | Оба | Глобальные данные |
| Переменная | Оба | Данные, передаваемые от вершинного к фрагментному шейдеру |
И вот и все! Мы рассмотрели основы WebGL, от координат до шейдеров. Помните, что обучение WebGL похоже на обучение рисованию - это требует практики и терпения. Не отчаивайтесь, если все не сложится сразу. Продолжайте экспериментировать, и вскоре вы начнете создавать потрясающие 3D-графики в вашем браузере!
Счастливого кодирования, будущие мастера WebGL!
Credits: Image by storyset