WebGL tutorial

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

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

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

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

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

Начало работы с WebGL: Как настроить WebGL контекст.
Добавление 2D контекста в WebGL контекст: Как визуализировать простые плоские фигуры используя WebGL.
Использование шейдеров для добавления цвета в WebGL: Демонстрация того, как добавить цвет фигурам используя шейдеры.
Анимирование объектов с WebGL: Как поворачивать и передвигать объекты для создания простых анимаций.
Создание 3D объектов с WebGL: Как создать и анимировать 3D объект (куб).
Использование текстур в WebGL: Как перевести текстуру на поверхность объекта.
Освещение объектов в WebGL: Как симулировать эффект света в контексте WebGL.
Анимирование текстур в WebGL: Как анимировать текстуры; здесь путём отображения Ogg видео на поверхность вращающегося куба.