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 видео на поверхность вращающегося куба.