WebGL на примерах

• Далее

WebGL на примерах — это серия интерактивных примеров с краткими объяснениями, демонстрирующих концепции и возможности WebGL.

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

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

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

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

Обнаружение WebGL

Этот пример демонстрирует, как обнаружить контекст отрисовки WebGL и сообщить пользователю результат.

Очистка цветом

Как очистить контекст отрисовки сплошным цветом.

Очистка по клику

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

Простая анимация цвета

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

Маскирование цвета

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

Базовое вырезание

Как рисовать прямоугольники и квадраты с операциями вырезания.

Размер холста и WebGL

Пример исследует влияние задания (или не задания) размера холста его размерам в пикселях CSS, как он отображается в окне браузера.

Шаблон 1

Пример описывает повторяющиеся фрагменты кода, которые будут скрываться, а также определяет функцию JavaScript-утилиту для упрощения инициализации WebGL.

Анимация вырезания

Некоторая анимационная забава с операциями вырезания и очистки.

Падающие прямоугольники

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

Привет, GLSL

Очень простая программа шейдеров, которая рисует квадрат сплошного цвета.

Привет, атрибуты вершин

Комбинирование программирования шейдеров и взаимодействия с пользователем через атрибуты вершин.

Текстуры из кода

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

Видеотекстуры

Этот пример демонстрирует, как использовать видеофайлы в качестве текстур.

• Далее