WebGL Lesson 1 – A triangle and a square / WebGL Урок 1 - треугольник и квадрат: WebGL Урок 1 - треугольник и квадрат

Приветствую в моём первом WebGL учебнике! Этот первый урок основан на втором номере учебника NeHe OpenGL, который очень популярен в изучении 3D графике для создания игр.

Torna 28.07.10 в 23:46

Урок покажет вам как нарисовать треугольник и квадрат на web-странице

Torna 28.07.10 в 23:49

Может это не так интересно само по себе, но это превосходное введение по основам WebGL; если вы поймете как это работает, все остальное для вас будет легким...

Torna 28.07.10 в 23:52

Предупреждение: эти уроки предназначены для людей с обширным программистским опытом, но не имеющих навыков в 3D графике; советуем вам приступать, если вы хорошо разбираетесь, что происходит в коде, только тогда вы сможете сделать ваши собственные 3D web-страницы настолько быстро, как это только возможно

undefiened 30.07.10 в 21:00

Я пишу, как изучал WebGL сам, и мог допустить (и скорее всего допустил) ошибки; используйте на свой страх и риск.

undefiened 30.07.10 в 21:03

Однако, я устраняю ошибки и корректирую (заблуждения), когда я услышу их, если Вы заметите любые ошибки то, пожалуйста дайте мне знать в комментариях.

Torna 02.08.10 в 23:40

Пример этого кода Вы можете получить двумя путями. Нажав нажав "Просмотреть исходный код", при просмотре примера в браузере, или если Вы используете GitHub, Вы можете скопировать (и будущие уроки тоже) из репозитория. В любом случае, если у вас есть код, загрузите его в вашем любимом текстовом редакторе и посмотрите его.

Torna 02.08.10 в 23:54

Это довольно сложно на первый взгляд, даже если Вы знакомы с основами OpenGL на уровне основ.

Torna 02.08.10 в 23:58

В самом начале мы определяем два шейдера, что в общем-то считается относительно продвинутым делом, но не отчаивайтесь, на самом деле это гораздо проще чем кажется.

realgaa 03.08.10 в 04:47

Это всё тело страницы — всё прочее написано на JavaScript (хотя, если вы получили код с помощью вызова пункта меню "Просмотреть исходный код", вы увидите кое-какой дополнительный код необходимый для аналитики моего сайта. Этот код можете не рассматривать.

realgaa 03.08.10 в 04:52

Понятно, что мы можем вставить любое количество обычных HTML-тэгов, и встроить наше WebGL-изображение в обычную web-страницу, но для этой простой демонстрации мы используем только WebGL, ссылки на эту статью, и тэг в котором размещаем 3D графику.

realgaa 03.08.10 в 04:57

Канвасы это новшество появившееся в HTML 5.0 — с их помощью поддерживаются новые типы элементов отображаемых в web-страницах с помощью JavaScript, как 2D, так и (средствами WebGL) 3D-элементов.

realgaa 03.08.10 в 05:01

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

realgaa 03.08.10 в 05:08

Давайте взглянем на эту функцию:

realgaa 03.08.10 в 05:09

function webGLStart() {
var canvas = document.getElementById("lesson01-canvas");
initGL(canvas);
initShaders();
initBuffers();
//
gl.clearColor(0.0, 0.0, 0.0, 1.0);
gl.clearDepth(1.0)
gl.enable(gl.DEPTH_TEST);
gl.depthFunc(gl.LEQUAL);
//
setInterval(drawScene, 15);
}

Torna 28.07.10 в 23:54

Она вызывает функции для инициализации WebGL и шейдеров, о которых я ранее упоминал, передавая их в элемент canvas, в котором мы хотим нарисовать наши 3D-штуковины, а затем она инициализирует некоторые буферы используя initBuffers. Буферы используются для хранения информации о треугольнике и квадрате, которые мы собираемся рисовать,— о них мы поговорим через секунду.

realgaa 03.08.10 в 05:21

var triangleVertexPositionBuffer;
var squareVertexPositionBuffer;

Torna 28.07.10 в 23:54

function initBuffers() {
triangleVertexPositionBuffer = gl.createBuffer();

Torna 28.07.10 в 23:54

var vertices = [
0.0, 1.0, 0.0,
-1.0, -1.0, 0.0,
1.0, -1.0, 0.0
];

Torna 28.07.10 в 23:54

gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);

Torna 28.07.10 в 23:54

triangleVertexPositionBuffer.itemSize = 3;
triangleVertexPositionBuffer.numItems = 3;

Torna 28.07.10 в 23:55

squareVertexPositionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, squareVertexPositionBuffer);
vertices = [
1.0, 1.0, 0.0,
-1.0, 1.0, 0.0,
1.0, -1.0, 0.0,
-1.0, -1.0, 0.0
];
gl.bufferData(gl.ARRAY_BUFFER, new WebGLFloatArray(vertices), gl.STATIC_DRAW);
squareVertexPositionBuffer.itemSize = 3;
squareVertexPositionBuffer.numItems = 4;
}

Torna 28.07.10 в 23:55