Уроки WebGL

WebGL Урок 6. Ввод с клавиатуры и текстурные фильтры

2012-01-11T22:32:00.000-08:00

Урок7 >>
Добро пожаловать в мой урок номер шесть в серии WebGL, основанный на уроке номер 7 в учебнике OpenGL от NeHe. Речь пойдёт о том, как вы можете реализовать обработку ввода с клавиатуры в своих WebGL страницах. Это потребуется нам для изменения скорости и направления вращения текстурированного куба, а также для изменения вида фильтрации, применяемого к текстуре, для получения низкого качества, но более быстрого, или более качественного, но медленного рендеринга. (Урок NeHe № 7 охватывает ещё и освещение. Так как освещение в WebGL более трудоёмко, чем в OpenGL, я не включил его в этот урок - мы рассмотрим его в следующий раз.)

Здесь вы можете посмотреть, как выглядит этот урок при работе в браузере, который поддерживает WebGL, лучше всего просматривать его на сайте YouTube, чтобы можно было увидеть аннотации в которых рассказывается о том, что я делаю, для того, чтобы изменить сцену:

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

После того как вы загрузили урок в браузер, вы можете использовать клавиши Page Up и Page Down для изменения zoom'а, и использовать клавиши перемещения курсора, чтобы вращать куб (чем дольше вы удерживаете нажатыми клавиши перемещения курсора, тем больше становится скорость вращения). Вы можете также использовать клавишу F для переключения между тремя различными видами текстурных фильтров, в зависимости от того, как вам лучше рассматривать полученный эффект, когда вы находитесь совсем близко по отношению к кубу или когда вы довольно далеко от него.

Подробнее о том, как все это работает ниже ...

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

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

Есть 2 способа получить код примера из этого урока: используйте "View Source", если вы просматриваете урок в браузере с поддержкой WebGL "вживую", или вы можете загрузить его отсюда GitHub.
В любом случае, когда вы получите код, загрузите его в ваш любимый текстовый редактор и просмотрите.

Самым значительным изменением между этим и предыдущим уроком является то, что теперь мы реагируем на нажатия пользователя на клавиатуре. Легче всего объяснить как это работает, это показать вам те части кода, которые отвечают за приём нажатий на клавиатуре.
Если вы начнёте просматривать код и промотаете до середины, то вы увидите, какое количество глобальных переменных определено:

var xRot = 0;
var xSpeed = 0;
var yRot = 0;
var ySpeed = 0;
var Z = -5,0;
var filter = 0;

xRot и yRot знакомы вам с Урока 5 - они представляют текущее вращение куба вокруг осей х и у. Теперь, когда мы, позволяем пользователю изменять скорость вращения куба при помощи клавиш управления курсором, xSpeed и ySpeed содержат скорости изменения xRot и yRot .
Z - конечно-же Z-координата куба - то есть то, как близко или далеко он находится по отношению к наблюдателю, она будет контролироваться клавишами Page Up и Page Down. И, наконец, фильтр, он является целым числом от 0 до 2, и означает, какой из трех фильтров используется для текстуры, которую мы накладываем на куб, и, таким образом, определяет насколько хорошо она выглядит.

Давайте теперь взглянем на код, в котором устанавливается фильтр. Первые изменения мы видим в коде, который отвечает за загрузку текстуры, немного выше и примерно после трети кода сверху. Код настолько сильно изменился, что даже нет смысла выделять изменения маркером. Тем не менее он выглядит довольно знакомо, если не присматриваться к деталям:



function handleLoadedTexture(textures) {

gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);



gl.bindTexture(gl.TEXTURE_2D, textures[0]);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[0].image);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);



gl.bindTexture(gl.TEXTURE_2D, textures[1]);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[1].image);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);



gl.bindTexture(gl.TEXTURE_2D, textures[2]);

gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, textures[2].image);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_NEAREST);

gl.generateMipmap(gl.TEXTURE_2D);



gl.bindTexture(gl.TEXTURE_2D, null);

}



var crateTextures = Array();



function initTexture() {

var crateImage = new Image();



for (var i=0; i < 3; i++) {
      var texture = gl.createTexture();
      texture.image = crateImage;
      crateTextures.push(texture);
    }

    crateImage.onload = function() {
      handleLoadedTexture(crateTextures)
    }
    crateImage.src = "crate.gif";
  }

При первом взгляде на функцию initTexture и глобальную переменную crateTextures становится ясно что код действительно изменился, схожесть в том, что мы создаём 3 объекта текстур WebGL в массиве и передаём этот массив в функцию обратного вызова handleLoadedTexture, когда изображение уже загружено. И, конечно, мы загружаем другое изображение crate.gif вместо nehe.gif.

handleLoadedTexture сильно не изменилась; в прошлый раз мы устанавливали единственный текстурный объект WebGL с данными изображения, и устанавливали для него 2 параметра gl.TEXTURE_MAG_FILTER и gl.TEXTURE_MIN_FILTER, обоим присваивалось значение gl.NEAREST. Теперь мы устанавливаем все 3 текстуры в наш массив для одного и того же изображения, но для каждого устанавливаем разные параметры, и это важное отличие от кода предыдущего урока.
Здесь о различиях текстур в подробностях:

Приближённая фильтрация

У первой текстуры оба парметра gl.TEXTURE_MAG_FILTER и gl.TEXTURE_MIN_FILTER установлены в значение gl.NEAREST. Это наша первоначальная настройка, которая означает, что в обоих случаях, когда текстура сжимается и растягивается, WebGL будут использовать фильтр, который определяет цвет точки как цвет ближайшей к ней точки исходного изображения. Для того, чтобы куб хорошо смотрелся текстура не должна быть растянута вообще или должна быть уменьшена в масштабе ( дискуссию по поводу сглаживания см. ниже ). А вот когда она растягивается, это выглядит "пиксельно", потому что алгоритм как бы растягивает пиксели оригинального изображения.

Линейная фильтрация

Для второй текстуры оба параметра gl.TEXTURE_MAG_FILTER и gl.TEXTURE_MIN_FILTER установлены в gl.LINEAR. Здесь мы опять используем тот же фильтр, что и для растягивания/сжимания. Однако линейный алгоритм для растянутых текстур работает лучше, он использует линейную интерполяцию между пикселами исходного изображения, грубо говоря, пиксел, который находится посередине между белым и чёрным получается серым. Это даёт эффект размытия, острые углы сглаживаются. ( Будьте уверены, что растягивание изображения никогда не улучшает его качества - вы не сможете разглядеть более мелкие детали изображения, если их нет ).

Мип

Для третьей текстуры gl.TEXTURE_MAG_FILTER и gl.TEXTURE_MIN_FILTER установлены в gl.LINEAR_MIPMAP_NEAREST. Это самая сложная из всех трёх опций.
Линейная фильтрация оправдывает себя, когда вы растягиваете текстуру, но когда вы сжимаете текстуру она не эффективнее, чем приближённая фильтрация, по факту оба фильтра могут изуродовать картинку подобным сглаживаением. Для просмотра этого снова загрузите пример, где используется приближённая фильтрация, или нажмите кнопку обновить для получения примера в исходном состоянии. На несколько секунд зажмите кнопку Page Up для уменьшения масштаба. Когда кубик будет удаляться, вы увидите как он начнёт "мерцать": кажется будто вертикальные линии то появляются, то исчезают. Как только вы это увидите, остановитесь и попробуйте сначала немного приблизить, а затем немного отодвинуть картинку. После того как увидите мерцание нажмите клавишу F 1 раз для того, чтобы переключиться на линейную фильтрацию, снова немного приблизьте и отдалите, отметьте для себя, что результат получился почти такой же. Теперь нажмите F ещё раз для применения мип-фильтрации, снова чуть-чуть приблизьте и отдалите отображение и вы увидите, что эффект мерцания исчез или стал почти незаметен.
Теперь, когда куб находится достаточно далеко от наблюдателя, скажем, его ширина/высота составляют 10% от размеров экрана - попробуйте попереключаться между фильтрами не перемещая куб. При приближённой или линейной фильтрации вы увидете шум : тёмные линии в некоторых местах на волокнах дерева очень заметны, в то время как в других местах их нет: куб как-бы выглядит немного испачканным. Это действительно выглядит очень плохо при приближённой фильтрации, но не сильно лучше и при линейной. Только мип-фильтрации выглядит хорошо.
Что же происходит с текстурами при применении приближённой или линейной фильтрации при сжимании текстуры? Фильтр использует каждый 10тый пиксел оригинального изображения для создания уменьшенной версии изображения. Текстура представляет собой образец деревянного волокна, это означает, что большая часть текстуры светло коричнего цвета с тёмными вертикальными полосами, давайте представим, что зерно текстуры имеет толщину 10 пикселов, или другими словами, каждый 10 пиксел по горизонтали тёмно-коричневого цвета. Если изображение ужимается в 10 раз, то мы получаем шанс 1 из 10ти, что выбраный нами пиксел для сжатого изображения будет тёмно-коричневого цвета, 9 из 10 в таком случае будут светлыми. Другими словами, одна из 10ти тёмных линий исходного изображения будет выглядеть также как на полноразмерном изображении, все остальные линии будут скрыты. Этот эффект исчезновения и порождает мерцание при изменении размера текстуры, поскольку указанные тёмные линии могут быть совершенно разными для разных коэффициентов сжатия 9.9, 10.0 и 10.1.
Нам бы всегда хотелось оказываться в такой ситуации, когда размер тесктуры изменяется каждый раз на десятую часть её оригинального размера. Каждый пиксел, принадлежащий уменьшенной копии текстуры, отображается цветом, являюющимся средним арифметическим между значениями цветов пикселов квадрата10Х10. Делать это плавно слишком дорого по вычислениям для графики реального времени, вот тут на помощь и приходит мип-фильтрация.
Мип-фильтрация решает для текстуры проблему генерации некоторого количества производных изображений, называемых мип-уровнями, половина, четверть, одна восьмая оригинального изображения и т.д. вплоть до изображения в 1 пиксел. Набор этих мипов всех уровней называется мипмап. Каждый мип-уровень является плавно уменьшенной копией большего на уровень мипа, таким образом для текущего уровня сжатия всегда можно подобрать соотвествующий мип-уровень, алгоритм выбора зависит от параметра gl.TEXTURE_MIN_FILTER, тот алгоритм, который выберем мы означает "найди ближайший мип-уровень и примени к нему линейную фильтрацию для получения цвета пиксела".
Теперь, когда всё объяснено, должно быть предельно ясно, зачем нужна следующая строка:
gl.generateMipmap(gl.TEXTURE_2D);
...эта строка сообщает WebGL, что необходимо сгенерировать мипмап.
Получилось существенно больше, чем я планировал написать о мипмапах, но я думаю, что получилось достаточно ясно:-). Дайте мне знать в комментариях, если что-то осталось вам непонятно.

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

drawScene находится через три четверти страницы и в неё внесено 3 изменения. Первое изменение: когда мы позиционируем наблюдателя при рисовании куба вне заивисимости от точки привязки, мы используем глобальную переменную z:
mat4.translate(mvMatrix, [0.0, 0.0, z]);
Следующим важным изменением является, которую мы удалили из кода 5го урока,теперь мы вообще не будем вращать вокруг оси z, а заменим на вращения вокруг осей x и y:



mat4.rotate(mvMatrix, degToRad(xRot), [1, 0, 0]);

mat4.rotate(mvMatrix, degToRad(yRot), [0, 1, 0]);

И, наконец, перед отрисовкой куба мы должны указать, какую из 3-х текстур мы хотим использовать:
gl.bindTexture(gl.TEXTURE_2D, crateTextures[filter]);

На этом изменения в drawScene закончены. Ещё немного незначительных изменений в анимации; вместо изменения xRot и yRot на постоянную величину, мы теперь используем наши новые переменные xSpeed и ySpeed:



xRot += (xSpeed * elapsed) / 1000.0;

yRot += (ySpeed * elapsed) / 1000.0;

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

Вот первое изменение, в webGLStart мы добавили 2 новые строки ( ниже, выделены красным)



function webGLStart() {

var canvas = document.getElementById("lesson06-canvas");

initGL(canvas);

initShaders();

initBuffers();

initTexture();



gl.clearColor(0.0, 0.0, 0.0, 1.0);

gl.enable(gl.DEPTH_TEST);



document.onkeydown = handleKeyDown;

document.onkeyup = handleKeyUp;



tick();

}

Очевидно, что здесь мы сообщаем JavaScript время, в течении которого мы хотим, чтобы наша функция handleKeyDown( обработчик нажатий клавиш при условии нахождения фокуса на веб-странице) была вызвана, при отпускании клавиши должна быть вызвана функция handleKeyUp.
Давайте теперь взгялнем на эти функции. Они расположены на второй половине страницы сразу за глобальными переменными и выглядят следующим образом:



var currentlyPressedKeys = {};



function handleKeyDown(event) {

currentlyPressedKeys[event.keyCode] = true;



if (String.fromCharCode(event.keyCode) == "F") {

filter += 1;

if (filter == 3) {

filter = 0;

}

}

}



function handleKeyUp(event) {

currentlyPressedKeys[event.keyCode] = false;

}

Мы занимаемся поддержанием словаря ( возможно вам знакомы названия "хэштаблица" и "ассоциативный массив"), который по передаваемому коду клавиши( см. коды клавиш в JavaScript ) может рассказать нам о том, нажимал ли пользователь уже данную клавишу или нет. Если вам не знакомы принципы работы JavaScript, вам может показаться интересным, что некоторый объект можно использовать в качестве словаря, как например этот, синтаксис, котрый мы используем для инициализации currentlyPressedKeys похож на синтаксис создания словаря в Python, на самом деле он представляет собой "пустую" подстановку объекта базового типа.
В дополнение к поддержанию в актуальном состоянии словаря кодов уже нажатых клавиш, у нас есть дополнительный обработчик для кливиши ВНИЗ ( клавиша "F"). В этом примере мы меняем глобальную переменную фильтр, принимающую значения 0, 1 и 2 при всяком нажатии клавиши "F".
Стоит объяснить зачем мы обработываем различные нажатия разными способами.
В компьютерной игре или в любой другой 3D-системе, нажатие клавиш может происходить 2мя спсособами:
1. Реакция на нажатие может возникать мгновенно - "как огонь лазера". Такие нажатия могут происходить с любой или фиксированной скоростью, например 2 раза в секунду.
2. Скорость возникновения реакции на нажатие может зависеть от того, как долго вы удерживали данную клавишу нажатой. Например, когда вы зажимаете клавишу ВПЕРЕД, вы ожидаете, что движение вперёд будет продолжаться до тех пор, пока клавиша зажата. Важно, чтобы была возможность одновременной обработки нескольких нажатий одновременно, например вы начинаете движение ввперёд, затем поворачиваетесь и стреляете без остановки движения. Эта обработка нажатий значительно отличается от обработки нажатий клавиш при обычном режиме набора текста. Если вы зажмёте клавишу "A" в обработчике слов, вы получите несколько букв "A" в потоке, однако если вы нажмёте клавишу "B" во время удерживания клавиши "А", то вы получите букву "В", а поступление букв "А" в поток остановится. Эквивалентом этой ситуации в игре является отсановка движения вскяий раз при повороте, что будет очень раздражать пользователя.
Итак, в нашем коде нажатия клавиши "F" обрабатываются в первоочерёдном порядке, поддержание словаря нажатых клавиш имеет более низкий приоритет, он содержит последовательность всех уже зажатых клавиш, а не просто последней нажатой.
Этот словарь используется функцией handleKeys. Перед тем, как мы перейдём к ней, переместитесь ненадолго к концу кода и вы увидите, что она вызывается в функции tick, также как drawScene и animate:



function tick() {

requestAnimFrame(tick);

handleKeys();

drawScene();

animate();

}

Вот что представляет из себя handleKeys:



function handleKeys() {

if (currentlyPressedKeys[33]) {

// Page Up

z -= 0.05;

}

if (currentlyPressedKeys[34]) {

// Page Down

z += 0.05;

}

if (currentlyPressedKeys[37]) {

// Left cursor key

ySpeed -= 1;

}

if (currentlyPressedKeys[39]) {

// Right cursor key

ySpeed += 1;

}

if (currentlyPressedKeys[38]) {

// Up cursor key

xSpeed -= 1;

}

if (currentlyPressedKeys[40]) {

// Down cursor key

xSpeed += 1;

}

}





Это ещё одна длинная, но очень простая функция; всё, чем она занимается-  это проверка какие клавиши зажаты на данный момент, и надлежащим образом обновляет значение нашей глобальной переменной. Важно отметить, что если одновременно зажаты клавиши ВВЕРХ и ВПРАВО, будут обновлены значеия обоих переменных xSpeed и ySpeed, это именно то, чего нам и хотелось.

И это всё на сегодня! Теперь у вас должно быть хорошее понимание того, как различные фильтры влияют на то, как будут выглядеть текстуры при различных значениях коэффициента масштабирования и того, как необходимо считывать нажатия пользователем клавиш в области 3D-анимации.

Если у вас имеются вопросы, комментарии или предложения, пожалуйста напишите об этом в комментарии ниже.

Следующий урок будет посвящён теме освещения.



<< Урок5



Урок7 >>




Благодарности: Chris Marrin’s WebKit-only spinning box сильно помогло при написании данного материала, так же как и портирование Крисом демо Jacob Seidelin’s в Firefox.

Как всегда, я глубоко благодарен NeHe за их уроки OpenGL и за скрипты к этому уроку.



WebGL урок 5. Введение в текстуры.
2011-01-21T05:38:00.000-08:00
Прочитать данный урок в оригинале


<< Урок 4



Урок 6 >>







Добро пожаловать в мой пятый урок из серии WebGL, основанный на уроке 6 из курса OpenGL от NeHe.  Теперь перейдём к добавлению текстуры к 3D объекту, мы обтянем объект изображением, которое загрузим из указанного файла.

Это действительно рабочий способ для добавления деталей вашей сцене без усложения отрисовываемых объектов. 

Представьте себе каменную стену в игре типа лабиринт. Вы, вероятно, не захотите моделировать каждый блок стены как отдельный объект. Поэтому вместо создания образа кладки и покрытия стен с ним всю стену теперь можно создать как один целый объект.

Здесь можно посмотреть, как выглядит этот урок в браузере с поддержкой WebGL:





Нажмите здесь, если ваш браузер поддерживает WebGL и вы сможете увидеть этот урок "вживую"

Здесь можно почитать как получить браузер с поддержкой WebGL

Более подробно о том, как это работает, ниже





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

Тут я буду рассказывать о различиях кода из урока4 и нового кода.Тут я буду рассказывать о различиях кода из предыдущих и нового кода.



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

Есть 2 способа получения исходного кода для этого примера: просмотр кода в браузере, если он поддерживает WebGL и вы просматриваете урок "вживую" в своём браузере, или вы можете скопировать его и другие уроки с GitHub.

В любом случае, после того, как получите код, загрузите его в ваш любимый текстовый редактор и просмотрите.

Ключом к пониманию работы с текстурами является то, что текстуры представляют собой настройки цвета для каждой точки 3D объекта.

Как вы помните из урока 2,цвета указываются при помощи фрагментных шейдеров.

Всё что нам нужно сделать  - это загрузить изображение и передать его фрагментому шейдеру.

Фрагментному шейдеру также необходимо знать, какой бит изображения использовать для того фрагмента, с к отрым он работает, поэтому мы также должны предоставить ему эту информацию.

Двайте начнём с просмотра кода, который загружает текстуру. Мы вызываем его прямо в начале выполнения JavaScript кода нашей страницы, в функции webGLStart внизу страницы (новый код выделен красным цветом):

function webGLStart() {
    var canvas = document.getElementById("lesson05-canvas");
    initGL(canvas);
    initShaders();
    initTexture(); 
 
    gl.clearColor(0.0, 0.0, 0.0, 1.0);
Давайте посмотрим на initTexture — она находится если промотать от начала вниз на треть файла, и этот код весь новый:

var neheTexture;
  function initTexture() {
    neheTexture = gl.createTexture();
    neheTexture.image = new Image();
    neheTexture.image.onload = function() {
      handleLoadedTexture(neheTexture)
    }
 
    neheTexture.image.src = "nehe.gif";
  }
Итак, мы создаём глобальную переменную для хранения текстуры. В реальном примере вы будете иметь множество текстур и не будете использовать глобальные переменные,но мы сейчас нарочно всё упрощаем. Мы используем функцию gl.createTexture для создания ссылки на текстуру и помещения её в глобальную область видимости, затем мы создаём JavaScript объект Image и помещам его в новый аттрибут текстуры, вновь воспользовавшись возможностью JavaScript устанавливать любое свойство любому объекту.

По умолчанию объект текстура не имеет поля изображения image, но для нас это удобно, поэтому мы создали такое свойство.

Очевидно следующим шагом для получение объекта Image является загрузка в него фактического изображения,но перед этим мы присоединим к нему функцию обратного вызова, которая будет вызываться, когда изображение полностью загружено.

Таким образом, нам следует в первую очередь установить эту функцию. Как только это сделано, мы устанавливаем изображению свойство src, теперь всё готово.

Изображение загружается асинхронно, но код, который устанавливает свойство src

изображению немедленно возвращается, а в фоновом потоке происходит загрузка изображения с вебсервера.

Когда изображение загружено, вызывается наша функция обратного вызова, которя вызывает handleLoadedTexture:

function handleLoadedTexture(texture) {
    gl.bindTexture(gl.TEXTURE_2D, texture);
    gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, true);
    gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, gl.RGBA, gl.UNSIGNED_BYTE, texture.image);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
    gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
    gl.bindTexture(gl.TEXTURE_2D, null);
  }
Первое. что нам следует сделать, это сообщить WebGL, что наша текстура является текущей текстурой.

Все функции WebGL по работе с текстурой оперируют с текущей текстурой вместо того, 

чтобы принимать указатель текстуру в качестве параметра.



В bindTexture показано как сделать текстуру текущей, это похоже на использование gl.bindBuffer, которое мы рассматривали ранее.

Далее мы сообщаем WebGL, что все изображения, загруженные нами в текстуры, необходимо отразить по вертикали.

Мы делаем это из-за разницы в координатах. Для наших текстурных координат мы используем координаты,похожие на те, что обычно используются в математике, их увеличение происходит по мере продвижения вверх по вертикальной оси. Эти координаты согласуются с координатами X, Y, Z, которые мы используем для указания позиций вершин. В отличие от многих других компьютерных систем - например формата GIF, который мы используем для изображения текстуры - используют координаты, которые увеличиваются по мере продвижения вниз по вертикальной оси. Горизонтальная ось одна и та же в обеих системах координат. Различие вертикальных осей означает, что GIF изображение, которое мы использем для нашей текстуры,  уже отражено по вертикали и нам необходимо вернуть его обратно в исходное сосстояние.

(Спасибо Ilmari Heikkinen за разъяснение по этому вопроосу в комментариях.) 

Следующим шагом является загрузка нашего только что полученного изображения на графическую карту при помощи texImage2D.

Перечислим параметры в порядке их следования:используемое изображение, уровень детализации(что это мы рассмотрим в одном из следующих уроков), формат, в котором мы хотим, чтобы изображение было сохранено на графической карте(повторяю второй раз по причинам, которые вы узнаете позже),размер каждого “канала” изображения(зависит от типа данных, используемого для хранения красной, зелёной и синей цветовой составляющей),

и, наконец, само изображение.

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

в ней указано каким образом отмасштабировать текстуру.

Вторая является инструкцией как обрезать изображение.

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

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

Как только всё это сделано, мы установим указатель на текущую структуру null.

Это не является строго необходимым, но является хорошей привычкой -  очистка после использования.

Итак, это был весь код, который требуется для загрузки текстуры.

Теперь давайте перейдём к initBuffers. Естественно отсутствует весь код, относящийся к пирамиде из урока4, но более интересным изменением является замена буфера цветов вершин куба новым буфером текстурных координат.

Это выглядит следующим образом:

cubeVertexTextureCoordBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
    var textureCoords = [
      // Front face
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
 
      // Back face
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,
 
      // Top face
      0.0, 1.0,
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
 
      // Bottom face
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,
      1.0, 0.0,
 
      // Right face
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
      0.0, 0.0,
 
      // Left face
      0.0, 0.0,
      1.0, 0.0,
      1.0, 1.0,
      0.0, 1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(textureCoords), gl.STATIC_DRAW);
    cubeVertexTextureCoordBuffer.itemSize = 2;
    cubeVertexTextureCoordBuffer.numItems = 24;
В таком виде код должен показаться вам наглядным, заметьте - всё, что мы сделали - это указали новый аттрибут для каждой вершины в буфере массиве и этот новый аттрибут имеет 2 значения для каждой вершины.

Текстурыне координаты указывают положение x, y для вершины на изображении текстуры. 

Размер текстуры нормирован таким образом, что высота и широта изображения принимаются за единицу, так что получаем (0, 0) в левом нижнем углу, (1, 1) в правом верхнем углу.

Это было единственное изменение в  initBuffers, двигаемся дальше к функции drawScene.

Наиболее интересные изменения в этой функции естественно те, которые показывают использование текстуры.

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

Я не буду описывать их в деталях, тут всё довольно легко разобрать,изменения выделены красным цветом в верхней части функции drawScene:

var xRot = 0;
  var yRot = 0;
  var zRot = 0; 
  function drawScene() {
    gl.viewport(0, 0, gl.viewportWidth, gl.viewportHeight);
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
 
    perspective(45, gl.viewportWidth / gl.viewportHeight, 0.1, 100.0);
    loadIdentity();
 
    mvTranslate([0.0, 0.0, -5.0])
 
    mvRotate(xRot, [1, 0, 0]);
    mvRotate(yRot, [0, 1, 0]);
    mvRotate(zRot, [0, 0, 1]); 
 
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
Есть также соответствующие изменения в функции animate, которая обновленяет xRot , yRot и zRot , их я описывать не буду.



Итак, минуя эту функцию, рассмотрим код по работе с текстурой.  

В функции initBuffers мы создали буфер, содержащий текстурные координаты, здесь нам необходимо связать их с соответсвующим аттрибутом так, чтобы шейдеры смогли их увидеть:

gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexTextureCoordBuffer);
    gl.vertexAttribPointer(shaderProgram.textureCoordAttribute, cubeVertexTextureCoordBuffer.itemSize, gl.FLOAT, false, 0, 0);
…теперь когда WebGL знает, какой бит текстуры использует каждая вершина, нам необходимо указать ему использовать текстуру, которую мы загрузили ранее и затем нарисовать куб:

gl.activeTexture(gl.TEXTURE0);
    gl.bindTexture(gl.TEXTURE_2D, neheTexture);
    gl.uniform1i(shaderProgram.samplerUniform, 0); 
 
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
    setMatrixUniforms();
    gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
То, что происходит здесь имеет некоторую степень сложности. 

WebGL может иметь дело с количеством текстур до 32 в течении любого вызова функции, такой как, например, gl.drawElements, текстуры пронумерованы от TEXTURE0 к TEXTURE31. То, что мы делаем, сказано в первых 2х строках - нулевая текстура - эта та, которая была загружена ранее, в третьей строке мы передаём нулевое значение в шейдерную форму (которую, как и другие формы,используемые нами для матриц, мы извлекаем из шейдерных программ в initShaders).

Она сообщает шейдеру, что мы используем нулевую текстуру.  Давайте посмотрим каким образом она используется позднее.

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

Единственный код, который остался нераобранным  - изменения в шейдерах. Давайте сначала рассмотрим вершинный шейдер:

attribute vec3 aVertexPosition;
  attribute vec2 aTextureCoord; 
 
  uniform mat4 uMVMatrix;
  uniform mat4 uPMatrix;
 
  varying vec2 vTextureCoord; 
 
  void main(void) {
    gl_Position = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
    vTextureCoord = aTextureCoord; 
  }
Это очень похоже на вещи, связанные с цветом, которые мы передавали вершинному шейдеру в уроке2.

Всё, что мы делаем- это определяем текстурные координаты(снова, вместо цвета) в качестве аттрибута для каждой вершины и передаём их в какой-либо переменной.

После того, как это было проделано для каждой вершины, WebGL будет работать с фрагментами(которые, напоминаю, являются просто пикселями), которые находятся между вершинами, вычислив их при помощи линейной интерполяции аналогичному тому, как было проделано с цветами в уроке 2.

Итак, серединный фрагмент между вершинами с текстрными координатами (1, 0) и (0, 0) получит текстурные координаты (0.5, 0), и конечный фрагмент между вершинами (0, 0) and (1, 1) получит текстурные координаты (0.5, 0.5).

Следующая остановка, фрагментный шейдер:

#ifdef GL_ES
  precision highp float;
  #endif
 
  varying vec2 vTextureCoord;
 
  uniform sampler2D uSampler; 
 
  void main(void) {
    gl_FragColor = texture2D(uSampler, vec2(vTextureCoord.s, vTextureCoord.t)); 
  }
Таким образом, мы забрали интерполированные значения текстурных координат, и у нас есть переменная типа sampler, которая является способом представления текстур для шейдера.

В функции drawScene, наша текстура это  gl.TEXTURE0, а форма uSampler установлена в значение ноль, этот образец представляет нашу текстуру. Всё, что делает шейдер, это использование функции texture2D для получения соответсвующего цвета из текстуры при помощи координат.

Для текстурных координат традиционно использются обозначения s и t чаще. чем x и y, и шейдерный язык поддерживает эти обозначения; мы могли бы так же легко использовать vTextureCoord.x и vTextureCoord.y.

Теперь у нас есть цвет фрагмента! Мы видим на экране текстурированный объект. На сегодня всё. Теперь вы имеете представление о том, как добавлять текстуры к 3D объекту при помощи загрузки изображения, указав WebGL использовать его в качестве текстры, передав вашему объекту текстурные координаты и использование координат и текстур  шейдерах.

Если у вас есть вопросы, комментарии или поправки, пожалуйста оставьте комментарий ниже!

Иначе, перейдите к следующему уроку,в котором я покажу, как можно получить простой ввод с клавиатруы в JavaScript, который анимирует вашу 3D сцену и делает её интерактивной для человека, просматривающего страницу.

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



<< Урок 4



Урок 6 >>





Благодарности: Chris Marrin’s WebKit-only spinning box сильно помогло при написании данного материала, так же как и портирование Крисом демо Jacob Seidelin’s в Firefox.

Как всегда, я глубоко благодарен NeHe за их уроки OpenGL и за скрипты к этому уроку.





WebGL Урок 4. Несколько реальнх 3D объектов.
2011-01-21T05:32:00.030-08:00
Прочитать данный урок в оригинале





<< Урок 3

Урок 5 >>





Добро пожаловать в мой четвёртый урок из серии WebGL. На этот раз мы собираемся показать вам несколько уроков OpenGL.

Здесь можно посмотреть, как выглядит этот урок в браузере с поддержкой WebGL:





Нажмите здесь, если ваш браузер поддерживает WebGL и вы сможете увидеть этот урок "вживую"

Здесь можно почитать как получить браузер с поддержкой WebGL

Более подробно о том, как это работает, ниже



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

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

Есть 2 способа получения исходного кода для этого примера: просмотр кода в браузере, если он поддерживает WebGL и вы просматриваете урок "вживую" в своём браузере, или вы можете скопировать его и другие уроки с GitHub.

В любом случае, после того, как получите код, загрузите его в ваш любимый редактор кода и просмотрите.



Разница между кодом этого урока и предыдущего сконцентрирована в функциях animate, initBuffers и drawScene. Если вы промотаете вниз до функции animate, то сперва увидете совсем незначительное изменение : переменные, которые хранит текущее состояние вращения 2х объектов сцены переиенованы; теперь они называются rTri и rSquare.  Мы изменили направление вращения куба( потому что так он смотрится лучше), теперь мы имеем:
rPyramid += (90 * elapsed) / 1000.0;
      rCube -= (75 * elapsed) / 1000.0;
 
С этой функцией всё; давайте переместимся вверх к функции drawScene.  Прямо над определением функции у нас объявлены переменные:
var rPyramid = 0;
  var rCube = 0;
Далее идёт заголовок функции, следующий за нашим кодом настроек и кодом перемещения в позицию, из которой мы будем рисовать пирамиду. После всего этого, мы вращаем её вокруг оси Y как мы уже это делали с треугольником в предыдущем уроке:
mat4.rotate(mvMatrix, degToRad(rPyramid), [0, 1, 0]);
…и затем мы отрисовываем её.  Единственным различием между кодом этого и прошлого уроков является то, что

в предыдущем уроке мы рисовали разноцветный треугольник, а в этом  пирамиду - она имеет больше вершин, и соответственно больше цветов, все они задействованы в initBuffers ( к которой мы сейчас перейдём).  Это означает, что кроме изменений в именах буферов, которые мы используем, код идентичен:
gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, pyramidVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
    gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, pyramidVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
    setMatrixUniforms();
    gl.drawArrays(gl.TRIANGLES, 0, pyramidVertexPositionBuffer.numItems);
Это было просто. Давайте посмотрим на код для куба.  Первый шаг - это вращение куба; на этот раз вместо вращения на оси X, мы будем вращать его вокруг оси, которая повёрнута ( с точки зрения наблюдателя ) вверх, вправо, и к вам:
mat4.rotate(mvMatrix, degToRad(rCube), [1, 1, 1]);
Теперь, рисуем куб. Это немного сложнее.  Есть 3 способа нарисовать куб:
При помощи одной полоски треугольников( triangle strip ).  Если бы весь куб был одного цвета, было бы проще — мы могли бы использовать позиции вершин, которые мы использвоали во время рисования передней грани, потом добавили бы другие 2 точки для добавления другой грани, и ещё 2 другие точки для следующей грани, и т.д.  Это было бы очень эффективно. К несчастью, мы хотим, чтобы  у каждой грани был свой цвет.  Поскольку каждая вершина принадлежит к углу куба, а каждый угол принадлжит 3м граням, нам необходимо указать каждую вершину 3 раза, и сделать это необходимо таким хитрым образом, что я даже не хочу даже пытаться объяснить это
.
Извратимся и нарисуем наш куб при помощи рисования 6 отдельных квадратов, по одному на каждую грань, с отдельными наборами позиций и цветов для каждой вершины.  Первая версия этого урока( примерно 30 октября 2009) именно это и делала, и всё прекрасно работало.  Однако, это не является хорошей практикой; потому что такое решение требует больших накладных расходов : вы всё время просите WebGL нарисовать другой объект в вашей сцене, было бы лучше иметь наименьшее количество обращений к drawArrays.
Последний способ - определить куб как 6 квадратов, каждый из которых состоит из 2х треугольников, однако отправить всё это на отрисовку WebGL  разом.  Этот способ аналогичен способу с полоской тругольников( triangle strip ), но так как мы каждый раз указывали треугольники целиком вместо того, чтобы просто определить каждый труегольник при помощи добавления новой точки к предыдущим, то нам легче определить цвет для каждой стороны.  Также преимуществом является последовательность кода, что позволяет нам ввести новую функцию, drawElements — итак это именно наш метод:-)

Первым делом необходимо связать буферы, содержащие позиции и цвета вершин куба, которые мы создали в initBuffers с соответствующими аттрибутами, точно также как мы сделали это для пирамиды:
gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexPositionAttribute, cubeVertexPositionBuffer.itemSize, gl.FLOAT, false, 0, 0);
 
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
    gl.vertexAttribPointer(shaderProgram.vertexColorAttribute, cubeVertexColorBuffer.itemSize, gl.FLOAT, false, 0, 0);
Следующим шагом является рисование треугольников. Тут есть некоторая проблема. Давайте рассмотрим переднюю грань; для неё существует 4 позиции, и каждая имеет свой цвет. Однако, необходимо чтобы она была отрисована при помощи примитивных треугольников, а так как мы используем примитивные треугольники, для каждого из которых необходимо указать вершины индивидуально, в отличие от полосок треугольников( triangle strips), которые используют общие вершины, нам необходимо указать все 6 вершин.  Но в нашем массиве находятся только 4.  
Мы хотим сделать примерно следующее “ нарисовать треугольник, сделанный на основе первых 3х вершин буфера, затем нарисовать другой на основе первой, третьей и четвёртой.  Таким оброазом, мы получим переднюю грань; рисование остальной части куба аналогично. В точности так мы и делаем. 
Для этого мы используем так называемый буфер элементов и вызываем новую функцию drawElements.  В точности так же как и буфер, который мы только что использовали, буфер элементов заполняется соответсвующими значениями в initBuffers, и содержит список вершин. Отсчёт индексов массивов, которые мы используем для хранения значений цветов и позиций, начинается с нуля.
В порядке использования делаем наш буфер элементов куба текущим (WebGL различает текущий буфер и текущий буфер элментов, поэтому мы должны указать, какой из них мы подсоединяем в gl.bindBuffer), затем идёт код для передачи наших матриц модель-вид и проекции на графическую карту, затем вызываем drawElements для отрисовки треугольников:
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
    setMatrixUniforms();
    gl.drawElements(gl.TRIANGLES, cubeVertexIndexBuffer.numItems, gl.UNSIGNED_SHORT, 0);
С кодом в drawScene покончено.  Остальной код в initBuffers и он достаточно очевиден.  Мы определяем буферы с новыми именами для отражения новой сути хранимых объектов, и добавляем новый для буфера индексов вершин куба:
var pyramidVertexPositionBuffer;
  var pyramidVertexColorBuffer;
  var cubeVertexPositionBuffer;
  var cubeVertexColorBuffer;
  var cubeVertexIndexBuffer;
Мы помещаем значение буфер позиций вершин пирамид для всех граней, с соответсвующим изменением в numItems:
pyramidVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexPositionBuffer);
    var vertices = [
        // Передняя грань
         0.0,  1.0,  0.0,
        -1.0, -1.0,  1.0,
         1.0, -1.0,  1.0,
        // Правая грань
         0.0,  1.0,  0.0,
         1.0, -1.0,  1.0,
         1.0, -1.0, -1.0,
        // Задняя грань
         0.0,  1.0,  0.0,
         1.0, -1.0, -1.0,
        -1.0, -1.0, -1.0,
        // Левая грань
         0.0,  1.0,  0.0,
        -1.0, -1.0, -1.0,
        -1.0, -1.0,  1.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    pyramidVertexPositionBuffer.itemSize = 3;
    pyramidVertexPositionBuffer.numItems = 12;
…также для буфера цветов вершин пирамиды:
pyramidVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, pyramidVertexColorBuffer);
    var colors = [
        // Передняя грань
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        // Правая грань
        1.0, 0.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        // Задняя грань
        1.0, 0.0, 0.0, 1.0,
        0.0, 1.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        // Левая грань
        1.0, 0.0, 0.0, 1.0,
        0.0, 0.0, 1.0, 1.0,
        0.0, 1.0, 0.0, 1.0
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
    pyramidVertexColorBuffer.itemSize = 4;
    pyramidVertexColorBuffer.numItems = 12;
…и для буфера позиций вершин куба:
cubeVertexPositionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexPositionBuffer);
    vertices = [
      // Передняя грань
      -1.0, -1.0,  1.0,
       1.0, -1.0,  1.0,
       1.0,  1.0,  1.0,
      -1.0,  1.0,  1.0,
 
      // Задняя грань
      -1.0, -1.0, -1.0,
      -1.0,  1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0, -1.0, -1.0,
 
      // Верхняя грань
      -1.0,  1.0, -1.0,
      -1.0,  1.0,  1.0,
       1.0,  1.0,  1.0,
       1.0,  1.0, -1.0,
 
      // Нижняя грань
      -1.0, -1.0, -1.0,
       1.0, -1.0, -1.0,
       1.0, -1.0,  1.0,
      -1.0, -1.0,  1.0,
 
      // Правая грань
       1.0, -1.0, -1.0,
       1.0,  1.0, -1.0,
       1.0,  1.0,  1.0,
       1.0, -1.0,  1.0,
 
      // Левая грань
      -1.0, -1.0, -1.0,
      -1.0, -1.0,  1.0,
      -1.0,  1.0,  1.0,
      -1.0,  1.0, -1.0,
    ];
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertices), gl.STATIC_DRAW);
    cubeVertexPositionBuffer.itemSize = 3;
    cubeVertexPositionBuffer.numItems = 24;
Буфер цвета немного более сложный, поэтому мы используем цикл для создания списка цветов вершин. Таким образом, нет необходимости указывать один и тот же цвет 4 раза, по одному для каждой вершины:
cubeVertexColorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, cubeVertexColorBuffer);
    colors = [
      [1.0, 0.0, 0.0, 1.0],     // Front face
      [1.0, 1.0, 0.0, 1.0],     // Back face
      [0.0, 1.0, 0.0, 1.0],     // Top face
      [1.0, 0.5, 0.5, 1.0],     // Bottom face
      [1.0, 0.0, 1.0, 1.0],     // Right face
      [0.0, 0.0, 1.0, 1.0],     // Left face
    ];
    var unpackedColors = [];
    for (var i in colors) {
      var color = colors[i];
      for (var j=0; j < 4; j++) {
        unpackedColors = unpackedColors.concat(color);
      }
    }
    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(unpackedColors), gl.STATIC_DRAW);
    cubeVertexColorBuffer.itemSize = 4;
    cubeVertexColorBuffer.numItems = 24;

Наконец, мы определяем буфер элементов ( отметьте для себя разницу между первым параметром в gl.bindBuffer и gl.bufferData):
cubeVertexIndexBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVertexIndexBuffer);
    var cubeVertexIndices = [
      0, 1, 2,      0, 2, 3,    // Front face
      4, 5, 6,      4, 6, 7,    // Back face
      8, 9, 10,     8, 10, 11,  // Top face
      12, 13, 14,   12, 14, 15, // Bottom face
      16, 17, 18,   16, 18, 19, // Right face
      20, 21, 22,   20, 22, 23  // Left face
    ]
    gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cubeVertexIndices), gl.STATIC_DRAW);
    cubeVertexIndexBuffer.itemSize = 1;
    cubeVertexIndexBuffer.numItems = 36;
Запомните, каждое число в этом буфере является индексом в буфере вершин и цветов вершин.  Итак, инструкция в первой строке для рисования треугольника в drawScene означает, что мы получаем треугольник с вершинами 0, 1, и 2, а затем другой треугольник с вершинами 0, 2 и 3.  Так как оба треуголника одного и того же цвета и они смежные, в результате мы получим квадрат с вершинами 0, 1, 2 и 3.  Повторите всё то же самое для всех граней куба!
Теперь вам известно, как создавать WebGL сцены с использованием 3D объектов, и вы знаете, что при помощи буфера элементов и drawElements можно повторно использовать вершины, которые вы задали в буфере.  Если у вас появились какие-либо вопросы, комментарии или уточнения, пожалуйста, оставьте их ниже. 
В следующий раз мы поговорим о наложении текстуры.  

<< Урок 3
Урок 5 >>
Благодарности: Как всегда я глубоко благодарен NeHe за скрипт для этого урока в Урок по OpenGL.  Chris Marrin's WebKit spinning box вдохновило меня на адаптирование этого урока для введения в массивы элементов.