WebGL: программирование трехмерной графики

Коичи Мацуда, Роджер Ли

WebGL:  
программирование 
трехмерной графики

WebGL 
Programming 
Guide:

Interactive 3D Graphics 
Programming with WebGL

Kouichi Matsuda
Rodger Lea

Upper Saddle River, NJ • Boston • Indianapolis • San Francisco
New York • Toronto • Montreal • London • Munich • Paris • Madrid
Cape Town • Sydney • Tokyo • Singapore • Mexico City

Москва, 2023

WebGL:  
программирование 
трехмерной  
графики

Коичи Мацуда (Kouichi Matsuda)
Роджер Ли (Rodger Lea)

2-е издание, электронное

УДК 004.738.5:004.4WebGL
ББК 32.973.202-018.2
М33

М33
Мацуда, Коичи.
WebGL: программирование трехмерной графики / К. Мацуда, Р. Ли ; пер. с 
англ. А. Н. Киселёва. — 2-е изд., эл. — 1 файл pdf : 495 с. — Москва : ДМК Пресс, 
2023. — Систем. требования: Adobe Reader XI либо Adobe Digital Editions 4.5 ; 
экран 10". — Текст : электронный.
ISBN 978-5-89818-551-0
WebGL является новой веб-технологией, позволяющей использовать в браузере 
преимущества аппаратного ускорения трехмерной графики без установки дополнительного 
программного обеспечения. WebGL основана на спецификации OpenGL и привносит 
новые концепции программирования трехмерной графики в веб-разработку.
Снабженная большим количеством примеров, книга показывает, что овладеть технологией 
WebGL совсем несложно, несмотря на то, что она выглядит незнакомой и 
инородной. Каждая глава описывает один из важнейших аспектов программирования 
трехмерной графики и представляет разные варианты их реализации. Отдельные разделы, 
описывающие эксперименты с примерами программ, позволят читателю исследовать 
изучаемые концепции на практике.
Издание предназначено для программистов, желающих научиться использовать в 
своих веб-проектах 3D-графику.

УДК 004.738.5:004.4WebGL 
ББК 32.973.202-018.2

Электронное издание на основе печатного издания: WebGL: программирование трехмерной 
графики / К. Мацуда, Р. Ли ; пер. с англ. А. Н. Киселёва. — Москва : ДМК Пресс, 2015. — 494 с. — 
ISBN 978-5-97060-146-4. — Текст : непосредственный.

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

В соответствии со ст. 1299 и 1301 ГК РФ при устранении ограничений, установленных техническими средствами 
защиты авторских прав, правообладатель вправе требовать от нарушителя возмещения убытков или выплаты компенсации.


ISBN 978-5-89818-551-0
© 2013 Pearson Education, Inc.
©  Оформление, перевод на русский язык, 
и здание, ДМК Пресс, 2015

Положительные отзывы 
к книге «WebGL: руководство 
по программированию»

«WebGL – одна из заключительных особенностей, приближающих веб-
приложения к обычным, настольным приложениям, и книга «WebGL: программирование 
трехмерной графики» рассказывает о создании таких веб-приложений. 
Она охватывает все аспекты, связанные с использованием WebGL – JavaScript, 
OpenGL ES и базовые приемы программирования графики – помогая получить 
полное представление обо всем, что вам может потребоваться на начальном этапе. 
За веб-приложениями – будущее, и эта книга поможет вам попасть туда!»

Дэйв Шрайнер (Dave Shreiner), соавтор «The OpenGL 
Programming Guide, Eighth Edition»1; редактор серии 
«OpenGL Library» (Addison Wesley).

«Стандарт HTML5 превратил Web в высокоэффективную платформу для создания 
весьма привлекательных интерактивных приложений, способных выполняться 
в самых разных системах. WebGL является одним из важнейших элементов 
HTML5, позволяющим веб-программистам использовать всю широту возможностей 
современных графических ускорителей. Поддержка WebGL разрабатывалась 
так, чтобы обеспечить максимальную надежность в любых веб-совместимых системах 
и послужить толчком для появления новых инноваций в разработке трех-
мерного веб-контента, приложений и пользовательских интерфейсов. Эта книга 
поможет веб-разработчикам понять, какие удивительные возможности несет в 
себе новая волна веб-функциональности и использовать их на практике.»

Нейл Треветт (Neil Trevett), вице-президент Mobile 
Content, NVIDIA; президент The Khronos Group

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

1 
На русский язык было переведено только 4-е издание книги: Д. Шрайнер, М. Ву, Дж. Нейдер, Т.  Де-
вис «OpenGL. Руководство по программированию. Библиотека программиста. 4-е изд.», ISBN: 
5-94723-827-6, 2006, Питер. – Прим. перев.

ляется доступным источником знаний даже для начинающих разработчиков, которым 
определенно стоит выбрать ее, прежде чем переходить к чему-то другому.»
Эван Барчард (Evan Burchard), автор «Web Game 
Developer’s Cookbook» (Addison Wesley)

«Оба автора имеют большой опыт использования OpenGL. Они сумели распространить 
его на WebGL, в результате чего получилось отличное руководство, которое 
может пригодиться не только начинающим, но и опытным специалистам.»
Дэниел Хаэн (Daniel Haehn), программист, детская 
больница в г. Бостон

«WebGL: руководство по программированию просто и понятно излагает механику 
создания веб-приложений, воспроизводящих трехмерный графику, без использования 
массивных библиотек или фреймворков. Отличный источник информации 
для разработчиков, ищущих вводные руководства по интеграции концепций 
отображения трехмерный графики с ультрасовременными веб-технологиями.»

Брендон Джонс (Brandon Jones), программист, Google

«Великолепная работа блестящих исследователей. Коичи Мацуда (Kouichi 
Matsuda) уверенно ведет новичков к овладению WebGL, и благодаря его усилиям 
любой сможет начать использовать эту восхитительную веб-технологию, несмотря 
на ее сложность. Он также включил в книгу описание основных понятий трех-
мерный графики, заложив фундамент для дальнейшего изучения этой темы. Эта 
книга станет отличным приобретением для любого веб-дизайнера.»

Крис Маррин (Chris Marrin), редактор спецификации 
WebGL Spec

«WebGL: руководство по программированию дает отличную возможность пройти 
путь от новичка до эксперта WebGL. Несмотря на простоту основных понятий, 
заложенных в WebGL, для работы с этой технологией требуется знание сложного 
математического аппарата трехмерный моделирования. Книга «WebGL: программирование 
трехмерной графики» поможет приобрести эти знания и научит применять 
их на практике. Если вы, в конечном счете, выберете другую библиотеку 
для работы с трехмерной графикой, отличную от WebGL, знания, полученные при 
прочтении этой книги, помогут вам быстрее понять, как она действует, и как использовать 
ее в своих приложениях для решения конкретных задач. И, даже если вы 
желаете создавать обычные приложения, использующие OpenGL и/или DirectX, 
«WebGL: программирование трехмерной графики» послужит вам хорошей первой 
ступенью, потому что большинство книг, посвященных теме программирования 
трехмерный графики, во многом отстали от современного уровня развития трех-
мерный технологий. «WebGL: программирование трехмерной графики» поможет 
вам заложить основы программирования современной трехмерный графики.»

Грегг Таварес (Gregg Tavares), разработчик реализации 
WebGL в Chrome

Мудрость приходит с годами, прошлое не возвращается  
и время как спираль из полудрагоценных камней...

— Коичи Мацуда

Моей супруге, семье, друзьям, несущим радость в мою жизнь.

— Роджер Ли

оглавление

Положительные отзывы к книге «WebGL: программирование 
трехмерной графики» ................................................................5

Предисловие ......................................................................... 17
Кому адресована эта книга ................................................................................ 17
О чем рассказывается в этой книге ................................................................... 18
Структура книги ................................................................................................ 18
Браузеры с поддержкой WebGL ......................................................................... 22
Примеры программ и сопутствующие ссылки ................................................... 23
Типографские соглашения ................................................................................ 23
Благодарности .................................................................................................. 23
Об авторах ........................................................................................................ 24

Глава 1.  
Обзор WebGL ......................................................................... 26
Достоинства WebGL .......................................................................................... 27
Вы можете заниматься разработкой приложений с трехмерной графикой, 
используя только текстовый редактор  ......................................................... 28
Публикация приложений с трехмерной графикой не вызывает сложностей . 29
Вы можете использовать всю широту возможностей браузеров .................. 29
Изучение и использование WebGL не вызывает никаких сложностей............ 29
История происхождения WebGL ........................................................................ 30
Структура приложений на основе WebGL ........................................................... 31
В заключение .................................................................................................... 32

Глава 2.  
Первые шаги в WebGL ............................................................. 33
Что такое canvas? .............................................................................................. 33
Использование тега <canvas> ...................................................................... 34
DrawRectangle.js ........................................................................................... 36
Самая короткая WebGL-программа: очистка области рисования ....................... 40
Файл HTML (HelloCanvas.html) ...................................................................... 40
Программа на JavaScript (HelloCanvas.js) ..................................................... 41
Эксперименты с примером программы ........................................................ 46
Рисование точки (версия 1) ............................................................................... 46
HelloPoint1.html ............................................................................................ 48
HelloPoint1.js ................................................................................................ 48
Что такое шейдер? ....................................................................................... 49
Структура WebGL-программы, использующей шейдеры .............................. 51

Оглавление

Инициализация шейдеров ........................................................................... 53
Вершинный шейдер ..................................................................................... 55
Фрагментный шейдер .................................................................................. 58
Операция рисования .................................................................................... 58
Система координат WebGL ........................................................................... 60
Эксперименты с примером программы ........................................................ 61
Рисование точки (версия 2) ............................................................................... 62
Использование переменных-атрибутов ....................................................... 63
Пример программы (HelloPoint2.js) .............................................................. 64
Получение ссылки на переменную-атрибут .................................................. 65
Присваивание значения переменной-атрибуту ............................................ 66
Семейство методов gl.vertexAttrib3f() ........................................................... 68
Эксперименты с примером программы ........................................................ 70
Рисование точки по щелчку мышью ................................................................... 71
Пример программы (ClickedPoints.js) ........................................................... 72
Регистрация обработчиков событий............................................................. 73
Обработка события щелчка мышью .............................................................. 75
Эксперименты с примером программы ........................................................ 78
Изменение цвета точки ..................................................................................... 79
Пример программы (ColoredPoints.js) .......................................................... 80
Uniform-переменные .................................................................................... 82
Получение ссылки на uniform-переменную ................................................... 83
Присваивание значения uniform-переменной............................................... 84
Семейство методов gl.uniform4f() ................................................................ 86
В заключение .................................................................................................... 86

Глава 3.  
Рисование и преобразование треугольников ............................... 88
Рисование множества точек .............................................................................. 88
Пример программы (MultiPoint.js) ................................................................ 90
Использование буферных объектов ............................................................. 93
Создание буферного объекта (gl.createBuffer()) ........................................... 94
Указание типа буферного объекта (gl.bindBuffer()) ....................................... 95
Запись данных в буферный объект (gl.bufferData()) ...................................... 96
Типизированные массивы ............................................................................ 98
Сохранение ссылки на буферный объект в переменной-атрибуте  
(gl.vertexAttribPointer()) ................................................................................. 99
Разрешение присваивания переменной-атрибуту  
(gl.enableVertexAttribArray()) ....................................................................... 101
Второй и третий параметры метода gl.drawArrays() .................................... 102
Эксперименты с примером программы ...................................................... 103
Привет, треугольник ........................................................................................ 104
Пример программы (HelloTriangle.js) .......................................................... 105
Простые фигуры......................................................................................... 106
Эксперименты с примером программы ...................................................... 108
Привет, прямоугольник (HelloQuad) ............................................................ 109
Эксперименты с примером программы ...................................................... 110
Перемещение, вращение и масштабирование ................................................ 111
Перемещение ............................................................................................ 112

Оглавление

Пример программы (TranslatedTriangle.js) .................................................. 113
Вращение .................................................................................................. 115
Пример программы (RotatedTriangle.js) ...................................................... 117
Матрица преобразования: вращение ......................................................... 121
Матрица преобразования: перемещение ................................................... 123
И снова матрица вращения ........................................................................ 124
Пример программы (RotatedTriangle_Matrix.js) ........................................... 125
Применение того же подхода для перемещения ........................................ 128
Матрица преобразования: масштабирование ............................................ 129
В заключение .................................................................................................. 130

Глава 4.  
Дополнительные преобразования и простая анимация ............... 131
Перемещение с последующим вращением ..................................................... 131
Библиотека матричных преобразований: cuon-matrix.js ............................. 132
Пример программы (RotatedTriangle_Matrix4.js) ......................................... 133
Объединение нескольких преобразований ................................................. 135
Пример программы (RotatedTranslatedTriangle.js) ....................................... 137
Эксперименты с примером программы ...................................................... 139
Анимация ........................................................................................................ 140
Основы анимации ...................................................................................... 141
Пример программы (RotatingTriangle.js) ..................................................... 141
Повторяющиеся вызовы функции рисования (tick()) ................................... 144
Рисование треугольника после поворота на указанный угол (draw()) .......... 145
Запрос на повторный вызов (requestAnimationFrame())............................... 146
Изменение угла поворота (animate()) ......................................................... 148
Эксперименты с примером программы ...................................................... 150
В заключение .................................................................................................. 151

Глава 5.  
Цвет и текстура .....................................................................152
Передача другой информации в вершинные шейдеры .................................... 152
Пример программы (MultiAttributeSize.js) ................................................... 153
Создание нескольких буферных объектов .................................................. 155
Параметры stride и offset метода gl.vertexAttribPointer() .............................. 156
Пример программы (MultiAttributeSize_Interleaved.js) ................................. 157
Изменение цвета (varying-переменные) ..................................................... 160
Пример программы (MultiAttributeColor.js) .................................................. 161
Эксперименты с примером программы  ..................................................... 164
Цветной треугольник (ColoredTriangle.js) ......................................................... 165
Сборка и растеризация геометрических фигур .......................................... 165
Вызовы фрагментного шейдера ................................................................. 169
Эксперименты с примером программы  ..................................................... 170
Принцип действия varying-переменных и процесс интерполяции ............... 171
Наложение изображения на прямоугольник .................................................... 174
Координаты текстуры  ................................................................................ 176
Пример программы (TexturedQuad.js) ......................................................... 176
Использование координат текстуры (initVertexBuffers()) ............................. 179
Подготовка и загрузка изображений (initTextures()) .................................... 179

Оглавление

Подготовка загруженной текстуры к использованию в WebGL  
(loadTexture()) ............................................................................................. 183
Поворот оси Y изображения  ....................................................................... 183
Выбор текстурного слота (gl.activeTexture()) ............................................... 184
Указание типа объекта текстуры (gl.bindTexture()) ...................................... 185
Настройка параметров объекта текстуры (gl.texParameteri()) ..................... 187
Присваивание изображения объекту текстуры (gl.texImage2D()) ................ 190
Передача текстурного слота фрагментному шейдеру (gl.uniform1i()) ......... 192
Передача координат текстуры из вершинного шейдера  
во фрагментный шейдер ............................................................................ 193
Извлечение цвета текселя во фрагментном шейдере (texture2D()) ............. 193
Эксперименты с примером программы  ..................................................... 195
Наложение нескольких текстур на фигуру ....................................................... 196
Пример программы (MultiTexture.js) ........................................................... 197
В заключение .................................................................................................. 201

Глава 6.  
Язык шейдеров OpenGL ES (GLSL ES) ........................................203
Краткое повторение основ шейдеров .............................................................. 203
Обзор GLSL ES ................................................................................................ 204
Привет, шейдер! .............................................................................................. 205
Основы ...................................................................................................... 205
Порядок выполнения .................................................................................. 205
Комментарии ............................................................................................. 205
Данные (числовые и логические значения) ...................................................... 206
Переменные .................................................................................................... 206
GLSL ES – типизированный язык ..................................................................... 207
Простые типы .................................................................................................. 207
Присваивание и преобразования типов ..................................................... 208
Операции ................................................................................................... 209
Векторы и матрицы ......................................................................................... 210
Присваивание и конструирование .............................................................. 211
Доступ к компонентам ................................................................................ 213
Операции ................................................................................................... 216
Структуры ....................................................................................................... 218
Присваивание и конструирование .............................................................. 219
Доступ к членам ......................................................................................... 219
Операции ................................................................................................... 219
Массивы ......................................................................................................... 220
Семплеры ....................................................................................................... 221
Приоритеты операторов .................................................................................. 221
Условные операторы и циклы  ......................................................................... 222
Инструкции if и if-else ................................................................................. 222
Инструкция for ........................................................................................... 223
Инструкции continue, break, discard ............................................................ 223
Функции .......................................................................................................... 224
Объявления прототипов ............................................................................. 225
Квалификаторы параметров ...................................................................... 226
Встроенные функции ................................................................................. 227

Оглавление

Глобальные и локальные переменные ............................................................. 227
Квалификаторы класса хранения .................................................................... 228
Квалификатор const ................................................................................... 228
uniform-переменные .................................................................................. 230
varying-переменные ................................................................................... 230
Квалификаторы точности ........................................................................... 230
Директивы препроцессора .............................................................................. 233
В заключение .................................................................................................. 235

Глава 7.  
Вперед, в трехмерный мир ......................................................236
Что хорошо для треугольников, хорошо и для кубов ........................................ 236
Определение направления взгляда ................................................................. 237
Точка наблюдения, точка направления взгляда и направление вверх .......... 238
Пример программы (LookAtTriangles.js) ...................................................... 240
Сравнение LookAtTriangles.js с RotatedTriangle_Matrix4.js ........................... 243
Взгляд на повернутый треугольник с указанной позиции ............................ 245
Пример программы (LookAtRotatedTriangles.js) .......................................... 246
Эксперименты с примером программы ...................................................... 247
Изменение точки наблюдения с клавиатуры ............................................... 249
Пример программы (LookAtTrianglesWithKeys.js) ........................................ 249
Недостающие части ................................................................................... 252
Определение видимого объема в форме прямоугольного параллелепипеда ....252
Определение видимого объема ................................................................. 253
Определение границ видимого объема в форме параллелепипеда ............ 254
Пример программы (OrthoView.html) .......................................................... 256
Пример программы (OrthoView.js) .............................................................. 257
Изменение содержимого HTML-элемента из JavaScript ............................. 258
Вершинный шейдер ................................................................................... 259
Изменение near или far .............................................................................. 260
Восстановление отсеченных частей треугольников  
(LookAtTrianglesWithKeys_ViewVolume.js) .................................................... 262
Эксперименты с примером программы ...................................................... 264
Определение видимого объема в форме четырехгранной пирамиды .............. 265
Определение границ видимого объема в форме четырехгранной  
пирамиды .................................................................................................. 267
Пример программы (PerspectiveView.js) ..................................................... 269
Назначение матрицы проекции .................................................................. 271
Использование всех матриц (модели, вида и проекции) ............................. 272
Пример программы (PerspectiveView_mvp.js) ............................................. 274
Эксперименты с примером программы  ..................................................... 276
Правильная обработка объектов переднего и заднего плана ........................... 277
Удаление скрытых поверхностей ................................................................ 280
Пример программы (DepthBuffer.js) ............................................................ 282
Z-конфликт................................................................................................. 283
Привет, куб ...................................................................................................... 285
Рисование объектов с использованием индексов и координат вершин ...... 287
Пример программы (HelloCube.js) .............................................................. 288

Оглавление

Запись координат вершин, цветов и индексов в буферный объект ............. 291
Добавление цвета для каждой грани куба .................................................. 293
Пример программы (ColoredCube.js) .......................................................... 295
Эксперименты с примером программы ...................................................... 296
В заключение .................................................................................................. 297

Глава 8.  
Освещение объектов ..............................................................299
Освещение трехмерных объектов ................................................................... 299
Типы источников света ............................................................................... 300
Типы отраженного света ............................................................................. 302
Затенение при направленном освещении  
в модели диффузного отражения ............................................................... 304
Использование направления света и ориентации поверхности  
в модели диффузного отражения ............................................................... 305
Ориентация поверхности: что такое нормаль? ........................................... 307
Пример программы (LightedCube.js) .......................................................... 309
Добавление затенения, обусловленного фоновым освещением ................ 315
Пример программы (LightedCube_ambient.js) ............................................. 316
Освещенность перемещаемого и вращаемого объекта ................................... 317
Волшебство матриц: транспонированная обратная матрица ...................... 319
Пример программы (LightedTranslatedRotatedCube.js) ............................... 320
Освещение точечным источником света ......................................................... 322
Пример программы (PointLightedCube.js) ................................................... 323
Более реалистичное затенение: вычисление цвета для каждого  
фрагмента ................................................................................................. 326
Пример программы (PointLightedCube_perFragment.js) .............................. 327
В заключение .................................................................................................. 328

Глава 9.  
Иерархические объекты .........................................................329
Рисование составных объектов и управление ими........................................... 329
Иерархическая структура ........................................................................... 331
Модель с единственным сочленением ....................................................... 332
Пример программы (JointModel.js) ............................................................. 333
Рисование иерархической структуры (draw()) ............................................. 337
Модель со множеством сочленений ........................................................... 339
Пример программы (MultiJointModel.js) ...................................................... 340
Рисование сегментов (drawBox()) ............................................................... 343
Рисование сегментов (drawSegment()) ....................................................... 345
Шейдер и объект программы: роль initShaders() .............................................. 349
Создание объектов шейдеров (gl.createShader()) ....................................... 350
Сохранение исходного кода шейдеров в объектах шейдеров 
(g.shaderSource()) ...................................................................................... 351
Компиляция объектов шейдеров (gl.compileShader()) ................................ 351
Создание объекта программы (gl.createProgram()) ..................................... 353
Подключение объектов шейдеров к объекту программы  
(gl.attachShader()) ...................................................................................... 354
Компоновка объекта программы (gl.linkProgram()) ..................................... 355

Оглавление

Сообщение системе WebGL о готовности объекта программы  
(gl.useProgram()) ........................................................................................ 356
Реализация initShaders() ............................................................................ 357
В заключение .................................................................................................. 359

Глава 10.  
Продвинутые приемы .............................................................360
Вращение объекта мышью .............................................................................. 360
Как реализовать вращение объекта ........................................................... 361
Пример программы (RotateObject.js) .......................................................... 361
Выбор объекта ................................................................................................ 363
Как реализовать выбор объекта ................................................................. 364
Пример программы (PickObject.js) ............................................................. 365
Выбор грани объекта ................................................................................. 368
Пример программы (PickFace.js) ................................................................ 368
Эффект индикации на лобовом стекле (ИЛС) .................................................. 371
Как реализовать ИЛС ................................................................................. 371
Пример программы (HUD.html) .................................................................. 372
Пример программы (HUD.js) ...................................................................... 373
Отображение трехмерного объекта в веб-странице (3DoverWeb) ............... 375
Туман (атмосферный эффект) ......................................................................... 376
Реализация эффекта тумана ...................................................................... 376
Пример программы (Fog.js) ........................................................................ 377
Использование значения w (Fog_w.js) ......................................................... 379
Создание круглой точки .................................................................................. 380
Как нарисовать круглую точку ..................................................................... 380
Пример программы (RoundedPoints.js) ....................................................... 382
Альфа-смешивание ......................................................................................... 383
Как реализовать альфа-смешивание .......................................................... 383
Пример программы (LookAtBlendedTriangles.js) ......................................... 384
Как должна действовать функция смешивания ........................................... 385
Альфа-смешивание для трехмерных объектов (BlendedCube.js) ................ 386
Рисование при наличии прозрачных и непрозрачных объектов .................. 388
Переключение шейдеров ................................................................................ 389
Как реализовать переключение шейдеров ................................................. 390
Пример программы (ProgramObject.js) ....................................................... 390
Использование нарисованного изображения в качестве текстуры .................. 394
Объект буфера кадра и объект буфера отображения .................................. 395
Как реализовать использование нарисованного объекта  
в качестве текстуры .................................................................................... 397
Пример программы (FramebufferObjectj.js) ................................................. 398
Создание объекта буфера кадра (gl.createFramebuffer())............................ 399
Создание объекта текстуры, настройка его размеров и параметров .......... 400
Создание объекта буфера отображения (gl.createRenderbuffer()) ............... 401
Связывание объекта буфера отображения с типом и настройка  
его размера (gl.bindRenderbuffer(), gl.renderbufferStorage()) ...................... 401
Подключение объекта текстуры, как ссылки на буфер цвета  
(gl.bindFramebuffer(), gl.framebufferTexture2D()) ......................................... 403

Оглавление

Подключение объекта буфера отображения к объекту буфера кадра  
(gl.framebufferRenderbuffer()) ..................................................................... 404
Проверка корректности настройки объекта буфера кадра  
(gl.checkFramebufferStatus()) ...................................................................... 405
Рисование с использованием объекта буфера кадра ................................. 406
Отображение теней ......................................................................................... 407
Как реализуются тени ................................................................................ 408
Пример программы (Shadow.js) .................................................................. 409
Увеличение точности.................................................................................. 414
Пример программы (Shadow_highp.js)........................................................ 415
Загрузка и отображение трехмерных моделей ................................................ 417
Формат OBJ ............................................................................................... 419
Формат файла MTL .................................................................................... 420
Пример программы (OBJViewer.js) .............................................................. 421
Объект, определяемый пользователем ...................................................... 424
Пример программы (реализация анализа содержимого файла) ................. 425
Обработка ситуации потери контекста ............................................................ 432
Как реализовать обслуживание ситуации потери контекста ....................... 433
Пример программы  
(RotatingTriangle_contextLost.js) .................................................................. 434
В заключение .................................................................................................. 436

Приложение A.  
В WebGL нет необходимости использовать рабочий и фоновый 
буферы ................................................................................438

Приложение B.  
Встроенные функции в языке GLSL ES 1.0 ..................................441
Функции для работы с угловыми величинами и тригонометрические  
функции .......................................................................................................... 441
Экспоненциальные функции............................................................................ 442
Общие функции ............................................................................................... 443
Геометрические функции ................................................................................ 445
Матричные функции ........................................................................................ 446
Векторные функции ......................................................................................... 447
Функции для работы с текстурами ................................................................... 448

Приложение C.  
Матрицы проекций ................................................................449
Матрица ортогональной проекции  .................................................................. 449
Матрица перспективной проекции  ................................................................. 449

Приложение D.  
WebGL/OpenGL: лево- или правосторонняя система координат? ...450
Пример программы CoordinateSystem.js ......................................................... 451
Удаление скрытых поверхностей и усеченная система координат ................... 453
Усеченная система координат и видимый объем ............................................. 454
Теперь все правильно? .................................................................................... 456
В заключение .................................................................................................. 459

Оглавление

Приложение E.  
Транспонированная обратная матрица ......................................460

Приложение F.  
Загрузка шейдеров из файлов .................................................464

Приложение G.  
Мировая и локальная системы координат ..................................466
Локальная система координат ......................................................................... 466
Мировая система координат ........................................................................... 467
Преобразования и системы координат ............................................................ 469

Приложение H.  
Настройка поддержки WebGL в веб-браузере .............................470

Словарь терминов .................................................................472

Список литературы ................................................................477

Предметный указатель ...........................................................478

Предисловие

WebGL – это технология рисования, отображения и интерактивного взаимодействия 
с трехмерной компьютерной графикой в веб-браузерах. Традиционно поддержка 
трехмерной графики ограничивалась высокопроизводительными компьютерами 
или специализированными игровыми консолями, а ее программирование 
требовало применения сложных алгоритмов. Однако, благодаря росту производительности 
персональных компьютеров и расширению возможностей браузеров 
стало возможным создание и отображение трехмерной графики с применением 
веб-технологий. Эта книга представляет собой исчерпывающий обзор возможностей 
WebGL и постепенно, шаг за шагом знакомит читателя с основами создания 
приложений WebGL. В отличие от других технологий для работы с трехмерный графикой, 
таких как OpenGL и Direct3D, WebGL предназначена для использования в 
веб-страницах и не требует установки специализированных расширений или библиотек. 
Благодаря этому можно сразу опробовать примеры программ, имея лишь 
стандартное окружение. А так как все основано на веб-технологиях, вновь созданные 
программы легко можно публиковать в Сети. Одно из преимуществ WebGL 
заключается в том, что приложения конструируются как веб-страницы, то есть одна 
и та же программа успешно будет выполняться на самых разных устройствах, таких 
как смартфоны, планшетные компьютеры и игровые консоли. Это означает, что 
WebGL будет оказывать все более усиливающееся влияние на сообщество разработчиков 
и станет одним из основных инструментов программирования графики.

Кому адресована эта книга

Мы писали эту книгу для специалистов двух основных категорий: веб-разработчиков, 
ищущих возможность добавления трехмерной графики в свои веб-страницы 
и приложения, и программистов, занимающихся проблемами реализации трехмер-
ной графики, желающих понять, как применить свои знания в веб-окружении.
Для специалистов из первой категории – веб-разработчиков, хорошо знакомых 
со стандартными веб-технологиями, такими как HTML и JavaScript, и стремящихся 
внедрить трехмерную графику в свои веб-страницы или веб-приложения, – WebGL 
является простым и мощным решением. Эту технологию с успехом можно применять 
для добавления трехмерной графики в веб-страницы, с целью повысить качество 
пользовательского интерфейса веб-приложений, и даже для разработки сложнейших 
графических и игровых приложений, выполняющихся в веб-браузерах.

Предисловие

Специалистам из второй категории – программистам, имеющим опыт использования 
основных прикладных программных интерфейсов (API) создания трех-
мерной графики, таких как Direct3D или OpenGL, и интересующимся возможностью 
применения своих знаний в веб-окружении, – будет любопытно поближе 
познакомиться с возможностью создания сложных приложений для работы с 
трехмерными изображениями, выполняющимися в современных веб-браузерах.
Однако, мы постарались сделать книгу доступной для широкого круга читателей 
и использовали пошаговый подход к знакомству с особенностями WebGL, не 
предполагая наличия у читателей опыта программирования двух- или трехмерной 
графики. Мы полагаем, что она будет интересна также:
• обычным программистам, кому будет любопытно узнать, как идет развитие 
веб-технологий в направлении поддержки графических возможностей;
• студентам, изучающим приемы программирования двух- и трехмерной 
графики, потому что WebGL позволяет легко экспериментировать с графикой 
в веб-браузере и не требует установки и настройки полноценной среды 
программирования;
• веб-разработчикам, исследующим ультрасовременные возможности, поддерживаемые 
мобильными устройствами с новейшими версиями мобильных 
веб-браузеров.

О чем рассказывается в этой книге

Эта книга охватывает WebGL 1.0 API, наряду с соответствующими функциями 
JavaScript. Здесь вы узнаете, как связаны между собой HTML, JavaScript и WebGL, 
как устанавливать и запускать приложения WebGL и как программировать сложные 
трехмерные «шейдеры» на JavaScript. Книга подробно рассказывает, как описывать 
вершинные и фрагментные шейдеры, как реализовать разные усовершенствованные 
приемы отображения, такие как попиксельное освещение или затенение, а также об 
основных приемах взаимодействий, такими как выделение трехмерных объектов. 
В каждой главе создается несколько действующих приложений, на примере которых 
демонстрируются ключевые особенности WebGL. Закончив читать эту книгу, 
вы будете готовы писать приложения с применением WebGL, использующие всю 
мощь веб-браузеров и аппаратной поддержки графики.

Структура книги

Эта книга организована в виде последовательного описания WebGL API и связанных 
с ним функций, чтобы вы могли выстраивать свое здание знаний WebGL 
постепенно.

Глава 1 – Обзор WebGL
В этой главе дается короткое представление WebGL, отмечаются некоторые 
ключевые особенности и преимущества, а также дается история происхождения. 

Завершается глава разъяснением взаимоотношений между WebGL, HTML5 и 
JavaScript, и как использовать веб-браузеры для исследования WebGL.

Глава 2 – Первые шаги в WebGL
В этой главе описывается элемент <canvas> и основные возможности WebGL 
на примере нескольких простых программ. Все программы написаны на JavaScript 
и используют WebGL для отображения и взаимодействий с простыми геометрическими 
фигурами на веб-странице. Примеры программ подчеркивают следующие 
важные моменты: (1) как WebGL использует элемент <canvas> и как рисовать 
на его поверхности; (2) как посредством JavaScript осуществляется связь между 
HTML и WebGL; (3) работа с простыми функциями рисования WebGL; и (4) роль 
шейдеров в WebGL.

Глава 3 – Рисование и преобразование треугольников
Эта глава закладывает фундамент для дальнейших исследований особенностей 
рисования более сложных фигур и манипулирования этими фигурами в трехмер-
ном пространстве. В этой главе рассматриваются: (1) критически важная роль 
треугольников в трехмерной графике и поддержка рисования треугольников в 
WebGL; (2) как с помощью множества треугольников рисуются другие простые 
фигуры; (3) простые преобразования, такие как перемещение, вращение и масштабирование 
с применением простых уравнений; и (4) как матричные операции 
упрощают преобразования.

Глава 4 – Дополнительные преобразования и простая 
анимация
В этой главе вы продолжите исследование преобразований и начнете объединять 
преобразования в анимации. Здесь вы: (1) познакомитесь с библиотекой матричных 
преобразований, скрывающей математические тонкости операций с матрицами; (2) 
научитесь пользоваться библиотекой, позволяющей просто и быстро комбинировать 
преобразования; и (3) исследуете анимационные эффекты и библиотеку, помогающую 
организовать анимацию с участием простых фигур. Приемы, представленные в 
этой главе, образуют основу для конструирования гораздо более сложных программ 
WebGL и будут использоваться в примерах программ в последующих главах.

Глава 5 – Цвет и текстура
Опираясь на фундамент, заложенный в предыдущих главах, вы более детально 
познакомитесь с WebGL, исследовав в этой главе следующие три темы: (1) как, 
помимо координат вершин, передать в вершинный шейдер дополнительную информацию, 
например, цвет; (2) преобразование фигуры во фрагмент, то есть процедура 
перехода от вершинного шейдера к фрагментному шейдеру, известная как 
процесс растеризации; и (3) как «натягивать» изображения (или текстуры) на поверхности 
фигур или объектов. Эта глава является завершающей в исследовании 
ключевых особенностей WebGL.

Структура книги