CogITas Первая программа на WebGL
Андрей Свирский - 19-11-2016
Строим 3D проекты – Шаг 1
Ускорение WebGL
Использование WebGL для аппаратного ускорения 3D графики
Когда видишь потрясающие интерактивные картины 3D графики, тем более в привычном браузере, возникает желание научиться делать также:
Пример на WebGL
Еще пример на WebGL
Вышеприведенные примеры выполнены с помощью технологии WebGL.
WebGL (Web based Graphics Library) — программная библиотека для языка программирования JavaScript, позволяющая создавать интерактивную 3D-графику, функционирующую в широком спектре совместимых с ней веб-браузеров. За счёт использования низкоуровневых средств поддержки OpenGL часть кода на WebGL может выполняться непосредственно на видеокартах, что и дает высокую производительность.
WebGL подключается как контекст (режим) элемента canvas HTML (canvas изначально был предназначен для создания растрового двухмерного изображения).
OpenGL — спецификация, определяющая независимый от операционной системы программный интерфейс для написания приложений, использующих двумерную и трёхмерную компьютерную графику. Включает более 300 функций, поддерживаемых видеокартами, для рисования сложных трёхмерных сцен из простых примитивов.
JavaScript (JS) — прототипно-ориентированный сценарный (скриптовой) язык программирования. Наиболее широкое применение находит в браузерах как язык сценариев для придания интерактивности веб-страницам.
Из всего сказанного выше можно сделать предварительные выводы:
- Сделать классный динамичный 3D проект, поддерживаемый кучей устройств, на которых запускается интернет-браузер — это возможно!
- Начиная проекты с WebGL мы должны быть знакомы или готовы познакомится с HTML, JavaScript и OpenGL. А еще неизбежно знакомство с jQuery, ajax, css, nodeJS, php, xml, three.js 🙂
- Для работы проекта необходимо, чтобы WebGL поддерживался браузером и видеокартой.
Начнем с простых основ и со временем поднимемся к великому и лепому.
Простейшая программа обычно должна быть способна отобразить задуманную информацию. Далее, мы переходим к интерактивности, когда отображаемая информация зависит от действий пользователя.
Создадим простейшую программу в виде html страницы:
<html>
<head>
<title>WebGL "Hello World"</title>
<script src="js/01_empty_begin.js"></script>
</head>
<body>
<label id="errorMessage76canvas" style="color: red;"> </label>
<canvas id="my-canvas" width="400" height="300">
Error from Html: Your browser does not support the HTML5 canvas element.
</canvas>
</body>
</html>
Здесь в простейшем шаблоне html страницы в head мы подключаем файл с программой на JS, а в body заводим элемент canvas, внутри которого и будет отображаться вся программа. При старте программы, если установится, что браузер не поддерживает элемент canvas, то на месте canvas останется видно сообщение об этой ошибке:
Error from Html: Your browser does not support the HTML5 canvas element.
Сохраним файл как 01_empty_begin.html, а в папку js разместим файл 01_empty_begin.js (о его содержимом позже). Попробуем запустить страницу. Данная программа запускается по физическому пути html файла простым открытием в браузере по умолчанию:
WebGL «Hello World»
Вся область canvas закрасилась бирюзовым цветом. Теперь рассмотрим программу 01_empty_begin.js, которая это сделала:
//A JavaScript init function that is called once the window’s Document Object Model (DOM) has loaded
window.onload = initWebGL;
//We initiate a variable to store the WebGL context.
var gl = null;
var canvas = null;
function initWebGL()
{
canvas = document.getElementById("my-canvas");
try
{
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e)
{}
if(gl)
{
//The default value to set the color buffer.
gl.clearColor(0, 0.5, 0.5, 1);
gl.clear( gl.COLOR_BUFFER_BIT );
}
else
{
alert( "Error from canvas.getContext(): Maybe your browser or hardware (GPU) does not appear to support WebGL.");
}
}
Сначала, как только загрузится DOM (Document Object Model) при загрузке страницы, выполняется строка
window.onload = initWebGL;
которая запускает функцию initWebGL. Эта функция выполняет действия:
1. canvas = document.getElementById («my-canvas»);
Наш элемент с именем my-canvas (который мы ранее завели в html файле) привязываем к переменной canvas.
2. gl = canvas.getContext («webgl») || canvas.getContext («experimental-webgl»);
В свою очередь, далее привязываем my-canvas к переменной gl в режиме webgl или experimental-webgl, чтобы получать через нее доступ к функциям WebGL. Предварительно проверяется, поддерживается ли браузером и видеокартой технология WebGL.
3. gl.clearColor (0, 0.5, 0.5, 1);
gl.clear (gl.COLOR_BUFFER_BIT);
Наконец, само действие программы. Задаем настройки цвета фона функцией clearColor. Параметры R (red), G (green), B (blue), A (alpha) установленные в 0, 0.5, 0.5, 1 говорят, что цвет будет наполовину зеленым, наполовину синим и непрозрачным. А функция clear () выводит результат настроек в нашу область my-canvas.
Не бог весть какая программа получилась внешне, но ее овновная цель в понимании основ.
Надо добавить, что для WebGL, как и для многих других технологий, существуют фреймворки и библиотеки (уже написанные кем-то шаблоны, через который легче управлять необходимыми свойствами, программировать на более высоком уровне, не вдаваясь в подробности мелочей). Но пока будем рассматривать низкоуровневый WebGL, это стопудово пригодится 🙂
Попробуем еще потерзать наш небольшой код.
- Сымитируем ситуацию, когда режим webgl не включился. Для этого подсунем неверный код и получим соответствующее сообщение:
gl = canvas.getContext («webgl2») || canvas.getContext («experimental-webgl2»);
Ошибка поддержки аппаратуры или программы
- Функцию initWebGL можно было вызвать также так:
<body onload="initWebGL ();">
- Или так, используя библиотеку jQuery:
$(document).ready (function (){ initWebGL (); });
canvas = $(«#my-canvas»).get (0);
Итак, мы готовы начать если не путешествие, то короткие вылазки в мир WebGL.
Вперед!
А на ближайших шагах мы для начала научимся делать примерно такое:
<< Все статьи
Комментарии к “Первая программа на WebGL”
Егор Митрофанов говорит:
У меня на IE-11 нету графики в шапке, там где написано «Управление: Mouse и Num Lock» вылазят при открытии любой страницы сайта сообщения
4 раза:
«Message from webpage.
Error compiling shader: Shader compilation errors (1, 10): syntax error, unexpected Send, expecting IDENTIFIER.»
2 раза:
«Unable to initialize the shader program.»
Палатка в конце статьи — крутится нормально.