files/ru/web/api/webgl_api/tutorial/index.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
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>