From 074785cea106179cb3305637055ab0a009ca74f2 Mon Sep 17 00:00:00 2001 From: Peter Bengtsson Date: Tue, 8 Dec 2020 14:42:52 -0500 Subject: initial commit --- files/ru/web/api/webgl_api/tutorial/index.html | 39 ++++++++++++++++++++++++++ 1 file changed, 39 insertions(+) create mode 100644 files/ru/web/api/webgl_api/tutorial/index.html (limited to 'files/ru/web/api/webgl_api/tutorial/index.html') diff --git a/files/ru/web/api/webgl_api/tutorial/index.html b/files/ru/web/api/webgl_api/tutorial/index.html new file mode 100644 index 0000000000..6f689fa9c3 --- /dev/null +++ b/files/ru/web/api/webgl_api/tutorial/index.html @@ -0,0 +1,39 @@ +--- +title: WebGL tutorial +slug: Web/API/WebGL_API/Tutorial +tags: + - WebGL +translation_of: Web/API/WebGL_API/Tutorial +--- +
{{WebGLSidebar}}
+ +
+

WebGL позволяет использовать API, основанную на OpenGL ES 2.0  для осуществления 3D рендеринга в HTML {{HTMLElement("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 видео на поверхность вращающегося куба.
+
-- cgit v1.2.3-54-g00ecf