Уроки WebGL — DevBurn

Представляю вашему вниманию перевод серии уроков Learning WebGL. В них мы начнем с отображения простых черно-белых объектов, а закончим сложными сценами с наложением текстур и использованием освещения.

	Урок 0: Приступаем к работе с WebGL показывает, как загрузить, установить и настроить браузер для отображения WebGL, а также содержит ссылки на страницы, где можно посмотреть примеры WebGL.
	WebGL Урок 1 — Треугольник и квадрат даст вам представление о работе WebGL на примере простой отрисовки статического треугольника и квадрата.
	WebGL Урок 2 — Добавляем цвет основан на первом уроке и добавляет цвета к объектам сцены.
	WebGL Урок 3 — Немного движения основан на втором уроке и добавляет вращение объектам сцены.
	WebGL Урок 4 — Настоящие 3D-объекты основанный на третьем уроке, он переносит нас в трехмерное измерение, заменяя треугольник пирамидой, а квадрат — кубом.
	WebGL Урок 5 — Введение в текстуры покажет, как вы можете использовать изображение из файла, чтобы «натянуть» его на 3D-объекты, что дает вам быстрый и простой способ сделать их более привлекательными и интересными.
	WebGL Урок 6 — Управление клавиатурой и фильтрация текстур основанный на пятом уроке, он покажет вам некоторые более развитые подходы использования текстур и объяснит, как можно обрабатывать нажатия клавиш клавиатуры в 3D-сценах и играх.
	WebGL Урок 7 — Основы фонового и направленного освещения знакомит с двумя простейшими формами освещения.
	WebGL Урок 8 — Буфер глубины, прозрачность и смешивание покажет один из способов создания эффекта прозрачности материалов в WebGL, снабжая вас при этом небольшой теоретической частью.
	WebGL Урок 9 — Улучшение структуры кода на примере множества двигающихся объектов использует простой объектно-ориентированный подход, который дает нам множество независимо анимируемых объектов, одновременно вращающихся на экране.
	WebGL Урок 10 — Загрузка мира и основы камеры использует подходы из предыдущего урока вместе с новой техникой симуляции камеры, которая движется по сцене, в результате чего получается что-то вроде нано-Дума :).
	WebGL Урок 11 — Сферы, матрицы поворотов и события мыши покажет, как отобразить сферу и позволить пользователю вращать ее с помощью мыши.
	WebGL Урок 12 — Точечное освещение объяснит, как сделать освещение, которое исходит из точки внутри вашей 3D-сцены.
	WebGL Урок 13 — Попиксельное освещение и несколько программ опишет способ создания более реалистичного освещения, но ценой более долгой обработки видеокартой.
	WebGL Урок 14 — Блики и загрузка JSON-модели сделает освещение еще лучше с помощью добавления бликов, а также покажет, как загружать модели 3D-объектов из файлов в формате JSON.
	WebGL Урок 15 — Карта отражений покажет, как использовать карту отражений, что дает вашей сцене больший реализм за счет указания того, как та или иная часть поверхности объекта отображает блики (как обычные текстуры позволяют указывать подробный цвет).
	WebGL Урок 16 — Рендеринг в текстуру объяснит, как отрисовать сцену WebGL в текстуру, которая в дальнейшем будет использоваться в другой сцене — сам по себе искусный трюк, а также хороший фундамент для других приемов.

Основы WebGL и three.js. Урок 1

Я приветствую Вас на первом уроке курса «WebGL и three.js»! Прежде чем начать серию статей, давайте определимся, для кого они предназначены, какой уровень начальных знаний необходим, чтобы полноценно пройти этот курс.

Во-первых, должно быть понимание языка JavaScript: функций, циклов, массивов, объектов, синтаксиса и так далее. Без этого смотреть курс дальше нет никакого смысла (кроме как полюбоваться эффектами 3D).

Во-вторых, нужно, чтобы вы смогли развернуть (либо самостоятельно, либо по мануалу) локальный веб-сервер и создать папку с сайтом. Это нужно, чтобы AJAX корректно загрузил 3D-модели, которые мы будем вставлять в наши сцены в рамках курса. Если с этими пунктами проблем нет – добро пожаловать на курс!

Определимся, о чем этот курс, что такое WebGL и three.js.

WebGL – это программная библиотека для JavaScript’а, которая позволяет создавать 3D графику, функционирующую в браузерах. Другими словами, мы делаем 3D модель не на компьютере, в рамках программы, работающей в операционной системе, а непосредственно в браузере, но в то же время – это не флэш, к которому мы привыкли и не любим за то, что он постоянно тормозит. WebGL использует тег canvas, который появился в HTML5, но рисуем уже в 3D (а не в 2D, как привыкли).

Three.js – это библиотека, которая опирается на возможности WebGL и делает над ним надстройку, что позволяет работать с WebGL более удобным образом и писать меньше строчек кода.

Стоит объяснить, почему выбран three.js, а не чистый WebGL. Причин несколько. Первая и главная – быстрый результат. Когда вы пробуете новую технологию, вы являетесь в ней новичками, которым хочется увидеть моментальный результат. Сделать первую сцену, вывести машину в виде 3D модели и показывать друзьям, как она крутится, – здорово же! Гораздо интереснее, чем, скажем, две недели изучать шейдеры,  базовое отображение и создание материала для WebGL. Three.js же выполняет всю низкоуровневую работу с WebGL за нас, предоставляя набор классов с понятным интерфейсом для удобной работы с 3D графикой, а кроме этого, она позволяет быстро достичь результата, не разбираясь во всех сложностях и тонкостях в отображении материалов в WebGL. Скачать библиотеку и посмотреть множество интересных примеров можно на её официальном сайте (http://www.threejs.org). Мы также это будем делать в рамках всего курса: и смотреть готовые примеры, и писать свои.

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

Основные понятия WebGL и three.js

Первое, что появляется в 3D пространстве – это рендереры (так же называется класс в three.js). Рендерер – это сущность, отображающая на canvas выбранную сцену с выбранной камерой. Сцена – это 3D пространство, в котором располагаются нужные объекты: элементы (иначе — меши) и источники света, которые освещают элементы с какой-либо стороны. Для наглядности можно представить себе куб как самую простую сцену и три оси, где располагаются элементы. От чего в первую очередь зависит внешний вид элементов? А зависит он именно от камеры – той точки, с который мы сейчас смотрим на сцену (и в ту точку, куда мы смотрим). Поэтому рендерер, чтобы сделать отображение чего-либо на canvas, всегда принимает в себя (мы говорим уже о методе объекта WebGL) сцену и камеру. Именно эти две ключевых вещи формируют отображение пространства на тег canvas.

Что ещё есть на сцене? Источник света – элемент, который создаёт освещение. Он может быть рассеянным, точечным, направленным – всё это мы будем разбирать дальше в рамках курса. Самое главное и интересное понятие, которое здесь представлено, – это меш. Меш – это элемент сцены, который состоит из геометрии и материала. 3D объект – не простой объект, как мы хотели бы себе представить, а составная вещь. Любой объект, который мы хотим отобразить в 3D, состоит из геометрии и материала. Такой подход выбран, чтобы мы могли из простых геометрических примитивов создавать вещи, которые по-разному отображаются. Простейший пример геометрии материала: геометрия – это плоскость, материал – что-то, залитое красным цветом. В итоге получаем красную плоскость. Здесь разделяется структура и оформление. Кто знает HTML и CSS – а вы, скорее всего, их знаете, если слушаете этот курс, – то там существует такое же разделение, это тенденция.

Геометрия – это набор вершин, которые при генерации соединяются между собой графическими примитивами. Если мы берём простейшую плоскость как геометрию, то в рамках этой плоскости точки при отображении соединяются между собой прямыми линиями, и мы видим результат. Если есть сфера, то там тоже ключевые точки по сегментам соединяются прямыми линиями. И даже если будет 3D объект машины, то и в этом случае всё соединяется примитивными элементами. Разница в том, что в плоскости — четыре ключевые точки, а в машине – четыре тысячи, но суть от этого не меняется.

Переходим непосредственно к материалу. Материал – понятие намного более сложное, чем цвет, поэтому на нём нужно остановиться подробнее. Материал – это способ отображения и внешний вид элемента. Здесь кроется интересная сложность: в прошлом примере   было сказано, что мы сделаем плоскость, к примеру, красной; но существует множество разных красных плоскостей, и происходит это потому, что материал – это именно способ отображения элемента. Какие-то элементы отражают свет и/или отбрасывают тени, а какие-то нет. И список можно продолжать – всё это зависит от материала. Материал – это ни в коем случае не просто цвет, это то, как он себя ведёт в рамках представления на сцене. Тени и отражение – простейшие примеры для демонстрации.

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

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

Примеры элементов на 3D сцене

(данную часть статьи нагляднее изучать по видео, которое находитися вверху экрана)

Итак, вы видите тег canvas, это первая сцена. Рендерер мы не видим никогда, потому что это камера плюс сцена. Сейчас мы увидим сцену, на которой будут три оси. Первая ось – это X, она идёт горизонтально, вторая ось – Y, идёт вертикально, третья – Z, которая идёт на нас и от нас.

Камера стоит немного сбоку, потому что если бы она стояла фронтально, увидеть ось Z не получилось бы. Оси должны быть понятны всем, направление привычное: по X слева минус, справа плюс; по Z вдали минус, вблизи плюс, по Y внизу минус, вверху плюс. Но обратите внимание на интересную деталь: ось Z почему-то толще в левой части экрана, а ближе к правой части становится всё тоньше и тоньше. Дело в том, что эта ось уходит всё дальше от нас, и камера отображает объекты согласно перспективе (это называется PerspectiveCamera, которая чаще всего используется на сцене). Есть ещё стандартная камера, но её отображение совсем нереалистичное: представьте обычную комнату, в которой у вещей нет перспективы.

Третью ось мы видим из определенной позиции камеры и смотрим – заметьте, это важно! – в определенном направлении. Сейчас мы оставляем камеру в той же точке, но меняем направление и смотрим по X в точку, скажем, 250.

Изображение изменилось, будто вы стоите в помещении в том же углу, что и раньше, но повернули голову и смотрите не на дверь, а на окно и видите совершенно другую картину. Кроме изменения точки, на которую мы смотрим, можно ещё изменить точку, откуда мы смотрим. Предположим, вы из угла комнаты перешли к двери, – теперь камера по X расположена ближе к нулю.

То же самое можно сделать обратно: опять меняем позицию камеры и угол обзора, и из-за этого на сцене генерируется разное отображение. Первое, что нужно запомнить: камера всегда определяется своим местоположением и точкой, на которую мы смотрим; это основа того, что будет отображено на экране.

Теперь посмотрим на такие понятия, как меш, геометрия и материалы. Сейчас на сцене постепенно появляется новый меш, который собран из геометрии под названием «прямоугольник» (по факту – это некая плоскость).

Он составлен из материала, но материал не совсем обычный – не «basic material», а «phong material», самый сложный и самый реалистичный тип материала. На следующем этапе будет заметно, чем отличается поведение линии и плоскости. Линии составлены из «basic material» – самого простого материала, и просто покрашены в какой-то цвет, а плоскость составлена из реалистичного материала, и он, на самом деле, белый, но почему-то плоскость серая. Серой она является потому, что цвет источника освещения – 0х777777. Сейчас мы удалим из источника освещения синюю гамму и посмотрим, что произойдет: плоскость меняет свой цвет, а линии остаются такими же – продемонстрировано разное поведение материалов.

Basic material не реагирует ни на что, а плоскость с реалистичным материалом реагирует на изменения освещения. Удалим ещё красную гамму: она становится зеленой.

Помимо того, что мы играем с цветом (хотя цвет нашей плоскости остаётся белым, сейчас меняется только источник освещения), саму плоскость тоже можно изменять. Белый цвет задавать ей неинтересно, поэтому рассмотрим следующую вещь, которую мы можем задавать материалу, — текстуру. Мы задали на нашу плоскость текстуру шириной и высотой по 128 пикселей, которая по ней размножилась.

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

Загружаем 3D модель машины как готовый меш. Но меш обладает только геометрией, которая ещё никак не украшена.

Разве это машина? Вы бы на такой согласились ездить?

Вот это – другое дело, уже нормально смотрится. В чем разница? В первом случае машина сделана просто: геометрия и заданный по умолчанию материал (белый материал, нереагирующий на свет). А вторая машина – это меш с реалистичным материалом, на котором определенным образом поставлена текстура, и получаем достаточно красивый результат. При этом объекты освещены со всех сторон одинаково и равномерно: нет теней, разных цветовых оттенков, потому что использовался источник рассеянного света, который со всех сторон светит одинаково, так как расположен где-то очень далеко, как солнце над головой (вообще-то солнце тени генерирует, а наше освещение пока не умеет).

Поставим точку света: посмотрите, как от этого меняется 3D мир.

Мы поставили точку света ближе к нам, и получилось, что яркая часть сейчас освещена (которая ближе к левому углу), а дальше объект плоскости становится всё более зеленым. Это происходит потому, что свет туда долетает хуже. Это аналог лампы, которую вы поставили, направили на какую-нибудь доску, и ближнюю часть она освещает хорошо, а дальнюю – плохо. Свет может быть направленный, можно генерировать тени, но всё это мы с вами увидим и научимся делать в рамках следующих уроков.

На данном этапе мы рассмотрим этот 3D мир с разных сторон и подключим OrbitControl – специальную добавку к three.js. Таким образом мы можем покрутиться по сцене и посмотреть, как это выглядит.

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

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

А сейчас нужно обобщить основные понятия, которые мы сегодня узнали, посмотреть на иерархию отображения. Первоначально у нас есть рендерер – то, что работает с тегом canvas и выводит туда изображения. Он зависит от камеры и сцены: камера направлена на сцену. На сцене есть источники света – это массив, потому что их может быть много; много может быть и мешей – 3D объектов, которые заводятся на сцену. Каждый меш представляет собой геометрию и материал. Материал – это наиболее обширное понятие, есть «хитрые» материалы (например, с отражением), но это уже высший пилотаж, который мы сейчас рассматривать не будем.  Но так или иначе, материал включает в себя правила отображения, возможность поставить цвета, текстуры и многое другое. Так выглядит иерархия отображения в рамках просмотра сцены с простейшей стороны.

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

На следующем уроке мы рассмотрим, как подключается библиотека three.js, создадим первую сцену и поставим туда какие-нибудь объекты.

Подписывайтесь на мой youtube канал, чтобы не пропустить следующие уроки!

20.10.2015

Понравился материал? Поделись с друзьями!

Основы WebGL — DevBurn

Отличная новость! Я закончил перевод Основ WebGL на русский язык! Это отличный ресурс, где можно найти массу полезного и актуального материала по WebGL — особенно для тех, кто только начинает своё знакомство с WebGL.

1. Основы WebGL.

Если вы только начинаете изучение WebGL, то вам определённо стоит начать с этого раздела.

Основы WebGL. Своего рода Hello, world! на WebGL. Статья на самом базовом уровне расскажет о том, что такое WebGL, шейдеры, атрибуты, varying- и uniform-переменные и как это всё связано между собой.

Как работает WebGL. Продолжение Основ WebGL. Более подробное освещение шейдеров, атрибутов, varying- и uniform-переменных. Статья предполагает, что вам уже известны самые базовые концепции WebGL, и теперь вы хотите узнать больше.

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

2. Обработка изображений.

Обработка изображений в WebGL. Обработка изображений средствами WebGL на примере реализации фильтров Гауса, резкости, эмбоссирования и других. Знакомство с текстурой.

Продолжаем обработку изображений в WebGL. Применение одновременно нескольких фильтров за счёт использования нескольких текстур.

3. Трансформации.

2D-перенос в WebGL. Статья познакомит с переносом объекта на новое местоположение. Значение переноса задаёт пользователь с помощью ползунков — то есть появляется интерактивность сцены.

2D-поворот в WebGL.

В статье к функционалу переноса добавляется ещё одна трансформация — поворот.

2D-масштабирование в WebGL. В конце этой статьи у нас будут все три трансформации — перенос, поворот и масштабирование.

2D-матрицы WebGL. Статья познакомит вас с матрицами и объяснит, почему они подходят лучше всего для реализации математики трансформаций.

4. 3D.

Уходим от плоских фигур и начинаем работу с настоящим 3D.

WebGL 3D — Ортогональ. В этой статье у нас не просто добавляется координата z, происходит гораздо больше — у нас появляется объём! А вместе с ним появятся проблемы, связанные с направлением обхода вершин и буфером глубины. Конечно же, все они решатся к концу статьи.

WebGL 3D — Перспектива. Что заставляет далёкие объекты выглядеть маленькими, а близкие — большими? Конечно же перспектива. Без неё наш 3D очень сложно будет назвать реалистичным.

WebGL 3D — Камеры. Эта статья расскажет про камеру. Хотя если быть точным, статья расскажет, что в WebGL вообще нет камер, а также расскажет, что нам с этим всем делать.

5. Освещение.

Что бы мы разглядели на сцене, не будь у нас освещения?..

WebGL 3D — Направленное освещение. Здесь вы познакомитесь с самым простым освещением — направленным. Также вы узнаете, что такое нормали и какова их роль в освещении.

WebGL 3D — Точечное освещение. В отличие от направленного освещения, где свет падал равномерно на все объекты, в точечном освещении у нас появляется источник света, положение которого необходимо учитывать при расчёте освещения. Кроме того, освещение больше не будет равномерным — у нас появятся блики.

WebGL 3D — Прожектор. Это освещение поможет воссоздать свет от прожектора или фонарика в ваших проектах на WebGL. Прожектор очень похож на точечное освещение, но имеет границы, за пределами которых освещение затухает.

6. Структура и устройство.

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

WebGL — Отрисовка нескольких объектов. Статья расскажет, как отрисовать несколько объектов на одной сцене, чтобы у каждого объекта при этом была независимая анимация.

WebGL — Графы сцены. Задумывались ли вы когда-либо, как можно смоделировать солнечную систему или как устроена скелетная анимация? Ответы на оба этих вопроса вы найдёте в данной статье.

WebGL 3D — Создание модели.

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

8. Текстуры.

Добавим красок.

WebGL 3D — Текстуры. Текстуры, текстурные координаты, модели фильтрации, мип-маппинг… Эти слова ничего для вас не значат? Значит, вам сюда.

WebGL 3D — Данные для текстур. Здесь вы узнаете, как создать текстуру из данных, которые задаются прямо в JavaScript, без использования изображения.

Использование 2 и более текстур в WebGL. Статья расскажет об особенностях использования двух и более текстур, а также об тонкостях асинхронной загрузки изображений для текстур.

WebGL — Кросс-доменные изображения. Как использовать изображение со стороннего источника для своей текстуры и что такое CORS.

WebGL 3D — Перспективная коррекция текстур. Влияние значения W на текстуру и особенности интерполяции varying-переменных с учётом перспективы.

9. Рендеринг в текстуру.

WebGL — Рендеринг в текстуру. Оказывается, отрисовывать сцену можно не только на элемент canvas, но и в текстуру, которую затем можно наложить, скажем, на грань куба. Или даже на все грани куба!

Реализация DrawImage в WebGL. В составе API Canvas есть замечательная функция drawImage, которая покроет львиную долю всех запросов при разработке игры. В данной статье мы рассмотрим, как можно реализовать эту функцию через средства WebGL.

WebGL 2D — стек матриц. Реализация ещё одной техники из 2D-canvas под названием стек матриц.

11. Текст.

Довольно часто возникает необходимость вывести на сцену текст. Это может быть статус какого-либо процесса, значение скорости в игре или имя ММО-персонажа. Какие же средства находятся в нашем распоряжении для вывода текста?

WebGL текст — HTML. Пожалуй, первое, что приходит в голову при необходимости вывести текст — использовать HTML-элементы. В конце концов, мы находимся в браузере, почему бы не использовать его возможности?..

WebGL текст — Canvas 2D. Более гибким способом будет использование 2D-canvas для вывода надписей, поскольку помимо вывода текста мы можем создавать произвольные двумерные значки.

WebGL текст — текстуры. Использование HTML для вывода текста реализуется довольно просто, но оно не лишено недостатков. Один из них — текст не является частью сцены, это просто HTML-элемент поверх сцены. В этой статье мы выведем текст в текстуру внутри сцены.

WebGL текст — Используем глиф-текстуру. Что делать, если нужно выводить довольно большой объём текста, который к тому же часто меняется? А чтобы при этом получить ещё приемлемую частоту кадров? В такой ситуации обычно применяют текстурный атлас, состоящий из символов. О нём и пойдёт речь в данной статье.

12. Разное.

Здесь собрано всё, чему не нашлось раздела

WebGL Установка и настройка. Подготовка окружения для разработки приложений на WebGL.

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

Изменение размера Canvas в WebGL. Статья покажет, что не всё так просто с размером canvas, и что размеры буфера отрисовки и HTML-элемента могут не совпадать. А также покажет, как правильно задавать размеры.

WebGL — Анимация. Для создания анимации сцены мы используем функцию requestAnimationFrame. Например, каждый кадр объекту добавляется немного вращения. Но тогда на медленных компьютерах объект будет вращаться медленнее. В онлайн-играх это приведёт к очень неприятным последствиям. Данная статья расскажет, что можно сделать в этом случае.

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

WebGL — Растеризация или 3D-библиотека. Почему WebGL — это не библиотека работы с 3D, а скорей API растеризации.

WebGL — Антипаттерны. Набор практик, которых стоит избегать, почему их нужно избегать и что стоит использовать вместо них при работе с WebGL.

WebGL tutorial — Веб-технологии для разработчиков

Этот перевод не завершён. Пожалуйста, помогите перевести эту статью с английского

WebGL позволяет использовать API, основанную на OpenGL ES 2.0  для осуществления 3D рендеринга в HTML <canvas> в браузерах, которые его поддерживают без использования плагинов. WebGL программы состоят из программ, написанных на JavaScript, и специального кода шейдеров, который выполняется на видеокарте. WebGL элементы  могут использоваться с HTML элементами и скомпонованы с другими частями страницы или бэкграунда страницы.

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

Перед тем как начать

Использование элемента <canvas>  — это не сложно, но вы должны понимать основы HTML и JavaScript. <canvas> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создает графику на лету.

В этом руководстве

Начало работы с WebGL

Как настроить WebGL контекст.

Добавление 2D контекста в WebGL контекст

Как визуализировать простые плоские фигуры используя WebGL.

Использование шейдеров для добавления цвета в WebGL

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

Анимирование объектов с WebGL

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

Создание 3D объектов с WebGL

Как создать и анимировать 3D объект (куб).

Использование текстур в WebGL

Как перевести текстуру на поверхность объекта.

Освещение объектов в WebGL

Как симулировать эффект света в контексте WebGL.

Анимирование текстур в WebGL

Как анимировать текстуры; здесь путем отображения Ogg видео на поверхность вращающегося куба.

Урок 0: Приступаем к работе с WebGL

Урок 1 >>

Материал в оригинале можно найти здесь

Первое, что вам нужно сделать при начале работы с WebGL — обзавестись браузером, который его поддерживает. Что именно использовать — зависит от того, хотите ли вы просто посмотреть на готовые примеры WebGL или разработать свои.

Простой путь

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

• При использовании Windows убедитесь, что установлена Исполняемая библиотека Microsoft DirectX — ее можно бесплатно скачать с сайта Microsoft.
• После этого установите самую последнюю версию драйверов видеокарты.
• Теперь выбирайте браузер:
  • Firefox: достаточно версии 4 и выше.
  • Chrome: вам нужно просто установить его. Если вы его уже используете, просто проверьте, что он обновлен до версии 10 — почти наверняка это произошло автоматически (версия выпущена в марте 2011), но вы можете убедиться в этом в пункте меню «О браузере Google Chrome».
  • Safari: на Mac, OS X 10.7 имеет поддержку WebGL, но она отключена по умолчанию. Для ее включения зайдите в меню разработчика и отметьте флажок «Включить WebGL».

Готово! Теперь вы готовы. Можете посмотреть на некоторые WebGL-страницы.

Сложный путь

Если вы сами разрабатываете на WebGL или вам нужны новейшие возможности, тогда вам просто необходимо иметь самую последнюю версию браузера. WebGL поддерживается в версиях для разработчиков всех браузеров, кроме Internet Explorer, поэтому вам остается просто выбрать подходящую версию для вашего компьютера. Насколько это легко — зависит от того, какой у вас компьютер:

• Windows: Если вы еще этого не сделали, убедитесь, что у вас установлена исполняемая библиотека DirectX — ее можно бесплатно скачать с сайта Microsoft. После этого установите либо Firefox, либо Chromium в зависимости от своих предпочтений. Если это не сработало — проверьте инструкцию по устранению неполадок. (Экстренные новости: пре-бета версия Opera, которая теперь поддерживает WebGL на Windows, теперь доступна. Однако, она не такая стабильная, как другие браузеры, поэтому не полагайтесь на нее как на единственную реализацию WebGL. Кроме того, она будет работать, только если ваша видеокарта поддерживает OpenGL 2.0. В общем, ее не так просто заставить работать)
• Macintosh: Если у вас Snow Leopard (OS X 10.6), то все должно быть хорошо. Я рекомендую использовать WebKit версию для разработчиков, которая будет альтернативой браузеру Safari. Если у вас Leopard (OS X 10.5), у вас не получится использовать эту версию WebKit, но вы можете работать в Firefox или Chromium. Пользователи Snow Leopard, конечно же, тоже могут использовать Firefox или Chromium. Если у вас более старая версия OS X, я, к сожалению, не знаю какого-либо браузера, который вы можете использовать :(.
• Linux: К сожалению, довольно большое количество драйверов для видеокарты недостаточно хороши для работы с WebGL. То же самое было и с Windows, но разработчики браузеров смогли обойти это с помощью DirectX. К несчастью, в Linux нет подобного обходного пути. Вот, что у меня получилось найти:
  • Если у вас видеокарта Nvidia со свежими драйверами, то все должно работать хорошо в Firefox или Chromium.
  • Если у вас видеокарта ATI, наверное, лучшим выбором будет Firefox.
  • Если у вас видеокарта Intel, то вероятней всего у вас будет тормозить программный рендеринг, но во всяком случае вы сможете хотя бы увидеть работу WebGL. Попробуйте Firefox или Chromium, но вероятно они не будут работать на настройках по умолчанию (аппаратный рендеринг). Для использования программного рендеринга на Linux вам необходимо установить Mesa (и убедиться в менеджере пакетов, что у вас последняя версия) и затем использовать последний Firefox с небольшими дополнительными настройками.

Более подробно об этом в разделе устранения неполадок.

Firefox

«Нестабильная» версия Firefox для разработчиков называется Minefield. Она обновляется каждую ночь и уже довольно надежная: я не замечал падений в последнее время (а я использую ее постоянно). Она может работать наряду с обычной версией Firefox, поэтому не нужно волноваться, что придется удалять ее, если вы прекратите ей пользоваться или просто на время переключитесь в обычную версию Firefox.

Для получения Minefield:

• Открывайте страницу ночных сборок и выбирайте подходящую версию для вашего компьютера. Будьте внимательны! Там может быть множество версий, с именами типа «firefox-10.0a1что-то там» или «firefox-10.0a2что-то там». Вам нужна самая последняя, где будет самое большое число после ‘a’ (альфа) или ‘b’ (бета).
• Установите ее (на это время вам нужно будет закрыть все открытые экземпляры Firefox).
• Запускайте Minefield.

Полезная подсказка — если вы хотите работать с Minefield вместе с обычным Firefox, вы можете сделать это добавлением аргументов командной строки: -P Minefield -no-remote. Первый аргумент запускает его с отдельным профилем (чтобы у вас были раздельные истории и наборы открытых вкладок в каждом браузере), а второй параметр обозначает, что при запуске Minefield, когда Firefox уже открыт, Minefield не будет открыт новой вкладкой в уже запущенном Firefox. Возможно, вы также захотите добавить -P default -no-remote к аргументам запуска обычного Firefox для аналогичного эффекта. Пользователям Windows: вы можете установить аргументы командной строки для любого приложения, кликнув правой кнопкой мыши на иконке приложения, затем выбрав «Свойства» и добавив параметры в конец поля «Объект». Пользователям Mac и Linux — я не знаю, как вы это делаете, но вероятно, что вы и сами в курсе :).

Теперь можете посмотреть на некоторые WebGL-страницы.

Запуск Minefield с программным рендерингом на Linux

Если ваша видеокарта — или драйвер, что более вероятно — не поддерживают OpenGL 2.0, то единственный способ добиться работы WebGL на Linux — использовать библиотеку под названием Mesa. По существу, Mesa эмулирует видеокарту на программном уровне, поэтому работает она медленнее — но это лучше, чем ничего. Mesa интегрируется с Minefield, «нестабильной» версией Firefox для разработчиков, обычно это часть вашего дистрибутива Linux. И вот как все это можно сделать:

• Скачайте последнюю версию Minefield
• Установите ее (на это время вам нужно будет закрыть все открытые экземпляры Firefox).
• Через менеджер пакетов Linux убедитесь, что Mesa установлена и обновлена до последней версии
• Запускайте Minefield.
• Перейдите на страницу «about:config»
• Отфильтруйте по «webgl»
• Установите значение настройки «webgl.enabled_for_all_sites» в значение «true».
• Установите значение настройки «webgl.software_rendering» в значение «true».
• Пропишите в «webgl.osmesalib» путь к библиотеке OSMesa (обычно это /usr/lib/libOSMesa.so).

Теперь все должно быть настроено и вы можете посмотреть на некоторые WebGL-страницы.

Safari

Запомните, что Safari поддерживает WebGL на Mac с системой Snow Leopard (OS X 10.6). Если у вас Leopard (10.5), Windows или Linux, то вам нужно использовать Firefox или Chromium (при более старой версии OS/X я не знаю браузера, который вы могли бы использовать 🙁 ).

Итак, если у вас Snow Leopard, вам необходимо:

• Убедитесь, что у вас по крайней мере четвертая версия Safari.
• Загрузите и установите ночную сборку WebKit
• Откройте терминал и выполните в нем команду: defaults write com.apple.Safari WebKitWebGLEnabled -bool YES
• Запустите установленный WebKit

Теперь можете посмотреть на некоторые WebGL-страницы.

Chromium

Если вы хотите создаете страницы с использованием WebGL, разработчики Chrome рекомендуют использовать ночные сборки Chromium — браузера с открытым исходным кодом, на котором основан Chrome. Схема немного отличается для каждой операционной системы. Здесь инструкции для Windows, Macintosh и Linux. (Предупреждение: я пробовал только на Windows, но мне сказали, что настройки остальных ОС тоже в порядке. Оставляйте комментарии, если это не так 🙂 ).

Windows

• Открывайте страницу непрерывной интеграции, прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-win32.zip
• Распакуйте файл в удобном для себя месте
• В распакованном каталоге запустите chrome.exe

Macintosh

• Открывайте страницу непрерывной интеграции, прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-mac.zip
• Распакуйте файл в удобном для себя месте
• Откройте терминал и перейдите в распакованный каталог chrome-mac
• Убедитесь, что Chrome не запущен
• Выполните следующую команду: ./Chromium.app/Contents/MacOS/Chromium
• После того как убедитесь, что все работает, вы, возможно, захотите немного автоматизировать вещи, чтобы не набирать команду каждый раз. Julien Limoges подсказал для этого полезный shell-скрипт.

Linux

• Открывайте 32-разрядную или 64-разрядную страницу непрерывной интеграции, прокрутите вниз до самой последней сборки и нажмите на ссылку для получения chrome-linux.zip
• Распакуйте файл в удобном для себя месте
• Убедитесь, что Chrome не запущен
• Выполните следующую команду: ./chrome

Теперь можете посмотреть на некоторые WebGL-страницы.

Несколько примеров

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

Если же WebGL работает, то все настроено правильно! К сожалению, последние изменения в WebGL поломали многие примеры, но есть несколько обновленных:

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

Устранение неполадок

Mac

У меня нет полезных советов и подсказок для настройки WebGL на Mac, потому что никто никогда не просил меня о помощи и я никогда не видел вопросов на форумах. Я могу предположить, что это означает, что на OS X все работает хорошо…

Windows

Самая распространенная проблема на Windows — не установлена исполняемая библиотека DirectX — ее можно бесплатно скачать с сайта Microsoft, поэтому стоит попробовать это сделать. Также стоит проверить, не появилось ли новых драйверов для видеокарты — проверьте в обновлениях Windows или на веб-сайте производителя видеокарты. Если это не сработало, возможно драйвер видеокарты находится в «черном списке». На Windows это случается реже, чем на Linux, но все-таки бывает. Посмотрите инструкцию для Linux для подробностей.

Linux

Чаще всего WebGL не работает на Linux из-за проблем с драйверами видеокарты. Все текущие реализации WebGL в браузерах основаны на OpenGL, которая в свою очередь работает благодаря драйверам видеокарты. Для работы WebGL нужен как минимум OpenGL 2.0. В частности, обладатели видеокарт Intel испытывают проблемы, потому что Intel не выпускает драйвера для большинства своих видеокарт с этой поддержкой. Если у вас видеокарт Intel, попробуйте использовать программный рендеринг Mesa. Если и это не помогает, то оставьте комментарий и я попробую помочь.

Если у вас видеокарта ATI или Nvidia, первым делом проверьте свою версию OpenGL. Для этого запустите glxinfo и посмотрите на строку с заголовком «OpenGL version string». Если версия, которую вы видите, меньше 2.0, вам необходимо обновить ваши драйвера. Проверьте веб-сайт производителя видеокарты/компьютера и загляните в менеджер пакетов.

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

По состоянию на 6 октября 2011 года, как выяснил пользователь Nardon, «Google занес в черный список все драйвера Linux, кроме официальных драйверов nVidia … Firefox 6 и выше разрешил большинство последних драйверов ATI, поэтому WebGL должно работать в этом браузере».

Если вы не боитесь аварийных завершений работы и используете драйвер из черного списка, вы можете запустить Chrome с параметром командной строки –ignore-gpu-blacklist и посмотреть, что случится (спасибо Jonas Antunes da Silva за подсказку). Если это не исправит положение вещей, возможно для вашей видеокарты просто нет приличных драйверов для работы OpenGL. Возможно, лучшим выбором для вас будет использование программного рендеринга. Снова оставлю ссылку на инструкцию.

Урок 1 >>

WebGL уроки

Положительные отзывы к книге «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

От автора: предпринималось множество попыток по созданию по-настоящему интерактивных 3D элементов, в том числе были VRML и Flash. Однако стандарт появился только в 2013 году, и это стал WebGL на основе OpenGL ES 2.0. С появлением данной технологии стала возможна интеграция нативного 3D прямо в веб-страницы без каких-либо плагинов и расширений для браузеров.

Что такое WebGL?

WebGL рисует 3D объекты на страницах с помощью JavaScript в теге canvas. В отличие от HTML, WebGL не создает элементы на странице. Все происходит на пиксельном уровне. Таким образом, WebGL можно отнести к низкоуровневому API, которое предлагает точный контроль над 3D пространством через шейдеры без какой-либо абстракции.

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

По этой причине большинство разработчиков используют фреймворк для написания WebGL кода, хотя его можно писать напрямую в JS. На данный момент самый популярный WebGL фреймворк — threeJS. Есть множество других фреймворков.

Необходимость 3D фреймворка

Если вы читали другие статьи на сайте the new code, вы знаете, что я плохо отношусь к фреймворкам. Я верю, что разработчики получают гораздо больше долгосрочных знаний, изучая основы, а не «сокращенные версии».

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

По этой причине большая часть материалов по WebGL на сайте the new code будет использовать фреймворк – вышеупомянутый threeJS. Для изучения вам не потребуются предыдущие знания о 3D, необходимо среднее знание HTML, CSS и JavaScript.

Будущие материалы будут использовать последние версии threeJS и WebGL. Когда WebGL 2.0 станет нормой, статьи будут отредактированы, чтобы отражать все изменения.

Чем отличается этот метод изучения

Большая часть учебных материалов по threeJS, на мой взгляд, довольно низкого качества: демо зачастую не работают из-за того, что код не обновлялся (в фреймворк threeJS часто вносятся изменения), пропускаются или остаются без объяснений целые шаги. В этой серии уроков все будет иначе: будет разобран каждый этап, что позволит строить уроки на основе предыдущих. Мы начнем с практических и веселых примеров, которые вызывают широкий интерес. Я выбрал планеты солнечной системы, смоделированные в 3D. Наша первая остановка – Марс…

Источник: http://thenewcode.com/

Редакция: Команда webformyself.

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Смотреть

Уроки WebGL — DevBurn

Представляю вашему вниманию перевод серии уроков Изучение WebGL. В них мы начнем с отображения простых черно-белых объектов, а закончим сложными сценами с наложением текстур и использованием освещения.

	Урок 0: Приступаем к работе с WebGL, показывает, как загрузить, установить и настроить браузер для отображения WebGL, а также содержит ссылки на страницы, где можно посмотреть примеры WebGL.
	WebGL Урок 1 — Треугольник и квадрат даст вам представление о работе WebGL на примере простого отрисовки статического треугольника и квадрата.
	WebGL Урок 2 — Добавляем цвет основан на первом уроке и цвете к объектам сцены.
	WebGL Урок 3 — Немного движения основан на втором уроке и вращение объектам сцены.
	WebGL Урок 4 — Настоящие 3D-объекты, основанный на третьем уроке, он переносит нас в трехмерном измерении, заменяя треугольник пирамидой, квадрат — кубом.
	Урок 5 WebGL — Введение в текстуры покажет, как вы можете использовать изображение из файла, чтобы «натянуть» его на 3D-объекты, что дает вам быстрый и простой способ сделать их более привлекательными и интересными.
	Урок 6 WebGL — Управление клавиатурой и фильтрация текстур основанный на пятом уроке, он покажет вам некоторые более развитые подходы использования текстур и объяснит, как можно обрабатывать совпадающую клавиатуру в 3D-сценах и играх.
	Урок 7 WebGL — Основы фонового и направленного освещения знакомит с двумя простейшими формами освещения.
	Урок 8 WebGL — Буфер глубины, прозрачность и смешивание, показывает один из способов создания эффекта прозрачности материалов в WebGL, снабжая вас при этом небольшом теоретической части.
	Урок 9 WebGL — Улучшение структуры кода множества движущихся объектов использует простой объектно-ориентированный подход, который дает нам множество независимо анимируемых объектов, одновременно вращающихся на множестве объектов.
	WebGL Урок 10 — Загрузка мира и основы камеры использует подходы из предыдущего урока вместе с новой техникой симуляции камеры, которая движется по сцене, в результате чего получается что-то вроде нано-Дума :).
	WebGL Урок 11 — Сферы, матрицы поворотов и события мыши покажет, как показать сферу и дать пользователю вращать ее с помощью мыши.
	WebGL Урок 12 — Точечное освещение объяснит, как сделать освещение, которое исходит из точки внутри вашей 3D-сцены.
	WebGL Урок 13 — Попиксельное освещение и несколько программ опишет способ создания более реалистичного освещения, но ценой более долгой обработки видеокартой.
	WebGL Урок 14 — Блики и загрузка JSON-модели сделает освещение еще лучше с помощью добавления бликов, а также покажет, как загрузить модели 3D-объектов из файлов в формате JSON.
	WebGL Урок 15 — Карта отражений покажет, как использовать карту отражений, что дает вашей сцене больший реализм за счет инструкций, как та или иная часть поверхности объекта отображает блики (как обычные текстуры показывают подробный цвет).
	WebGL Урок 16 — Рендеринг в текстуру объяснит, как отрисовать сцену WebGL в текстуру, которая в другой сцене — сам по себе искусный трюк, а также хороший фундамент для других приемов.

.

WebGL Установка и настройка

Технически, вам не нужно ничего, кроме, чтобы начать редактировать на WebGL. Зайдите на jsfiddle.net, jsbin.com или codepen.io и просто начните выполнять уроки.

На всех указанных ресурсах при желании можно добавить внешние скрипты через пару тегов .

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

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

Распакуйте архив в какую-нибудь директорию.

Используем небольшой и простой веб-сервер

Вот один из очень простых серверов с интерфейсом под названием Servez.

Если вы используете браузер Chrome, есть ещё более простое решение.Вот небольшое расширение для Chrome, которое выполняет роль веб-сервера

Просто укажите ему директорию с распакованными файлами, кликните на «Старт», откройте в браузере страницу http: // localhost: 8080 / webgl / и найдите необходимый пример.

Если вы предпочитаете командную строку, то можно использовать node.js. Скачайте и установите его, откройте командную строку / консоль / терминал. На Windows установщик добавит «Командную строку Node», которую и нужно использовать.

Затем установить servez команду

  npm -g установить servez
  

Для OSX використовуйте

  sudo npm -g установить servez
  

А после установки запустите

  servez путь / к / распакованным / файлам
  

На экране показаться что-то вроде

Теперь можно в браузере перейти по адресу http: // localhost: 8080 / webgl / .

Без указания пути servez будет использовать текущую папку.

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

Большинство браузеров имеют встроенные инструменты разработки.

Документация для Chrome находится здесь, Для Firefox — здесь.

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

Помощники WebGL

Также разнообразные помощники / инспекторы для WebGL.Вот один из них для Chrome.

В Firefox тоже есть похожий. Его нужно активировать в about: flags , также может потребоваться Firefox Developer Edition.

Они могут стать полезными, а могут и не стать. Большинство из них предназначены для анимированных сэмплов, они могут захватывать кадр и показывают все вызовы WebGL, которые формируют этот кадр. Они отлично подойдут, если уже что-то работает или если что-то работало и внезапно сломалось. Но от них мало проку, если у вас проблемы при инициализации, или если вы не используете анимацию, где нужно отрисовывать каждый кадр.Всё же они могут быть очень полезными. Я часто проверяю униформу-переменные при вызове отрисовки. Если я вижу кучу NaN (NaN = Not a Number, то есть Не число), я проверяю код, отвечающий за установку этих объем, и нахожу ошибку.

Инспектор кода

Также помните про инспектор кода. Мы можем запросто просмотреть исходный код.

Даже

.

Впечатляющие примеры WebGL / Хабр

Библиотека WebGL позволяет создавать в браузереительные 3D игры, сцены и удивительные эффекты. Пока некоторые из них просто так, некоторые быть уже сегодня, на кого-то, на кого-то одного из них. В этом топике собраны наиболее интересные примеры использования WebGL, спасибо двум постам Дэвида Уолша (Дэвида Уолша) и сайту WebGL Experiments.

Куб Google Карт

Необычная игра, где нужно гонять шарик по лабиринту из улиц Google Maps, доставляя метку в начале места на карте.И все это расположено на кубе. Осторожно, можно залипнуть надолго!

Ядро

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

Интерактивный глобус

Еще один полезный пример — очень эффектная инфографика, показывающая динамику импорта и экспорта разных стран с 1982 по 2010 годы.

Кубический удар

Аэрохоккей с медведем. И добавить тут нечего.

Roll It

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

Ironbane MMO

Небольшая трехмерная MMO игра с забавным персонажем.

Цветок

Очень красивый эффект падающих с листьев дерева. Автор И-Вэнь Линь.

Вода WebGL

Удивительно реалистичный эффект воды, можно управлять шариком внутри бассейна, а также вращать всю сцену.Автор Эван Уоллес.

Жемчужный мальчик

Реалистичная вода и закат.

Научи меня летать

Симуляция полета странного персонажа между небоскребами.

Fizzy Cam

Можно управлять летящими квадратиками с помощью веб-камеры. Автор Тим Холман.

PS Поддержка WebGL браузерами на сайте Могу ли я использовать.

.

Введение в WebGL

Что такое WebGL?

Последнее обновление: 1.11.2015

WebGL представляет собой технологию, базирующуюся на OpenGL ES 2.0 и предназначенную для рисования и отображения интерактивной 2D- и 3D-графики в веб-браузерах. При этом для работы с данной технологией не требуются сторонние плагины или библиотеки. Вся работа веб-приложений с использованием WebGL использует некоторые элементы кода — шейдеры непосредственно на графических процессорах на видеокартах, благодаря чему разработчики могут получить доступ к дополнительным ресурсам компьютера, увеличить быстродействие.Таким образом, для создания приложений разработчики могут использовать стандартные для веб-среды технологии HTML / CSS / JavaScript и при этом также применять ускорение графики.

Если создание настольных приложений работающих с 2d и 3d-графикой, нередко ограничивается обслуживающей службой, то здесь главным ограничением является только поддержка браузером технологии WebGL. А сами веб-приложения, построенные с использованием данной платформы, будут доступны в любой точке земного шара при наличии сети вне зависимости от используемой платформы: то ли это десктопы с ОС Windows, Linux, Mac, то ли это смартфоны и планшеты, то ли это игровые консоли.

WebGL возник из экспериментов над Canvas 3D разработчиками сербского Владимира Вукичевича из компании Mozilla в 2006 году. Впечатление разработчики браузеров Opera и Mozilla стали создавать свои реализации WebGL. А была организована рабочая группа с участием надежных разработчиков браузеров Apple, Google, Mozilla, Opera для работы над спецификацией технологии. И в 3 марта 2011 года была представлена ​​спецификация WebGL 1.0.

браузеров Поддержка

В настоящий момент WebGL поддерживает следующие браузерами:

Десктопные браузеры

• Mozilla Firefox (с 4-й версии)

• Google Chrome (с 9-й версии)

• Safari (с 6-й версии, по умолчанию поддержка WebGL отключена)

• Opera (с 12-й версии, по умолчанию поддержка WebGL отключена)

• IE (с 11-й версии, для других версий можно использовать сторонними плагинами, например, IEWebGL)

Мобильные браузеры и платформы

• Android-браузер (поддерживает WebGL только на некоторых устройствах, например, на смартфонах Sony Ericsson Xperia и некоторых смартфонах Samsung)

• Opera Mobile (начинаю с 12-й версии и только для ОС Android)

• IOS

• Firefox для мобильных устройств

• Google Chrome для Android

Преимущества использования WebGL

• Кроссбраузерность и отсутствие привязки к определенной платформе.Windows, MacOS, Linux — все это не важно, главное, чтобы ваш браузер поддерживал WebGL

• Использование языка JavaScript, который достаточно распространен

• Автоматическое управление памятью. В отличие от OpenGL в WebGL не надо специального действия для выделения и очистки памяти

• Городской WebGL для рендеринга использует графический процессор на видеокарте (GPU), то есть для этой технологии характерна высокая производительность, которая сравнима с производственной нативных приложений.

.