Доступ к контексту WebGL

Дата публикации: 18.02.2013

WebGL контекст — это обработчик (точнее объект JavaScript), через который можно получить доступ ко всем функциям WebGL и атрибутам. Они представляют собой приложения WebGL в программный интерфейс (API).

Сейчас мы создадим функцию JavaScript, которая будем проверять, можем ли мы получить WebGL контекст на канве или нет. В отличие от других библиотек JavaScript, которые должны быть загружены и включены в работу проекта, WebGL уже находится в Вашем браузере. Другими словами, если вы используете современный браузер, с поддержкой WebGL, то ничего дополнительного вам устанавливать или подключать не нужно.

	var gl = null;
	
	function getGLContext(){
		var canvas = document.getElementById("canvas-element-id");
		if (canvas == null){
			alert("there is no canvas on this page");
			return;
		}
					
       		try {
              		// Попробуем взять стандартный контекст. Если это не удается, берем экспериментальный.
              		gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
                } 
       		catch(e) {}
       		
		if (gl == null){
			alert("WebGL не поддерживается");
		}
		else{
			alert("Ура! Вы получили WebGL контекст");
		}
	}

Нам нужно вызвать функцию при срабатывании события onload. Демо пример

Из этого примера мы научились создавать WebGL контекст, теперь поиграем с некоторыми атрибутами контекста.

Задача — написать скрипт, который бы по нажатию клавиш, к пример «1» и «2» менял цвет нашей области для рисования, а по нажатию клавиши «3», получали атрибуты выбранного цвета

	var gl = null;
		var c_width = 0;
		var c_height = 0;
		
		window.onkeydown = checkKey;
		
		function checkKey(ev){
		  switch(ev.keyCode){
			case 49:{ // 1
				// Устанавливаем цвет для закрашивания фона
				gl.clearColor(0.3,0.7,0.2,1.0);
				clear(gl);
				break;
			}
			case 50:{ // 2
				// Устанавливаем цвет для закрашивания фона
				gl.clearColor(0.3,0.2,0.7,1.0);
				clear(gl);
				break;
			}
			case 51:{ // 3
				// Получаем параметры установленного цвета
				var color = gl.getParameter(gl.COLOR_CLEAR_VALUE);
				
				alert('clearColor = (' + Math.round(color[0]*10)/10 + ',' +Math.round(color[1]*10)/10+','+Math.round(color[2]*10)/10+')');
				window.focus();
				break;
			}
		  }
		}
		
		function getGLContext(){
			var canvas = document.getElementById("canvas-element-id");
			if (canvas == null){
				alert("there is no canvas on this page");
				return;
			}
				
            var ctx = null;
            
                try {
                    // Попробуем взять стандартный контекст. Если это не удается, берем экспериментальный.
                    ctx = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
                } 
                catch(e) {}
			if (ctx == null){
				alert("WebGL is not available");
			}
			else{
				return ctx;
			}
		}
		
		function clear(ctx){
			// Закрашиваем область установленным цветом
			ctx.clear(ctx.COLOR_BUFFER_BIT);

			// Определяем рабочую область
			ctx.viewport(0,0,c_width, c_height);
		}
		
		function initWebGL(){
			gl = getGLContext();
			
		}

Нам нужно вызвать функцию при срабатывании события onload. Демо пример

Теги: CSS свойства

Показать комментарии