Русский

Учебник WebGL

Приложение WebGL

Примеры WebGL

WebGL - Рисование модели: Пособие для начинающих

Здравствуйте, будущие маги WebGL! Я рад быть вашим проводником в этом захватывающем путешествии в мир программирования 3D-графики. Как someone кто teaches computer science на протяжении многих лет, я могу告诉你, что рисование моделей в WebGL похоже на строительство с цифровыми кирпичиками Lego - это сложно, но оооочень полезно! Давайте окунемся и создадим немного магии на наших экранах.

WebGL - Drawing a Model

Понимание основ

Прежде чем начать рисовать модели, lets Recap что такое WebGL. WebGL (Web Graphics Library) - это JavaScript API, который позволяет нам рендерить 3D-графику в веб-браузере без каких-либо плагинов. Это как дать вашим веб-страницам суперсилы!

Теперь, когда дело доходит до рисования моделей в WebGL, у нас есть два основных метода:

Методы рисования

Method Описание Случай использования
drawArrays() Рисует примитивы, используя массив данных Простые фигуры, не индексированная геометрия
drawElements() Рисует индексированные примитивы Сложные модели, оптимизированный рендеринг

Давайте рассмотрим каждый из этих методов подробнее.

Метод drawArrays(): Упрощенное рисование

Что такое drawArrays()?

Метод drawArrays() похож на рисование карандашом - это прямо и хорошо для простых фигур. Этот метод рисует геометрические примитивы, используя массив вершинных данных.

Синтаксис и параметры

gl.drawArrays(mode, first, count);
  • mode: Тип примитива для рисования (например, gl.TRIANGLES, gl.LINES)
  • first: Начальный индекс в массиве
  • count: Количество вершин для рисования

Пример: Рисование треугольника

Давайте нарисуем простой треугольник с помощью drawArrays():

// Vertex data for a triangle
const vertices = [
   0.0,  0.5,  0.0,  // Верхняя вершина
  -0.5, -0.5,  0.0,  // Левая нижняя вершина
   0.5, -0.5,  0.0   // Правая нижняя вершина
];

// Создание и привязка буфера
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Настройка атрибутного указателя
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Рисование треугольника
gl.drawArrays(gl.TRIANGLES, 0, 3);

В этом примере мы определяем три вершины для нашего треугольника, создаем буфер для хранения этих данных, настраиваем атрибутный указатель, чтобы tell WebGL как читать наши вершины данные, и finally call drawArrays() для рендеринга нашего треугольника.

Метод drawElements(): Создание сложных моделей

Что такое drawElements()?

Если drawArrays() похож на рисование карандашом, то drawElements() похож на рисование кистью - он дает вам больше контроля и эффективности при рисовании сложных фигур. Этот метод использует индексированное рендеринг, что позволяет нам повторно использовать вершины данные.

Синтаксис и параметры

gl.drawElements(mode, count, type, offset);
  • mode: Тип примитива для рисования
  • count: Количество элементов для рисования
  • type: Тип значений в буфере элементных массивов
  • offset: Смещение в буфере элементных массивов

Пример: Рисование квадрата

Давайте нарисуем квадрат с помощью drawElements():

// Vertex data for a square
const vertices = [
  -0.5,  0.5,  0.0,  // Левый верхний
   0.5,  0.5,  0.0,  // Правый верхний
   0.5, -0.5,  0.0,  // Правый нижний
  -0.5, -0.5,  0.0   // Левый нижний
];

// Index data
const indices = [
  0, 1, 2,  // Первый треугольник
  0, 2, 3   // Второй треугольник
];

// Создание и привязка вершины буфера
const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);

// Создание и привязка буфера индексов
const indexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer);
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW);

// Настройка атрибутного указателя
const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
gl.enableVertexAttribArray(positionAttributeLocation);
gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

// Рисование квадрата
gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0);

В этом примере мы определяем четыре вершины для нашего квадрата и используем индексы, чтобы specify how these vertices should be connected to form two triangles. Мы создаем как буфер вершин, так и буфер индексов, настраиваем атрибутный указатель и finally call drawElements() для рендеринга нашего квадрата.

Необходимые операции: Рецепт успеха

Чтобы успешно нарисовать модель в WebGL, мы должны следовать нескольким ключевым шагам. Думайте об этом как о рецепте для вкусного торта с 3D-графикой!

Список дел для рисования в WebGL

  1. Создание буферов: Настройте вершины и индексные буферы для хранения данных вашей модели.
  2. Компиляция шейдеров: Напишите и скомпилируйте вершины и фрагментные шейдеры.
  3. Создание программы: Свяжите скомпилированные шейдеры в программу.
  4. Настройка атрибутных указателей: Tell WebGL как интерпретировать ваши вершины данные.
  5. Установка_uniforms: Передайте необходимые значения_uniform в ваши шейдеры.
  6. Привязка буферов: Активируйте буферы, которые вы хотите использовать для рисования.
  7. Рисование: Вызовите drawArrays() или drawElements() для рендеринга вашей модели.

Давайте соберем все вместе в более полном примере:

// Vertex shader
const vsSource = `
  attribute vec4 a_position;
  void main() {
    gl_Position = a_position;
  }
`;

// Fragment shader
const fsSource = `
  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);  // Red color
  }
`;

// Компиляция шейдера
function compileShader(gl, source, type) {
  const shader = gl.createShader(type);
  gl.shaderSource(shader, source);
  gl.compileShader(shader);
  return shader;
}

// Создание программы
function createProgram(gl, vertexShader, fragmentShader) {
  const program = gl.createProgram();
  gl.attachShader(program, vertexShader);
  gl.attachShader(program, fragmentShader);
  gl.linkProgram(program);
  return program;
}

// Основная функция рисования
function drawModel(gl) {
  // Компиляция шейдеров
  const vertexShader = compileShader(gl, vsSource, gl.VERTEX_SHADER);
  const fragmentShader = compileShader(gl, fsSource, gl.FRAGMENT_SHADER);

  // Создание программы
  const program = createProgram(gl, vertexShader, fragmentShader);
  gl.useProgram(program);

  // Создание буферов и установка данных (как в предыдущих примерах)
  // ...

  // Настройка атрибутного указателя
  const positionAttributeLocation = gl.getAttribLocation(program, 'a_position');
  gl.enableVertexAttribArray(positionAttributeLocation);
  gl.vertexAttribPointer(positionAttributeLocation, 3, gl.FLOAT, false, 0, 0);

  // Рисование
  gl.drawArrays(gl.TRIANGLES, 0, 3);  // Или gl.drawElements() для индексированной геометрии
}

Этот пример объединяет все необходимые операции для рисования модели в WebGL. Мы компилируем шейдеры, создаем программу, настраиваем буферы и атрибутные указатели, и finally call drawArrays() или drawElements() для рендеринга нашей модели.

Заключение

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

Продолжайте экспериментировать, продолжайте учиться и, самое главное, получайте удовольствие! Before you know it, вы будете создавать потрясающие 3D-миры прямо в вашем веб-браузере. Счастливого кодирования, будущие 3D-художники!

Credits: Image by storyset

Предыдущий учебник:
Связывание атрибутов и буферных объектов
Следующий учебник:
WebGL - Рисование точек