WebGL: Настройка. Часть 1

Привет всем!

Сегодня мы поговорим о WebGL.

Вообщем так: WebGL является браузерной графической библиотекой 3d с использованием JavaScript API.
Т.е. все будем писать на JS.

Перед тем как писать код давайте убедимся что у нас подходит браузер для WebGL:

— Opera — версии 11, 12
— Mozilla FireFox — с 4 версии.
— Google Chrome — c 9 версии.
— Safari — Только на Mac'e и с 5.1 версии на OS X Lion и OS X Snow Leopard.
(Для Oper'ы и Safari, WebGL по умолчанию выключен)

Также есть некий тест для проверки браузера на WebGL. (Если есть WebGL, то на экране будет вращаться кубик)

А теперь можно и приступить к настройке:

<body onload="load()">
    <canvas id="webgl" style="width: 500px; height: 400px;"></canvas>
</body>

Здесь мы создаем канвас (холст), на котором все будет рисоваться.
Перейдем к JS.

<script type="text/javascript">
	var canvas;
	var gl;

Объявляем глобальные переменные.

function initGL(canvas) {
    var inst = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
				
    if(!inst) {
        alert("У вас браузер не поддерживает WebGL");
    }

    return inst;
}

Функция которая будет инициализировать WebGL.

function load() {
	canvas = document.getElementById("webgl");
	
	gl = initGL(canvas);
	
	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);
}
</script>

А здесь мы настраиваем canvas, что б он нарисовал черным цветом и очистил все.
Далее идет добавить DEPTH_TEST, глубину.
После этого идет настройка глубины, и очищения буфера (обновление).

Вот и вся настройка.
Продолжение следует...

UPD: у IE нет планов на развития WebGL, есть плагины для него: IEWebGL

#2 UPD: весь код буду выкладывать в конце статьи, через каждую новую статью.

<!DOCTYPE html>
<html>
	<head>
		<title></title>
		<meta charset="utf-8" />
		<script type="text/javascript">
			var canvas;
			var gl;
			
			function initGL(canvas) {
				var inst = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
				
				if(!inst) {
					alert("У вас браузер не поддерживает WebGL");
				}
				
				return inst;
			}
			
			function load() {
				canvas = document.getElementById("webgl");
				
				gl = initGL(canvas);
				
				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);
			}
		</script>
	</head>
	<body onload="load()">
		<canvas id="webgl" style="width: 500px; height: 400px;"></canvas>
	</body>
</html>

6 комментариев

avatar
  • lekzd
Насчет проверки совместимости, может лучше использовать modernizr и сразу отсеить брузеры без поддержки WebGL?
avatar
Первая статья) Фреймворк использовать не буду, т.к. линейка статей о WebGL, а не как с помощью фреймворка рисовать WebGL'ом.
avatar
modernizr это не фреймворк и WebGL с помощью него не вывести. А статьи пишите, интересно, только не для маленьких (вы все-таки сейчас моложе подавляющего большинства читателей)
avatar
Ну простите Александр, просто хотел добавить немного юмора)
avatar
  • czp
охохо! и бутылка рома
avatar
Точно, Рома :D
Как-то неправильно звучит эта фраза, Рома)