Подумать только

logoas CogITas

Dubito - Ergo - Sum

× Error from canvas.getContext(): Maybe your browser or hardware (GPU) does not appear to support WebGL. The Canvas for WebGL below will be empty.
Mouse и Num Lock

Первая программа на WebGL

Строим 3D проекты – Шаг 1

Ускорение WebGL

Ускорение WebGL

Использование WebGL для аппаратного ускорения 3D графики

   Когда видишь потрясающие интерактивные картины 3D графики, тем более в привычном браузере, возникает желание научиться делать также:

Пример на WebGl

Пример на WebGL

Еще пример на 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"

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.

Вперед!

Вперед!

 

 

А на ближайших шагах мы для начала научимся делать примерно такое:

Error from Html: Your browser does not support the HTML5 canvas element.

 

Следующий шаг >>

<< Все статьи


Комментарии к “Первая программа на WebGL”

  • Анжи говорит:

    Цiкава!

    Ответить
  • Андрей Свирский говорит:

    А то, стараемся!

    Ответить
  • DMITRIY KO говорит:

    Привет! Тема интересная, жду следующий шаг по вебГЛ.

    Ответить
    • Андрей Свирский говорит:

      Всё пытаюсь разрулить дела и наконец сделать по этой теме следующий шаг.

      Ответить
  • Егор Митрофанов говорит:

    У меня на 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.»

    Палатка в конце статьи — крутится нормально.

    Ответить
    • Андрей Свирский говорит:

      Спасибо за информацию. У меня на Explorer 11 работает нормально. Скорее всего не срабатывает AJAX подключение шейдеров. Почему, трудно сказать. На других браузерах пробовали запускать?

      Ответить
  • Оставить комментарий

    Ваш email не будет отображаться. Обязательные поля помечены *

    (Чтобы установить аватар, необходимо зарегистрировать свой e-mail на gravatar.com. Как это сделать, написано в статье http://cogitas.ru/robots-avatar-icon-wordpress.html)