Для создания приложения на WebGL нам, во-первых, необходим элемент canvas. Этот элемент и будет тем полотном, на котором
затем произойдет отрисовка сцены. Создадим простенькую страничку с данным элементом:
<!DOCTYPE html> <html> <head> <title>Изучаем WebGL</title> </head> <body> <canvas id="canvas3D" width="400" height="300">Ваш браузер не поддерживает элемент canvas</canvas> </body> </html>
Теперь нам надо получить контекст WebGL. Все действие по использование функциональности WebGL будет происходить в функции javascript,
которая будет срабатывать при загрузке страницы. Тут есть два способа: либо повесить функцию на обработчик onload
элемента body, либо использовать window.onload.
Итак, создадим перед закрывающим тегом body элемент script и изменим страницу следующим образом:
<!DOCTYPE html>
<html>
<head>
<title>Изучаем WebGL</title>
<meta charset="utf-8" />
</head>
<body>
<canvas id="canvas3D" width="400" height="300">Ваш браузер не поддерживает элемент canvas</canvas>
<script type="text/javascript">
var gl=null; // контекст WebGL
window.onload=function(){
// получаем элемент canvas
var canvas = document.getElementById("canvas3D");
try {
// Сначала пытаемся получить стандартный контекст
// Если не получится, обращаемся к экспериментальному контексту
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
}
catch(e) {}
// Если контекст не удалось получить, выводим сообщение
if (!gl) {
alert("Ваш браузер не поддерживает WebGL");
}
if(gl){
// покрасим в серый цвет фон
gl.clearColor(0.5, 0.5, 0.5, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
}
}
</script>
</body>
</html>
Вначале мы объявляем глобальную переменную var gl=null - это и есть контекст WebGL, через который будет идти рисование.
Далее у нас идет функция, срабатывающая при загрузке страницы. Для начала мы устанавливаем контекст:
gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");. Элемент canvas поддерживает два контекста:
2d (используется для простого рисования) и webgl. Естественно, нам надо получить последний контекст.
Однако некоторые браузеры пока поддерживают экспериментальный контекст - experimental-webgl, поэтому в данном случае мы также пытаемся получить его,
если контекст webgl не установлен.
Далее идет закраска. Метод gl.clearColor(0.5, 0.5, 0.5, 1.0) принимает значения ARGB для цвета, которым буде закрашено полотно.
И чтобы осуществить закраску, вызываем метод gl.clear. (Если быть точнее, очищаем цветовой буфер, используя константу gl.COLOR_BUFFER_BIT).
Результатом работы должен быть элемент canvas, окрашенный в серый цвет.