WebGL - Геометрия: Пособие для начинающих

Здравствуйте, будущие маэстро WebGL! Я рад быть вашим проводником в этом захватывающем путешеествии в мир геометрии WebGL. Как кто-то, кто teaches компьютерную графику более десяти лет, я могу сказать, что понимание геометрии в WebGL похоже научение рисованию кодом. Это сложно, но очень полезно! Так что натянем рукава и окунемся в это!

WebGL - Geometry

Определение必需ой геометрии

Before мы начнем создавать потрясающие 3D-графики, мы должны понять, что такое геометрия в WebGL. По сути, геометрия - это основа всего, что мы видим на экране. Она состоит из точек, линий и форм, которые formed структуру наших 3D-объектов.

Представьте, что вы строите дом из LEGO-кирпичиков. Каждый кирпичик represents точку в 3D-пространстве, и когда вы соединяете эти точки, вы создаете ребра и поверхности. Именно это мы делаем в WebGL, но с кодом вместо пластиковых кирпичиков!

Давайте начнем с простого примера - создание треугольника:

const triangleVertices = [
0.0,  1.0,  0.0,
-1.0, -1.0,  0.0,
1.0, -1.0,  0.0
];

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

Buffer Objects

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

Создание буфера

Создание буфера - наш первый шаг в подготовке нашей геометрии для GPU. Вот как мы это делаем:

const buffer = gl.createBuffer();

Эта строка создает пустой буферный объект. Это как если бы мы подготовили пустую коробку, чтобы заполнить ее нашими LEGO-кирпичиками.

Привязка буфера

After создания буфера, мы должны сказать WebGL, что это тот буфер, с которым мы хотим работать. Мы делаем это, привязывая буфер:

gl.bindBuffer(gl.ARRAY_BUFFER, buffer);

Это как если бы мы взяли нашу LEGO-коробку и сказали: "Эй, WebGL, я собираюсь положить в эту коробку несколько кирпичиков!"

Передача данных в буфер

Теперь comes интересная часть - заполнение нашего буфера геометрическими данными:

gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(triangleVertices), gl.STATIC_DRAW);

Давайте разберем это:

gl.bufferData() - метод, который мы используем для заполнения буфера.
gl.ARRAY_BUFFER tells WebGL, что мы работаем с是我们的 текущим привязанным буфером.
new Float32Array(triangleVertices) преобразует наш массив JavaScript в типизированный массив (подробнее об этом через мгновение).
gl.STATIC_DRAW - подсказка для WebGL о том, как мы планируем использовать эти данные.

Типизированные массивы

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

Вот таблица часто используемых типизированных массивов в WebGL:

Типизированный массив	Описание	Случай использования
Float32Array	32-битные浮点数	Пositionы вершин, координаты текстур
Int8Array	8-битные знаковые целые числа	Малые целые числа
Uint8Array	8-битные беззнаковые целые числа	Компоненты цвета
Int16Array	16-битные знаковые целые числа	Большие целые числа
Uint16Array	16-битные беззнаковые целые числа	Индексы вершин
Int32Array	32-битные знаковые целые числа	Очень большие целые числа
Uint32Array	32-битные беззнаковые целые числа	Очень большие положительные целые числа

В нашем случае, мы использовали Float32Array, потому что наши позиции вершин - это浮点ные числа.

Отвязка буферов

After мы закончили работу с буфером, хорошей практикой является его отвязка:

gl.bindBuffer(gl.ARRAY_BUFFER, null);

Это как если бы мы положили LEGO-коробку обратно на полку. Это предотвращает случайные изменения нашего буфера и поддерживает чистоту состояния WebGL.

И вот оно,朋友们! Мы успешно определили нашу геометрию, создали буфер, наполнили его данными и узнали о типизированных массивах. Это основа создания любого 3D-объекта в WebGL.

Помните, обучение WebGL - это путешеество. Не волнуйтесь, если некоторые концепции сначала кажутся сложными. С практикой вы быстро начнете создавать потрясающие 3D-графики! За годы моего teaching я видел countless студентов, которые перешли от confused BEGINNERS к maestro WebGL. Вы на правильном пути к их ranks!

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

Credits: Image by storyset