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