WebGL: 3D-рендеринг в браузере

Введение в WebGL: магия 3D в браузере 🌟

WebGL — это не просто технология, а целый мир возможностей! Представь: ты можешь создавать потрясающие 3D-сцены прямо в браузере, без плагинов и сложных настроек. Как это работает? Давай разберёмся!

WebGL — это JavaScript-API для рендеринга интерактивной 3D-графики. Под капотом оно использует OpenGL ES, что даёт доступ к GPU прямо из браузера.

// Самый простой пример: инициализация WebGL
const canvas = document.getElementById('myCanvas');
const gl = canvas.getContext('webgl');

if (!gl) {
  console.error('WebGL не поддерживается в вашем браузере!');
}

Основы WebGL: вершины, шейдеры и буферы 🧩

WebGL работает с вершинами (точками в 3D-пространстве) и шейдерами — программами, которые выполняются на GPU. Шейдеры бывают двух типов:

Вершинные шейдеры — обрабатывают каждую вершину
Фрагментные шейдеры — определяют цвет каждого пикселя

// Пример вершинного шейдера
const vertexShaderSource = `
  attribute vec2 position;

  void main() {
    gl_Position = vec4(position, 0.0, 1.0);
  }
`;

// Пример фрагментного шейдера
const fragmentShaderSource = `
  precision mediump float;

  void main() {
    gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0); // Красный цвет
  }
`;

Создаём первый треугольник 🔺

Давай нарисуем простой треугольник — это "Hello World" в мире WebGL!

// 1. Создаём буфер вершин
const vertices = new Float32Array([
   0.0,  0.5,  // Верхняя вершина
  -0.5, -0.5,  // Левая нижняя
   0.5, -0.5   // Правая нижняя
]);

const vertexBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, vertexBuffer);
gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

// 2. Компилируем шейдеры
const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// Аналогично для фрагментного шейдера...

// 3. Создаём и связываем программу
const shaderProgram = gl.createProgram();
gl.attachShader(shaderProgram, vertexShader);
gl.attachShader(shaderProgram, fragmentShader);
gl.linkProgram(shaderProgram);
gl.useProgram(shaderProgram);

// 4. Рисуем!
gl.drawArrays(gl.TRIANGLES, 0, 3);

💡 Совет: Для отладки WebGL используй расширение WebGL Inspector или встроенные инструменты разработчика браузера.

Матрицы преобразований: двигаем объекты 🏗️

Чтобы перемещать, вращать и масштабировать объекты, используют матрицы преобразований. В WebGL мы часто работаем с:

Матрицей модели (Model)
Матрицей вида (View)
Матрицей проекции (Projection)

// Пример использования библиотеки glMatrix для матричных операций
import { mat4 } from 'gl-matrix';

const modelMatrix = mat4.create();
mat4.translate(modelMatrix, modelMatrix, [0.5, 0.0, 0.0]); // Сдвиг по X
mat4.rotateZ(modelMatrix, modelMatrix, Math.PI / 4); // Поворот на 45 градусов

Текстуры: добавляем реалистичности 🖼️

Без текстур 3D-графика выглядит плоской и невыразительной. Давай научимся загружать и применять текстуры!

const texture = gl.createTexture();
gl.bindTexture(gl.TEXTURE_2D, texture);

// Временная текстура-заглушка
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 1, 1, 0, gl.RGBA, gl.UNSIGNED_BYTE,
              new Uint8Array([0, 255, 0, 255])); // Зелёный пиксель

// Асинхронная загрузка реальной текстуры
const image = new Image();
image.onload = function() {
  gl.bindTexture(gl.TEXTURE_2D, texture);
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, image);
  gl.generateMipmap(gl.TEXTURE_2D);
};
image.src = 'texture.jpg';

Оптимизация производительности ⚡

WebGL требует внимания к производительности. Вот несколько ключевых правил:

Минимизируй вызовы WebGL API — объединяй операции
Используй инстансинг для рисования множества одинаковых объектов
Применяйте Level of Detail (LOD) для сложных моделей

// Пример инстансинга в WebGL2
gl.drawArraysInstanced(gl.TRIANGLES, 0, 6, 100); // Рисуем 100 экземпляров

Библиотеки и фреймворки: ускоряем разработку 🛠️

Хотя работать с "чистым" WebGL полезно для понимания, в реальных проектах часто используют библиотеки:

Библиотека	Описание
Three.js	Полноценный 3D-фреймворк
Babylon.js	Профессиональный движок
P5.js	Простое креативное кодирование

// Пример создания сцены в Three.js
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

Что дальше? 🚀

Теперь у тебя есть базовое понимание WebGL! Для дальнейшего изучения:

Экспериментируй с шейдерами (попробуй эффекты частиц, постобработку)
Изучи продвинутые техники: deferred rendering, PBR материалы
Посмотри примеры на WebGL Fundamentals (отличный бесплатный ресурс)

WebGL открывает двери в мир браузерной 3D-графики — от простых визуализаций до сложных игр и VR-приложений. Главное — начать и не бояться экспериментировать!