initial commit

1 files changed, 39 insertions, 0 deletions

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
+---
+<div>{{WebGLSidebar}}</div>
+
+<div class="summary">
+<p><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">WebGL</a> позволяет использовать API, основанную на <a class="external" href="http://www.khronos.org/opengles/" title="http://www.khronos.org/opengles/">OpenGL ES</a> 2.0  для осуществления 3D рендеринга в HTML {{HTMLElement("canvas")}} в браузерах, которые его поддерживают без использования плагинов. WebGL программы состоят из программ, написанных на JavaScript, и специального кода шейдеров, который выполняется на видеокарте. WebGL элементы  могут использоваться с HTML элементами и скомпонованы с другими частями страницы или бэкграунда страницы.</p>
+</div>
+
+<p><span class="seoSummary">В этом руководстве с нуля рассказывается о том, как использовать элемент<code>&lt;canvas&gt;</code> для отрисовки WebGL. Предоставленные примеры помогут вам понять, как можно использовать WebGL, также вы сможете использовать код из примеров как сниппеты для ваших разработок.</span></p>
+
+<h2 id="Перед_тем_как_начать">Перед тем как начать</h2>
+
+<p>Использование элемента <code>&lt;canvas&gt;</code>  - это не сложно, но вы должны понимать основы <a href="/en-US/docs/Web/HTML" title="HTML">HTML</a> и <a href="/en-US/docs/Web/JavaScript" title="JavaScript">JavaScript</a>. <code>&lt;canvas&gt;</code> и WebGL не поддерживаются в некоторых старых браузерах, но поддерживаются в последних версиях всех основных. Чтобы рисовать графику на canvas нужно использовать объекты контекста JavaScript, который создает графику на лету.</p>
+
+<h2 id="В_этом_руководстве">В этом руководстве</h2>
+
+<dl>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL">Начало работы с WebGL</a></dt>
+ <dd>Как настроить WebGL контекст.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context">Добавление 2D контекста в WebGL контекст</a></dt>
+ <dd>Как визуализировать простые плоские фигуры используя WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL">Использование шейдеров для добавления цвета в WebGL</a></dt>
+ <dd>Демонстрация того, как добавить цвет фигурам используя шейдеры.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL">Анимирование объектов с WebGL</a></dt>
+ <dd>Как поворачивать и передвигать объекты для создания простых анимаций.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL">Создание 3D объектов с WebGL</a></dt>
+ <dd>Как создать и анимировать 3D объект (куб).</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL">Использование текстур в WebGL</a></dt>
+ <dd>Как перевести текстуру на поверхность объекта.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Lighting_in_WebGL">Освещение объектов в WebGL</a></dt>
+ <dd>Как симулировать эффект света в контексте WebGL.</dd>
+ <dt><a href="/en-US/docs/Web/API/WebGL_API/Tutorial/Animating_textures_in_WebGL">Анимирование текстур в WebGL</a></dt>
+ <dd>Как анимировать текстуры; здесь путем отображения Ogg видео на поверхность вращающегося куба.</dd>
+</dl>