WebGL: интерактивная 2D/3D-графика для сайтов

Что такое WebGL

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

С помощью WebGL можно создавать трехмерные объекты: кубы, сферы или сложные модели. В таких моделях важную роль играет геометрия, которая состоит из полигонов (поверхностей), образованных вершинами с координатами x, y, z.

Пример: если нужно изобразить простую фигуру, такую как куб, то его геометрия будет состоять из шести квадратных сторон, каждая из которых разделена на треугольные полигоны. Таким образом, куб создается за счет точек — «вершин» на его углах, которые соединяются между собой, образуя грани.

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

Читайте также:

Как создать анимацию 3D-текста в Cinema 4D

Основные функции WebGL

WebGL использует две основные функции для построения графики — вычисления вершинных и фрагментных шейдеров.

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

WebGL использует JavaScript для всей логики приложения, но для шейдеров применяется язык GLSL (OpenGL Shading Language) — язык программирования, который создали для написания шейдеров в графике: текстуры и освещение. Это язык работает на GPU — микросхема, которая быстро обрабатывает графику и выполняет много задач параллельно, чтобы улучшить работу с изображениями и видео. 

Почему WebGL использует видеокарту

Для большинства вычислений WebGL использует GPU (видеокарту), а не CPU (центральный процессор). Причина — нужно обрабатывать большие объемы информации. Например, если в сцене есть сложная модель с большим количеством полигонов и освещения, то процессор просто не справится с рендерингом в реальном времени. GPU же специально предназначен для параллельной обработки множества операций, поэтому он подходит для рендеринга трехмерной графики.

Пример: в игре или приложении с 3D-графикой для рендеринга объектов в реальном времени GPU будет обрабатывать текстуры, тени и освещение, чтобы при каждом движении камера обновляла картинку мгновенно. Без GPU рендеринг занял бы гораздо больше времени.

Готовые библиотеки для работы с WebGL

Чтобы упростить работу с WebGL, создали много библиотек, которые предлагают готовые инструменты для отображения 3D-объектов. Это помогает разработчикам не писать код с нуля. Самая популярная библиотека — three.js. На сайте threejs.org есть много примеров, где можно ознакомиться с разными проектами, посмотреть готовый код и начать работать с библиотекой.

Преимущества three.js

Three.js делает работу с WebGL доступной и удобной даже для начинающих разработчиков. Основные преимущества библиотеки:

1. Простой интерфейс. Можно легко создавать 3D-сцены, освещение, тени и текстуры. Например, чтобы отобразить куб, достаточно создать его в несколько строк кода.
2. Автоматизация процессов. Three.js скрывает от разработчиков многие низкоуровневые операции WebGL: управление памятью или управление буферами. Это ускоряет процесс разработки и снижает вероятность ошибок.
3. Подробная документация и примеры. На threejs.org можно найти много примеров с готовым кодом, которые помогают освоить библиотеку. Так новичкам проще научиться использовать этот инструмент. 

Пример: с помощью three.js можно создать вращающуюся планету с текстурой в несколько шагов. Сначала задается геометрия сферы, потом добавляется текстура (например, карта Земли), и объект начинает вращаться.

Читайте также:

Как создать 3D-анимацию: от идеи к реализации

Как проверить поддержку WebGL в браузере

Перед началом работы можно проверить, поддерживает ли ваш браузер WebGL. Для этого зайдите на https://get.webgl.org: если видите вращающийся куб, то браузер готов к 3D-графике. Если нет, настройте аппаратное ускорение:

1. Откройте настройки Google Chrome: chrome://settings.
2. Выберите «Дополнительные настройки», затем включите «Использовать аппаратное ускорение».
3. Перезагрузите браузер.
4. Введите chrome://flags и проверьте, не отключен ли WebGL.

Платформы для первых учебных проектов с WebGL

Для учебных проектов подойдут платформы, где можно интерактивно работать с HTML, WebGL и CSS:

• jsfiddle.net
• jsbin.com
• codepen.io

Эти платформы схожи по функциям. Для первого проекта используйте, к примеру, codepen.io. После регистрации есть короткий туториал.

Сборка простой 3D-сцены с вращающимся кубом

Создаем простую сцену: вращающийся куб при проверке браузера. В поле HTML загружаем скрипты с сайта webglfundamentals.org:

Основной скрипт для базовых функций WebGL:

<script src=»https://webglfundamentals.org/webgl/resources/webgl-utils.js»></script>

Этот тег просто загружает библиотеку webgl-utils.js с сайта WebGL Fundamentals, чтобы использовать готовые функции для работы с WebGL.

Скрипт с глобальными переменными для учебных проектов:

<script src="https://webglfundamentals.org/webgl/resources/webgl-lessons-helper.js"></script>

Этот скрипт загружает библиотеку webgl-lessons-helper.js с сайта WebGL Fundamentals, добавляя функции для упрощения работы с учебными примерами WebGL, такими как создание матриц и управление событиями мыши.

Скрипт для математических функций:

<script src="https://webglfundamentals.org/webgl/lessons/resources/3d-math.js"></script>

Этот скрипт загружает библиотеку 3d-math.js с сайта WebGL Fundamentals, которая содержит математические функции для работы с 3D-графикой, например, для создания и преобразования матриц и векторов.

Потом создаем вершинный и фрагментный шейдеры и холст для их отображения:

<!-- vertex shader -->
<script id="2d-vertex-shader" type="x-shader/x-vertex">
attribute vec4 a_position;
uniform mat4 u_worldViewProjection;
void main() {
   gl_Position = u_worldViewProjection * a_position;
}
</script>
<!-- fragment shader -->
<script id="2d-fragment-shader" type="x-shader/x-fragment">
void main() {
   gl_FragColor = vec4(0,0,0,1);
}
</script>

Добавляем «холст», на котором будет отображаться наш будущий куб:

<canvas id="c"></canvas>

В поле CSS зададим размеры холста. Ставим отступы, задаем высоту и ширину для отрисовки графики.

body { 
  margin:0; 
}

canvas { 
  width: 100vw; height: 100vh; display: block;
}

Создание куба и запуск рендера

Дальше переходим к окну с JS и создаем вертексы для куба. А еще пишем таблицу соединений этих вершин. Так выглядит куб на языке математики.

В поле JS создаем вершины куба и таблицу их соединений:

"use strict";
var m = ThreeDMath;
function main() {
  var cubeVertices = [
    -1, -1, -1,
     1, -1, -1,
     1,  1, -1,
    -1,  1, -1,
    -1, -1,  1,
     1, -1,  1,
     1,  1,  1,
    -1,  1,  1,
  ];
  var indices = [
    0, 1,
    1, 2,
    2, 3,
    3, 0,
    4, 5,
    5, 6,
    6, 7,
    7, 4,
    0, 4,
    1, 5,
    2, 6,
    3, 7,
  ];

Но пока мы ничего не увидим — нужно создать камеру и запустить рендер для отрисовки куба.

Пишем простую проверку на работу WebGL. Если кто-то запустит ее в браузере без поддержки, то появится сообщение (о том, что не поддерживается WebGL).

var canvas = document.getElementById("c");
  var gl = canvas.getContext("webgl");
  if (!gl) {
    alert("no webgl");
    return;
  }

Дальше нужно вытащить функции отрисовки шейдеров и сообщить, что они нужны для будущего рендера.

var program = webglUtils.createProgramFromScripts(
      gl, ["2d-vertex-shader", "2d-fragment-shader"]);
  gl.useProgram(program);
  var positionLoc = gl.getAttribLocation(program, "a_position");
  var worldViewProjectionLoc =
      gl.getUniformLocation(program, "u_worldViewProjection");

Теперь нужно зарезервировать видеопамять под рендер. Это можно сделать через функции буфера. Последовательно создаем переменную буфера, кладем туда наши значения вертексов, говорим, что это будет массив данных. И делаем то же самое, но для наших точек.

var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(
      gl.ARRAY_BUFFER,
      new Float32Array(cubeVertices),
      gl.STATIC_DRAW);
  gl.enableVertexAttribArray(positionLoc);
  gl.vertexAttribPointer(positionLoc, 3, gl.FLOAT, false, 0, 0);
  var buffer = gl.createBuffer();
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, buffer);
  gl.bufferData(
      gl.ELEMENT_ARRAY_BUFFER,
      new Uint16Array(indices),
      gl.STATIC_DRAW);

Запускаем рендер и настраиваем виртуальную камеру. Объявляем переменную для задания отсчета фреймов, потом прорисовываем всё на виртуальном холсте.

function render(clock) {
    clock *= 0.001;
    var scale = 4;
    webglUtils.resizeCanvasToDisplaySize(gl.canvas, window.devicePixelRatio);
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);
    gl.clear(gl.COLOR_BUFFER_BIT);

Переходим к камере. Нужно задать размер объектива и анимацию ее поворота: так будет проще создать иллюзию анимированного куба. Нужно задать синус и косинус. И в конце важно установить фокус камеры — относительно чего она будет вращаться.

 var fieldOfView = Math.PI * 0.25;
    var aspect = canvas.clientWidth / canvas.clientHeight;
    var projection = m.perspective(fieldOfView, aspect, 0.001, 800);
    var radius =5;
    var eye = [
        Math.sin(clock) * radius,
        1,
        Math.cos(clock) * radius,
    ];
    var target = [0, 0, 0];
    var up = [0, 1, 0];
    var view = m.lookAt(eye, target, up);

Завершающий этап — запустить заготовленные функции и отправить на рендер.

  var worldViewProjection = m.multiplyMatrix(view, projection);
    gl.uniformMatrix4fv(worldViewProjectionLoc, false, worldViewProjection);
    gl.drawElements(gl.LINES, indices.length, gl.UNSIGNED_SHORT, 0);
    requestAnimationFrame(render);
  }
  requestAnimationFrame(render);
}
main();

Полезные ресурсы и примеры для WebGL

Примеры с вращающимся кубом — галерея готовых примеров с разной интерактивностью доступна на codepen.io и threejs.org.

Примеры использования WebGL

• Интерактивный ландшафт с инфографикой: o3.dotimo.ru
• 3D-модель автомобиля с возможностью изменения цвета: partner.viscircle.com/VWPolo

Главное о WebGL

• WebGL — мощный инструмент для 3D- и 2D-графики на веб-сайтах. Это API на базе JavaScript. С помощью этого API можно создавать графику без дополнительных плагинов, прямо в браузере. Так получаются интерактивные и визуально насыщенные веб-приложения.
• Поддержка видеокартой (GPU). Для рендеринга сложных элементов — теней и света — используют графический процессор, что ускоряет обработку и улучшает качество визуализации.
• Простота и популярность. Three.js — одна из самых распространенных библиотек для работы с WebGL. Она автоматизирует многие низкоуровневые процессы, упрощая создание 3D-сцен для начинающих и опытных разработчиков.
• Поддержка браузером — перед началом работы стоит убедиться, что ваш браузер поддерживает WebGL, иначе 3D-графика отображаться не будет. Проверить это можно на сайте get.webgl.org.
• Платформы для обучения и экспериментов — для начинающих и практики идеальны jsfiddle.net, jsbin.com и codepen.io, где можно разрабатывать и тестировать проекты в режиме онлайн.
• Примеры и примечательные проекты — готовые интерактивные проекты можно найти на threejs.org и codepen.io, а еще воспользоваться готовыми учебными ресурсами для понимания работы WebGL.
• Будущее и интеграция с VR — у WebGL есть потенциал для интеграции с технологиями виртуальной реальности (VR). Его можно использовать в образовательных, медицинских и развлекательных проектах.