Создание окна

До HTML5, если вы хотели отобразить картинку на веб-странице, то этом можно было сделать только с помощью тега img. Но этот тег позволял отобразить только статическую картинку. Именно по этой причине использовались сторонние решения, такие как Flash Player. Однако с выходом HTML5, появился тег canvas, который предложил удобный способ рисования динамической графики. Ниже представлен пример создания окна и инициализации WebGL 2.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title> WebGL </title>
</head>
<body onload="start()">
<canvas id="glcanvas" width="600" height="400">
Используйте браузер который поддерживает "canvas"
</canvas>
<script>
var gl;
function start() {
  var canvas = document.getElementById("glcanvas");
  gl = initWebGL(canvas);
  if (gl) {
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
    gl.enable(gl.DEPTH_TEST);
    gl.depthFunc(gl.LEQUAL);
    gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT);
  }
  else {
    retutn;
  }
}
function initWebGL(canvas) {
  gl = null;
  try {
    gl = canvas.getContext("webgl2") || canvas.getContext("webgl");
  }
  catch(e) {}
  if (!gl) {
    alert("WebGl отключён или ваш браузер не поддерживает его.");
    gl = null;
  }
  return gl;
}
</script>
</body>
</html>

Рассмотрим этот пример подробнее. В теге body, мы определяем обработчик событий onload, который вызывает функцию start(), после того как содержимое этого тега полностью загрузится. Тег canvas создаёт область размером 600x400 пикселей и идентификатором glcanvas. Содержимое этого тега будет отображено на странице в том случае, если браузер не поддерживает canvas. Далее загружается скрипт с функциями для инициации WebGL. Глобальная переменная gl предназначена для хранения контекста WebGL 2, при условии, что контекст включён и поддерживается браузером.

Рассмотрим функцию start(). Сначала мы ищем на странице элемент с идентификатором glcanvas, а результат помещаем в переменную canvas. Затем передаём функции initWebGl() значение переменной canvas. Функция initWebGl() пытается получить контекст webgl2. Если контекст не получилось извлеч, то мы сообщаем об этом и возвращаем null, иначе возвращем полученный контекст. Если у нас получилось извлечь контекст, то мы вызываем ряд процедур. Функция clearColor() устанавливает цвет для очистки экрана. Функция enable() включает возможности WebGL, которые передаются в виде параметра. Функция depthFunc() определяет работу буфера глубины. Функция clear() очищает буферы, которые передаются в качестве параметра.

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

Основы WebGL 2

Создание окна

< НАЗАД | ДАЛЕЕ >