WebGL Программирование трехмерной графики — WebGL является новой веб-технологией, позволяющей использовать в браузере преимущества аппаратного ускорения трехмерной графики без установки дополнительного программного обеспечения. WebGL основана на спецификации OpenGL и привносит новые концепции программирования трехмерной графики в веб-разработку.
Положительные отзывы к книге «WebGL: программирование трехмерной графики» Предисловие Кому адресована эта книга О чем рассказывается в этой книге Структура книги Браузеры с поддержкой WebGL Примеры программ и сопутствующие ссылки Типографские соглашения Благодарности Об авторах Глава 1. Обзор WebGL Достоинства WebGL Вы можете заниматься разработкой приложений с трехмерной графикой используя только текстовый редактор Публикация приложений с трехмерной графикой не вызывает сложностей Вы можете использовать всю широту возможностей браузеров Изучение и использование WebGL не вызывает никаких сложностей История происхождения WebGL Структура приложений на основе WebGL В заключение Глава 2. Первые шаги в WebGL Что такое canvas? Использование тега <canvas> DrawRectangle.js Самая короткая WebGL-программа: очистка области рисования Файл HTML (HelloCanvas. html) Программа на JavaScript (HelloCanvas.js) Эксперименты с примером программы Рисование точки (версия 1) HelloPoint1. html HelloPoint1.js Что такое шейдер? Структура WebGL-программы, использующей шейдеры Инициализация шейдеров Вершинный шейдер Фрагментный шейдер Операция рисования Система координат WebGL Эксперименты с примером программы Рисование точки (версия 2) Использование переменных-атрибутов Пример программы (HelloPoint2.js) Получение ссылки на переменную-атрибут Присваивание значения переменной-атрибуту Семейство методов gl.vertexAttrib3f() Эксперименты с примером программы Рисование точки по щелчку мышью Пример программы (ClickedPoints.js) Регистрация обработчиков событий Обработка события щелчка мышью Эксперименты с примером программы Изменение цвета точки Пример программы (ColoredPoints.js) Uniform-переменные Получение ссылки на uniform-переменную Присваивание значения uniform-переменной Семейство методов gl.uniform4f() В заключение Глава 3. Рисование и преобразование треугольников Рисование множества точек Пример программы (MultiPoint.js) Использование буферных объектов Создание буферного объекта (gl.createBuffer()) Указание типа буферного объекта (gl.bindBuffer()) Запись данных в буферный объект (gl.bufferData()) Типизированные массивы Сохранение ссылки на буферный объект в переменной-атрибуте (gl.vertexAttribPointer()) Разрешение присваивания переменной-атрибуту (gl.enableVertexAttribArray()) Второй и третий параметры метода gl.drawArrays() Эксперименты с примером программы Привет, треугольник Пример программы (HelloTriangle.js) Простые фигуры Эксперименты с примером программы Привет, прямоугольник (HelloQuad) Эксперименты с примером программы Перемещение, вращение и масштабирование Перемещение Пример программы (TranslatedTriangle.js) Вращение Пример программы (RotatedTriangle.js) Матрица преобразования: вращение Матрица преобразования: перемещение И снова матрица вращения Пример программы (RotatedTriangle_Matrix.js) Применение того же подхода для перемещения Матрица преобразования: масштабирование В заключение Глава 4. Дополнительные преобразования и простая анимация Перемещение с последующим вращением Библиотека матричных преобразований: cuon-matrix.js Пример программы (RotatedTriangle_Matrix4.js) Объединение нескольких преобразований Пример программы (RotatedTranslatedTriangle.js) Эксперименты с примером программы Анимация Основы анимации Пример программы (RotatingTriangle.js) Повторяющиеся вызовы функции рисования (tick()) Рисование треугольника после поворота на указанный угол (draw()) Запрос на повторный вызов (requestAnimationFrame()) Изменение угла поворота (animate()) Эксперименты с примером программы В заключение Глава 5. Цвет и текстура Передача другой информации в вершинные шейдеры Пример программы (MultiAttributeSize.js) Создание нескольких буферных объектов Параметры stride и offset метода gl.vertexAttribPointer() Пример программы (MultiAttributeSize_Interleaved.js) Изменение цвета (varying-переменные) Пример программы (MultiAttributeColor.js) Эксперименты с примером программы Цветной треугольник (ColoredTriangle.js) Сборка и растеризация геометрических фигур Вызовы фрагментного шейдера Эксперименты с примером программы Принцип действия varying-переменных и процесс интерполяции Наложение изображения на прямоугольник Координаты текстуры Пример программы (TexturedQuad.js) Использование координат текстуры (initVertexBuffers()) Подготовка и загрузка изображений (initTextures()) Подготовка загруженной текстуры к использованию в WebGL (loadTexture()) Поворот оси Y изображения Выбор текстурного слота (gl.activeTexture()) Указание типа объекта текстуры (gl.bindTexture()) Настройка параметров объекта текстуры (gl.texParameteri()) Присваивание изображения объекту текстуры (gl.texImage2D()) Передача текстурного слота фрагментному шейдеру (gl.uniform1i()) Передача координат текстуры из вершинного шейдера во фрагментный шейдер Извлечение цвета текселя во фрагментном шейдере (texture2D()) Эксперименты с примером программы Наложение нескольких текстур на фигуру Пример программы (MultiTexture.js) В заключение Глава 6. Язык шейдеров OpenGL ES (GLSL ES) Краткое повторение основ шейдеров Обзор GLSL ES Привет, шейдер! Основы Порядок выполнения Комментарии Данные (числовые и логические значения) Переменные GLSL ES - типизированный язык Простые типы Присваивание и преобразования типов Операции Векторы и матрицы Присваивание и конструирование Доступ к компонентам Операции Структуры Присваивание и конструирование Доступ к членам Операции Массивы Семплеры Приоритеты операторов Условные операторы и циклы Инструкции if и if-else Инструкция for Инструкции continue, break, discard Функции Объявления прототипов Квалификаторы параметров Встроенные функции Глобальные и локальные переменные Квалификаторы класса хранения Квалификатор const uniform-переменные varying-переменные Квалификаторы точности Директивы препроцессора В заключение Глава 7. Вперед, в трехмерный мир Что хорошо для треугольников, хорошо и для кубов Определение направления взгляда Точка наблюдения, точка направления взгляда и направление вверх Пример программы (LookAtTriangles.js) Сравнение LookAtTriangles.js с RotatedTriangle_Matrix4.js Взгляд на повернутый треугольник с указанной позиции Пример программы (LookAtRotatedTriangles.js) Эксперименты с примером программы Изменение точки наблюдения с клавиатуры Пример программы (LookAtTrianglesWithKeys.js) Недостающие части Определение видимого объема в форме прямоугольного параллелепипеда Определение видимого объема Определение границ видимого объема в форме параллелепипеда Пример программы (OrthoView. html) Пример программы (OrthoView.js) Изменение содержимого HTML-элемента из JavaScript Вершинный шейдер Изменение near или far Восстановление отсеченных частей треугольников (LookAtTrianglesWithKeys_ViewVolume.js) Эксперименты с примером программы Определение видимого объема в форме четырехгранной пирамиды Определение границ видимого объема в форме четырехгранной пирамиды Пример программы (PerspectiveView.js) Назначение матрицы проекции Использование всех матриц (модели, вида и проекции) Пример программы (PerspectiveView_mvp.js) Эксперименты с примером программы Правильная обработка объектов переднего и заднего плана Удаление скрытых поверхностей Пример программы (DepthBuffer.js) Z-конфликт Привет, куб Рисование объектов с использованием индексов и координат вершин Пример программы (HelloCube.js) Запись координат вершин, цветов и индексов в буферный объект Добавление цвета для каждой грани куба Пример программы (ColoredCube.js) Эксперименты с примером программы В заключение Глава 8. Освещение объектов Освещение трехмерных объектов Типы источников света Типы отраженного света Затенение при направленном освещении в модели диффузного отражения Использование направления света и ориентации поверхности в модели диффузного отражения Ориентация поверхности: что такое нормаль? Пример программы (LightedCube.js) Добавление затенения, обусловленного фоновым освещением Пример программы (LightedCube_ambient.js) Освещенность перемещаемого и вращаемого объекта Волшебство матриц: транспонированная обратная матрица Пример программы (LightedTranslatedRotatedCube.js) Освещение точечным источником света Пример программы (PointLightedCube.js) Более реалистичное затенение: вычисление цвета для каждого фрагмента Пример программы (PointLightedCube_perFragment.js) В заключение Глава 9. Иерархические объекты Рисование составных объектов и управление ими Иерархическая структура Модель с единственным сочленением Пример программы (JointModel.js) Рисование иерархической структуры (draw()) Модель со множеством сочленений Пример программы (MultiJointModel.js) Рисование сегментов (drawBox()) Рисование сегментов (drawSegment()) Шейдер и объект программы: роль initShaders() Создание объектов шейдеров (gl.createShader()) Сохранение исходного кода шейдеров в объектах шейдеров (g.shaderSource()) Компиляция объектов шейдеров (gl.compileShader()) Создание объекта программы (gl.createProgram()) Подключение объектов шейдеров к объекту программы (gl.attachShader()) Компоновка объекта программы (gl.linkProgram()) Сообщение системе WebGL о готовности объекта программы (gl.useProgram()) Реализация initShaders() В заключение Глава 10. Продвинутые приемы Вращение объекта мышью Как реализовать вращение объекта Пример программы (RotateObject.js) Выбор объекта Как реализовать выбор объекта Пример программы (PickObject.js) Выбор грани объекта Пример программы (PickFace.js) Эффект индикации на лобовом стекле (ИЛС) Как реализовать ИЛС Пример программы (HUD. html) Пример программы (HUD.js) Отображение трехмерного объекта в веб-странице (3DoverWeb) Туман (атмосферный эффект) Реализация эффекта тумана Пример программы (Fog.js) Использование значения w (Fog_w.js) Создание круглой точки Как нарисовать круглую точку Пример программы (RoundedPoints.js) Альфа-смешивание Как реализовать альфа-смешивание Пример программы (LookAtBlendedTriangles.js) Как должна действовать функция смешивания Альфа-смешивание для трехмерных объектов (BlendedCube.js) Рисование при наличии прозрачных и непрозрачных объектов Переключение шейдеров Как реализовать переключение шейдеров Пример программы (ProgramObject.js) Использование нарисованного изображения в качестве текстуры Объект буфера кадра и объект буфера отображения Как реализовать использование нарисованного объекта в качестве текстуры Пример программы (FramebufferObjectj.js) Создание объекта буфера кадра (gl.createFramebuffer()) Создание объекта текстуры, настройка его размеров и параметров Создание объекта буфера отображения (gl.createRenderbuffer()) Связывание объекта буфера отображения с типом и настройка его размера (gl.bindRenderbuffer(), gl.renderbufferStorage()) Подключение объекта текстуры, как ссылки на буфер цвета (gl.bindFramebuffer(), gl.framebufferTexture2D()) Подключение объекта буфера отображения к объекту буфера кадра (gl.framebufferRenderbuffer()) Проверка корректности настройки объекта буфера кадра (gl.checkFramebufferStatus()) Рисование с использованием объекта буфера кадра Отображение теней Как реализуются тени Пример программы (Shadow.js) Увеличение точности Пример программы (Shadow_highp.js) Загрузка и отображение трехмерных моделей Формат OBJ Формат файла MTL Пример программы (OBJViewer.js) Объект, определяемый пользователем Пример программы (реализация анализа содержимого файла) Обработка ситуации потери контекста Как реализовать обслуживание ситуации потери контекста Пример программы (RotatingTriangle_contextLost.js) В заключение Приложение A. В WebGL нет необходимости использовать рабочий и фоновый буферы Приложение B. Встроенные функции в языке GLSL ES Функции для работы с угловыми величинами и тригонометрические функции Экспоненциальные функции Общие функции Геометрические функции Матричные функции Векторные функции Функции для работы с текстурами Приложение C. Матрицы проекций Матрица ортогональной проекции Матрица перспективной проекции Приложение D. WebGL/OpenGL: лево- или правосторонняя система координат? Пример программы CoordinateSystem.js Удаление скрытых поверхностей и усеченная система координат Усеченная система координат и видимый объем Теперь все правильно? В заключение Приложение E. Транспонированная обратная матрица Приложение F. Загрузка шейдеров из файлов Приложение G. Мировая и локальная системы координат Локальная система координат Мировая система координат Преобразования и системы координат Приложение H. Настройка поддержки WebGL в веб-браузере Словарь терминов Список литературы Предметный указатель
