Начало работы с WebGL

WebGL позволяет веб-контенту использовать API, основанный на OpenGL ES 2.0, для выполнения 2D и 3D отрисовки в HTML canvas в браузерах, которые его поддерживают, без использования плагинов.

Программы WebGL состоят из управляющего кода, написанного на JavaScript, и кода шейдеров (GLSL), который выполняется на графическом процессоре компьютера (GPU). Элементы WebGL могут быть смешаны с другими HTML-элементами и составлены с другими частями страницы или фоном страницы.

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

Примеры кода в этом учебнике также можно найти в папке webgl-examples на GitHub.

Стоит отметить, что эта серия статей посвящена самому WebGL; однако существует ряд фреймворков, которые обобщают возможности WebGL, что упрощает создание 3D-приложений и игр, таких как THREE.js и BABYLON.js.

Подготовка к рендерингу в 3D

Сначала создайте два новых файла:

"index.html"
"webgl-demo.js"

Файл "index.html" должен содержать следующее:

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>WebGL Demo</title>
    <script src="webgl-demo.js" type="module"></script>
  </head>

  <body>
    <canvas id="gl-canvas" width="640" height="480"></canvas>
  </body>
</html>

Обратите внимание, что это объявляет холст, в который будет рисовать наша демонстрация.

Подготовка контекста WebGL

Добавьте следующий код в файл "webgl-demo.js":

main();

//
// start here
//
function main() {
  const canvas = document.querySelector("#gl-canvas");
  // Initialize the GL context
  const gl = canvas.getContext("webgl");

  // Only continue if WebGL is available and working
  if (gl === null) {
    alert(
      "Unable to initialize WebGL. Your browser or machine may not support it.",
    );
    return;
  }

  // Set clear color to black, fully opaque
  gl.clearColor(0.0, 0.0, 0.0, 1.0);
  // Clear the color buffer with specified clear color
  gl.clear(gl.COLOR_BUFFER_BIT);
}

Функция main() вызывается при загрузке нашего скрипта. Ее цель — настроить контекст WebGL и начать рендеринг содержимого.

Первое, что мы делаем, это получаем ссылку на холст, присваивая её переменной с именем canvas.

После получения холста мы пытаемся получить WebGLRenderingContext для него, вызвав getContext() и передав ему строку "webgl". Если браузер не поддерживает WebGL, getContext() вернет null, в этом случае мы отобразим сообщение пользователю и завершим выполнение.

Если контекст успешно инициализирован, переменная gl — наша ссылка на него. В этом случае мы устанавливаем цвет очистки в черный и очищаем контекст до этого цвета (перерисовывая холст фоновым цветом).

На этом этапе у вас достаточно кода, чтобы контекст WebGL был успешно инициализирован, и вы получите большой черный, пустой прямоугольник, готовый к приёму содержимого.

Просмотреть весь код | Открыть эту демонстрацию в новой вкладке

См. также

WebGL Fundamentals
Введение в современный OpenGL: серия интересных статей о OpenGL, написанных Джо Гроффом, предоставляющих четкое введение в OpenGL от его истории до важной концепции графической трубы, а также включает примеры, демонстрирующие работу OpenGL. Если вы не знаете, что такое OpenGL, это хорошее место для начала.

© 2005–2024 MDN contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL