We're looking for a user researcher to understand the needs of developers and designers. Is this you or someone you know? Check out the post: https://mzl.la/2IGzdXS

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

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
HoКак симулировать эффект света в контексте WebGL.
Анимирование текстур в WebGL
Как анимировать текстуры; здесь путем отображения Ogg видео на поверхность вращающегося куба.

Метки документа и участники

Метки: 
Внесли вклад в эту страницу: fenfil, fscholz
Обновлялась последний раз: fenfil,