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
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
|
---
title: Редактор шейдеров
slug: Tools/Shader_Editor
translation_of: Tools/Shader_Editor
---
<div>{{ToolsSidebar}}</div><p>Редактор шейдеров позволяет просматривать и редактировать вершинные и фрагментные шейдеры, используемые <a href="/en-US/docs/Web/WebGL">WebGL</a>.</p>
<p>{{EmbedYouTube("hnoKqFuJhu0")}}</p>
<p>WebGL - это программный интерфейс языка JavaScript, который позволяет отрисовывать интерактивную 3D- и 2D-графику в браузере без использования дополнительных плагинов. Для работы WebGL необходимо создать 2 программы, называемые "шейдерами", которые выполняются на определённой стадии работы <a href="https://www.opengl.org/wiki/Rendering_Pipeline_Overview">графического конвейера OpenGL</a>. Первым выполняеся <a href="https://www.opengl.org/wiki/Vertex_Shader">вершинный шейдер</a>, сообщающий координаты каждой геометрической вершины, которую следует отрисовать. После этого выполняется <a href="https://www.opengl.org/wiki/Fragment_Shader">фрагментный шейдер</a>, сообщающий цвет каждого отдельного пикселя, поступающего в отрисовку.</p>
<p>Для создания шейдеров применяется Шейдерный Язык OpenGL или же <a href="https://www.opengl.org/documentation/glsl/">GLSL</a>. Можно по-разному внедрять шейдеры на страницу для работы с WebGL: например, их можно "прохардкодить" в JavaScript-исходниках, или подключить в виде отдельных файлов, используя тег <script>, или же подгрузить с сервера в виде простого текста. Исполняемый JavaScript-код отправляет шейдерную программу через программный интерфейс в WebGL, где она компилируется и выполняется с помощью графического ускорителя.</p>
<p>С помощью Редактора шейдеров Вы можете изучать и редактировать исходники вершинных и фрагментных шейдеров.</p>
<p>Вот ещё одна демонстрация того, как Вы можете применять Редактор шейдеров при разработке сложных приложений (в данном случае пример создан на движке <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>):</p>
<p>{{EmbedYouTube("YBErisxQkPQ")}}</p>
<h2 id="Запуск_Редактора_шейдеров">Запуск Редактора шейдеров</h2>
<p>По умолчанию Редактор шейдеров отключён. Чтобы активировать его, откройте <a href="/ru/docs/Tools/Tools_Toolbox#Settings">Настройки инструментов разработчика</a> и поставьте галочку на пункте "Шейдеры" в разделе "Инструменты разработчика по умолчанию". Вы можете заметить, что в панели инструментов появился элемент "Шейдеры". Нажмите на нём для запуска Редактора шейдеров.</p>
<p>Сначала Вы увидите пустое окно с кнопкой, предлагающей обновить страницу:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6421/shader-editor-open.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p>Для начала откройте страницу, которая создает контекст WebGL и загружает в него программу. Приведенные ниже скриншоты взяты из демонстрации <a href="http://www.unrealengine.com/html5/">Unreal Engine</a>.</p>
<p>Перед Вами появится рабочее окно, разделённое на три части: список шейдерных программ GLSL (слева), вершинный шейдер текущей выбранной программы (по центру), а также фрагментный шейдер текущей выбранной программы (справа):</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6431/shader-editor-loaded.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<h2 id="Управление_программами">Управление программами</h2>
<p>Левая часть представляет список текущих шейдерных программ, используемых контекстом WebGL. При наведении курсора мыши на элемент списка, представляющий шейдерную программу, Вы увидите, что геометрические объекты, обрабатываемые данной программой, подсвечены красным цветом:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6427/shader-editor-highlight.png" style="display: block; margin-left: auto; margin-right: auto;">Если нажать на иконку глаза слева от названия программы, она будет отключена. Это полезно для концентрации на отдельных шейдерах или сокрытия пересекающихся геометрических фигур:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6429/shader-editor-disable.png" style="display: block; margin-left: auto; margin-right: auto;">При нажатии на элемент списка, представляющий шейдерную программу, откроются исходники вершинного и фрагментного шейдеров, составляющих её, и Вы сможете их редактировать.</p>
<h2 id="Редактирование_шейдеров">Редактирование шейдеров</h2>
<p>Средняя и правая часть рабочего окна представляют вершинный и фрагментный шейдеры выбранной шейдерной программы.</p>
<p>Вы можете отредактировать эти программы и просмотреть результат при следующей отрисовке контекста WebGL (например, при следующем кадре анимации). Например, Вы можете изменить цвета:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6433/shader-editor-edit-color.png" style="display: block; margin-left: auto; margin-right: auto;">Редактор подсвечивает синтаксические ошибки в Вашем коде:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6435/shader-editor-error.png" style="display: block; margin-left: auto; margin-right: auto;">Вы увидите дополнительную информацию о проблеме, если наведёте курсор на крестик в левой части строки с ошибкой:</p>
<p><img alt="" src="https://mdn.mozillademos.org/files/6437/shader-editor-error-info.png" style="display: block; margin-left: auto; margin-right: auto;"></p>
<p> </p>
<p> </p>
|
