WebGL tutorial

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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