WebGL урок

Этот урок описывает, как использовать элемент <canvas> для отрисовки графики WebGL, начиная с основ. Приведенные примеры должны дать вам четкое представление о том, что можно сделать с WebGL, и предоставят фрагменты кода, которые помогут вам начать создание собственного контента.

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

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

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

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

Добавление 2D-содержания в контекст WebGL

Как отображать простые плоские фигуры с помощью WebGL.

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

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

Анимация объектов с помощью WebGL

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

Создание 3D-объектов с помощью WebGL

Показывает, как создать и анимировать 3D-объект (в данном случае, куб).

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

Демонстрируется, как отображать текстуры на гранях объекта.

Освещение в WebGL

Как моделировать эффекты освещения в вашем контексте WebGL.

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

Показывает, как анимировать текстуры; в данном случае, отображая Ogg-видео на гранях вращающегося куба.