aboutsummaryrefslogtreecommitdiff
path: root/files/ru/web/api/webgl_api
diff options
context:
space:
mode:
authorAlexey Istomin <webistomin@gmail.com>2021-03-20 18:37:44 +0300
committerGitHub <noreply@github.com>2021-03-20 18:37:44 +0300
commit841aae260382e2bf5ebb44d765d8c7301d27caab (patch)
tree81a92c25f6dc02e5f119131785d721db79fc3455 /files/ru/web/api/webgl_api
parent730fea852ff827ca034fe17c84288c95d270ec92 (diff)
downloadtranslated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.gz
translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.tar.bz2
translated-content-841aae260382e2bf5ebb44d765d8c7301d27caab.zip
Restore "ё" letter in Russian translation (#239)
* docs(ru): restore ё letter * docs(ru): resolve conflicts * refactor(idea): remove ide folder
Diffstat (limited to 'files/ru/web/api/webgl_api')
-rw-r--r--files/ru/web/api/webgl_api/index.html6
-rw-r--r--files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html24
-rw-r--r--files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html2
-rw-r--r--files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html4
-rw-r--r--files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html24
-rw-r--r--files/ru/web/api/webgl_api/tutorial/index.html4
-rw-r--r--files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html16
-rw-r--r--files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html12
-rw-r--r--files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html16
-rw-r--r--files/ru/web/api/webgl_api/webgl_best_practices/index.html8
10 files changed, 58 insertions, 58 deletions
diff --git a/files/ru/web/api/webgl_api/index.html b/files/ru/web/api/webgl_api/index.html
index 6a35a2dda3..dc83c9b165 100644
--- a/files/ru/web/api/webgl_api/index.html
+++ b/files/ru/web/api/webgl_api/index.html
@@ -7,7 +7,7 @@ translation_of: Web/API/WebGL_API
---
<div>{{WebGLSidebar}}</div>
-<p class="summary">WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трехмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трехмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/html/canvas"><code> canvas</code></a> HTML5 .</p>
+<p class="summary">WebGL (Web Graphics Library) - программная библиотека для языка JavaScript предназначенная для визуализации интерактивной трёхмерной графики и двухмерной графики в пределах совместимости веб-браузера без использования плагинов. WebGL приносит в веб трёхмерную графику, вводя API, который построен на основе OpenGL ES 2.0, что позволяет его использовать в элементах <a href="/en-US/docs/HTML/Canvas" title="en-US/docs/html/canvas"><code> canvas</code></a> HTML5 .</p>
<p>Поддержка WebGL присутствует в <a href="/en-US/Firefox" title="Firefox 4 for developers">Firefox</a> 4+, <a href="http://www.google.com/chrome/" title="http://www.google.com/chrome/">Google Chrome</a> 9+, <a href="http://www.opera.com/" title="http://www.opera.com/">Opera</a> 12+, <a href="http://www.apple.com/safari/" title="http://www.apple.com/fr/safari/">Safari </a>5.1+ и <a href="http://windows.microsoft.com/en-us/internet-explorer/browser-ie" title="http://windows.microsoft.com/en-us/internet-explorer/download-ie">Internet Explorer</a> 11+. Однако помимо поддержки WebGL браузером, необходима также его поддержка графическим процессором клиента.</p>
@@ -51,11 +51,11 @@ translation_of: Web/API/WebGL_API
<dt><a class="external" href="http://www.khronos.org/webgl/" title="http://www.khronos.org/webgl/">Официальный сайт WebGL</a></dt>
<dd>Веб-сайт разработчиков WebGL - Khronos Group.</dd>
<dt><a class="external" href="http://learningwebgl.com/blog/" title="http://learningwebgl.com/blog/">Изучение WebGL</a></dt>
- <dd>Веб-сайт с уроками, посвященными использованию WebGL.</dd>
+ <dd>Веб-сайт с уроками, посвящёнными использованию WebGL.</dd>
<dt><a href="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/" title="http://www.html5rocks.com/en/tutorials/webgl/webgl_fundamentals/">Основы WebGL</a></dt>
<dd>Учебные материалы по основным возможностям WebGL.</dd>
<dt><a href="http://games.greggman.com/game/webgl-2d-matrices/">Матрицы в WebGL</a></dt>
- <dd>Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трехмерной графике.</dd>
+ <dd>Введение в использование матриц в двухмерной графике на WebGL. На этом ресурсе объясняется математическая основа перспективы в трёхмерной графике.</dd>
<dt><a class="external" href="http://learningwebgl.com/cookbook/index.php/" title="http://learningwebgl.com/cookbook/index.php/">Советы по использованию WebGL</a></dt>
<dd>Веб-сайт с советами по написанию кода на WebGL.</dd>
<dt><a class="external" href="http://code.google.com/p/ewgl-matrices/" title="http://code.google.com/p/ewgl-matrices/">ewgl-matrices</a></dt>
diff --git a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
index 55ea7cad8c..4bafecab6d 100644
--- a/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
+++ b/files/ru/web/api/webgl_api/tutorial/adding_2d_content_to_a_webgl_context/index.html
@@ -11,7 +11,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
<h2 id="Отрисовка_сцены">Отрисовка сцены</h2>
-<p>На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трехмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену,  и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.</p>
+<p>На данном этапе очень важно понять одну вещь: не смотря на то, что мы в этом примере отрисовываем двухмерный объект, мы по-прежнему отрисовываем его в трёхмерном пространстве. По существу, нам по-прежнему необходимо создать шейдеры, которые будут освещать нашу простую сцену,  и отрисовать наш объект. На данном шаге определим как квадрат будет освещаться.</p>
<h3 id="Инициализация_шейдеров">Инициализация шейдеров</h3>
@@ -44,11 +44,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
<p>Этой процедурой загружаются две шейдерные программы. Первая - фрагментный шейдер, загружается из элемента <a href="/en/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> с ID "shader-fs". Вторая - вершинный шейдер, загружается из элемента <a href="/en/HTML/Element/Script" title="En/HTML/Element/Script"><code>script</code></a> с ID "shader-vs". Мы рассмотрим функцию <code>getShader()</code> чуть ниже. Эта процедура фактически отвечает за извлечение шейдерных программ из DOM.</p>
-<p>Затем мы создаем шейдерную программу, вызывая функцию <code>createProgram()</code> объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра <code>LINK_STATUS</code> объекта <code>gl</code> для того, чтобы убедиться, что программа успешно скомпонована. Если это так, мы активируем новую шейдерную программу.</p>
+<p>Затем мы создаём шейдерную программу, вызывая функцию <code>createProgram()</code> объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра <code>LINK_STATUS</code> объекта <code>gl</code> для того, чтобы убедиться, что программа успешно скомпонована. Если это так, мы активируем новую шейдерную программу.</p>
<h3 id="Загрузка_шейдеров_из_DOM">Загрузка шейдеров из DOM</h3>
-<p>Функция <code>getShader()</code> получает из DOM шейдерную программу с определенным именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.</p>
+<p>Функция <code>getShader()</code> получает из DOM шейдерную программу с определённым именем, возвращая скомпилированную шейдерную программу вызывающему, или значение null, если шейдерная программа не может быть загружена или скомпилирована.</p>
<pre class="brush: js">function getShader(gl, id) {
var shaderScript, theSource, currentChild, shader;
@@ -82,7 +82,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
     return null;
  }</pre>
-<p>После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаем соответствующий тип шейдера из полученного исходного кода.</p>
+<p>После того, как код для шейдера считан, мы проверяем MIME тип шейдерного объекта, чтобы определить является он вершинным (MIME type "x-shader/x-vertex") или фрагментным (MIME type "x-shader/x-fragment") шейдером, а затем создаём соответствующий тип шейдера из полученного исходного кода.</p>
<pre class="brush: js"> gl.shaderSource(shader, theSource);
@@ -109,7 +109,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
<p>Каждый пиксель в полигоне называется <strong>фрагментом</strong> в языке GL. Фрагментные шейдеры необходимы для назначения цвета для каждого пикселя. В данном случае, мы просто назначаем белый цвет каждому пикселю.</p>
-<p><code>gl_FragColor</code> - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая ее значение назначаем цвет пикселям. Ниже приведен пример этого.</p>
+<p><code>gl_FragColor</code> - встроенная переменная GL, используемая для управления цветом фрагментов. Устанавливая её значение назначаем цвет пикселям. Ниже приведён пример этого.</p>
<pre class="brush: html">&lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
  void main(void) {
@@ -136,7 +136,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context
<h2 id="Создание_объекта">Создание объекта</h2>
-<p>Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это,  вызвав функцию <code>initBuffers().</code> По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трехмерных объектов.</p>
+<p>Перед тем, как мы отрисуем наш квадрат, нам необходимо создать буфер, который содержит его вершины. Мы сделаем это,  вызвав функцию <code>initBuffers().</code> По мере ознакомления с другими концепциями WebGL, эта функция будет усложняться при создании более сложных трёхмерных объектов.</p>
<pre class="brush: js">var horizAspect = 480.0/640.0;
@@ -155,9 +155,9 @@ function initBuffers() {
}
</pre>
-<p>В этом примере эта функция упрощена и дает оценить основную суть сцены. Она начинает работу с вызова метода <code>createBuffer()</code> объекта <code>gl</code> для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода <code>bindBuffer()</code>.</p>
+<p>В этом примере эта функция упрощена и даёт оценить основную суть сцены. Она начинает работу с вызова метода <code>createBuffer()</code> объекта <code>gl</code> для получения буфера, в котором мы будем хранить вершины. Затем он привязывается к контексту, вызовом метода <code>bindBuffer()</code>.</p>
-<p>После того, как мы это сделали, мы создаем JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передается в метод <code>bufferData()</code> объекта <code>gl</code> для назначения вершин объекту.</p>
+<p>После того, как мы это сделали, мы создаём JavaScript массив, содержащий координаты для каждой вершины квадрата. Затем этот массив преобразуется в массив вещественных чисел WebGL и передаётся в метод <code>bufferData()</code> объекта <code>gl</code> для назначения вершин объекту.</p>
<h2 id="Отрисовка_сцены_2">Отрисовка сцены</h2>
@@ -180,17 +180,17 @@ function initBuffers() {
<p>Первый шаг - очистка цветом фона сцены контекста. Затем мы устанавливаем перспективу камеры. Мы устанавливаем угол обзора в 45°, с соотношением ширины к высоте равным 640/480 (размеры нашего объекта canvas). Мы также определяем, что мы хотим видеть отрисованными объекты на расстоянии от 0.1 до 100 единиц от камеры.</p>
-<p>Затем мы устанавливаем позицию квадрата, загружая определенную позицию и размещая ее от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод <code>drawArrays()</code>.</p>
+<p>Затем мы устанавливаем позицию квадрата, загружая определённую позицию и размещая её от камеры на 6 единиц. После этого, мы привязываем буфер, содержащий вершины квадрата к контексту, настраиваем его, и отрисовываем объект, вызывая метод <code>drawArrays()</code>.</p>
-<p>Вы можете <a href="/samples/webgl/sample2" title="https://developer.mozilla.org/samples/webgl/sample2">посмотреть как это работает щелкнув по этой ссылке</a>. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.</p>
+<p>Вы можете <a href="/samples/webgl/sample2" title="https://developer.mozilla.org/samples/webgl/sample2">посмотреть как это работает щёлкнув по этой ссылке</a>. Но это только в том случае, если используемый браузер осуществляет поддержку WebGL.</p>
<h2 id="Операции_над_матрицами">Операции над матрицами</h2>
<p>Операции над матрицами достаточно сложны. Никому бы не хотелось самому писать весь код для работы с ними. К счастью, есть <a class="external" href="http://sylvester.jcoglan.com/" title="http://sylvester.jcoglan.com/">Sylvester</a> - очень удобная библиотека для выполнения операций над векторами и матрицами, написанная на JavaScript.</p>
-<p>Файл <code>glUtils.js</code>, используемый в этом примере, используется большинством примеров на WebGL, размещенных в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.</p>
+<p>Файл <code>glUtils.js</code>, используемый в этом примере, используется большинством примеров на WebGL, размещённых в сети интернет. Никто не знает точно откуда он появился. Он просто используется Sylvester и он даже пополняется методами для построения специальных типов матриц, а также вывода HTML для их отображения.</p>
-<p>Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определенных задач. Пояснения относительно того, что делает каждая из приведенных функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.</p>
+<p>Также, этот пример определяет несколько полезных процедур взаимодействия с этими библиотеками для выполнения определённых задач. Пояснения относительно того, что делает каждая из приведённых функций, выходят за рамки этого примера, но в сети есть много хороших материалов об операциях над матрицами. Чуть {{ anch("ниже") }} есть список некоторых из них.</p>
<pre class="brush: js">function loadIdentity() {
mvMatrix = Matrix.I(4);
diff --git a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
index 919d3fccff..af607e92cf 100644
--- a/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
+++ b/files/ru/web/api/webgl_api/tutorial/animating_objects_with_webgl/index.html
@@ -18,7 +18,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL
<pre class="brush: js">var squareRotation = 0.0;
</pre>
-<p>Теперь нам надо изменить процедуру <code>drawScene()</code> и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального расчета матрицы положения для квадрата мы применяем условия поворота следующим образом:</p>
+<p>Теперь нам надо изменить процедуру <code>drawScene()</code> и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального расчёта матрицы положения для квадрата мы применяем условия поворота следующим образом:</p>
<pre class="brush: js">mvPushMatrix();
mvRotate(squareRotation, [1, 0, 1]);
diff --git a/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
index 0684b89016..f9390f7fe2 100644
--- a/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
+++ b/files/ru/web/api/webgl_api/tutorial/creating_3d_objects_using_webgl/index.html
@@ -9,9 +9,9 @@ original_slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_
---
<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL", "Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL")}}</p>
-<p>Давайте поместим наш квадрат в трехмерное пространство, добавив еще 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
+<p>Давайте поместим наш квадрат в трёхмерное пространство, добавив ещё 5 граней, чтобы получить куб. Чтобы сделать это наиболее продуктивно, вместо рисования вершин непосредственным вызовом метода {{domxref("WebGLRenderingContext.drawArrays()", "gl.drawArrays()")}} , мы будем использовать массив вершин в виде таблицы и ссылаться на каждую вершину в этой таблице, чтобы определить положение каждой вершины грани, вызывая {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}.</p>
-<p>Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трем граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трем граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трех разных цветов, по одной для каждой грани.</p>
+<p>Заметим: чтобы определить каждую грань необходимо четыре вершины, но каждая вершина принадлежит трём граням. Мы можем передавать намного меньше данных, построив список всех 24-х вершин, затем ссылаться на каждую из них в этом списке по её индексу, вместо того чтобы передавать все множество вершин. Если вы удивлены, почему нам нужны 24 вершины, а не только 8, так это потому, что каждое ребро принадлежит трём граням разных цветов, и каждая отдельная вершина должна иметь конкретный отдельный цвет - поэтому мы создадим 3 копии каждой вершины трёх разных цветов, по одной для каждой грани.</p>
<h2 id="Определение_позиций_вершин_куба">Определение позиций вершин куба</h2>
diff --git a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
index 0e50af82fa..c42db89750 100644
--- a/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
+++ b/files/ru/web/api/webgl_api/tutorial/getting_started_with_webgl/index.html
@@ -7,9 +7,9 @@ translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
---
<p>{{WebGLSidebar("Tutorial")}} {{Next("Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context")}}</p>
-<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, для визуализации трехмерной графики без использования плагинов в HTML элементе <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a> в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.</p>
+<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, для визуализации трёхмерной графики без использования плагинов в HTML элементе <a class="internal" href="/en/HTML/Canvas" title="en/HTML/Canvas"><code>canvas</code></a> в браузерах, которые осуществляют его поддержку. WebGL программы состоят из кода управления, написанном на JavaScript и кода специальных эффектов (шейдерного кода), который выполняется на графическом процессоре. WebGL элементы могут быть смешаны с другими HTML элементами и собраны с другими частями веб-страницы или фоном веб-страницы.</p>
-<p>Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трехмерной графики. Данная статья не обучит вас OpenGL.</p>
+<p>Эта статья знакомит вас с основами использования WebGL. Предполагается, что вы уже знакомы с математическими основами трёхмерной графики. Данная статья не обучит вас OpenGL.</p>
<h2 id="Подготовка_к_визуализации_в_3D">Подготовка к визуализации в 3D</h2>
@@ -24,7 +24,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Getting_started_with_WebGL
<h3 id="Подготовка_контекста_WebGL">Подготовка контекста WebGL</h3>
-<p>Функция <code>start()</code>, в нашем JavaScript коде вызывается после загрузки документа. Ее назначение - настройка контекста WebGL и начать отрисовку содержимого.</p>
+<p>Функция <code>start()</code>, в нашем JavaScript коде вызывается после загрузки документа. Её назначение - настройка контекста WebGL и начать отрисовку содержимого.</p>
<pre class="brush: js">var gl; // глобальная переменная для контекста WebGL
@@ -36,7 +36,7 @@ function start() {
// продолжать только если WebGL доступен и работает
if (gl) {
- gl.clearColor(0.0, 0.0, 0.0, 1.0); // установить в качестве цвета очистки буфера цвета черный, полная непрозрачность
+ gl.clearColor(0.0, 0.0, 0.0, 1.0); // установить в качестве цвета очистки буфера цвета чёрный, полная непрозрачность
gl.enable(gl.DEPTH_TEST); // включает использование буфера глубины
gl.depthFunc(gl.LEQUAL); // определяет работу буфера глубины: более ближние объекты перекрывают дальние
gl.clear(gl.COLOR_BUFFER_BIT|gl.DEPTH_BUFFER_BIT); // очистить буфер цвета и буфер глубины.
@@ -44,13 +44,13 @@ function start() {
}
</pre>
-<p>Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем ее в переменную <code>canvas</code>. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить ее в локальной переменной или в поле объекта.</p>
+<p>Первое, что мы здесь делаем - получаем ссылку на элемент canvas, помещаем её в переменную <code>canvas</code>. Очевидно, что если вам не требуется многократно получать ссылку на canvas, вы должны избежать сохранения этого значения глобально, а только сохранить её в локальной переменной или в поле объекта.</p>
-<p>Как только мы получили ссылку на canvas, мы вызываем функцию <code>initWebGL()</code>; Эту функцию мы определяем незамедлительно, ее работа - инициализировать контекст WebGL.</p>
+<p>Как только мы получили ссылку на canvas, мы вызываем функцию <code>initWebGL()</code>; Эту функцию мы определяем незамедлительно, её работа - инициализировать контекст WebGL.</p>
-<p>Если контекст успешно инициализирован, в <code>gl</code> будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на черный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.</p>
+<p>Если контекст успешно инициализирован, в <code>gl</code> будет содержаться ссылка на него. В этом случае, мы устанавливаем цвет очистки буфера цвета (цвет фона) на чёрный, затем очищаем контекст этим цветом. После этого, контекст конфигурируется параметрами настройки. В данном случае, мы включаем буфер глубины и определяем, что более близкие объекты будут перекрывать более дальние.</p>
-<p>Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трехмерных объектов.</p>
+<p>Всё вышеперечисленное необходимо сделать только для первоначальной инициализации. Чуть позже мы увидим работу по визуализации трёхмерных объектов.</p>
<h3 id="Создание_контекста_WebGL">Создание контекста WebGL</h3>
@@ -80,19 +80,19 @@ function start() {
<div class="note"><strong>Обратите внимание:</strong> Контекст, именуемый как "experimental-webgl" - это временное имя для контекста, используемое на время процесса разработки спецификации. После того, как спецификация будет полностью разработана будет использоваться только имя контекста "webgl".</div>
-<p>На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой черный блок, готовый к заполнению контентом.</p>
+<p>На данном этапе этого кода достаточно, чтобы успешно инициализировать контекст WebGL, и вы увидите пустой чёрный блок, готовый к заполнению контентом.</p>
-<p>Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведенного выше кода, щелкнув по этой <a href="/samples/webgl/sample1/index.html" title="https://developer.mozilla.org/samples/webgl/sample1/index.html">ссылке</a>.</p>
+<p>Если ваш браузер поддерживает WebGL, то вы можете посмотреть результат выполнения приведённого выше кода, щёлкнув по этой <a href="/samples/webgl/sample1/index.html" title="https://developer.mozilla.org/samples/webgl/sample1/index.html">ссылке</a>.</p>
<h3 id="Изменение_размера_контекста_WebGL">Изменение размера контекста WebGL</h3>
-<p>Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путем задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL <code>viewport()</code>, чтобы подтвердить изменения.</p>
+<p>Новый контекст WebGL будет иметь возможность задания размеров области отображения в момент получения контекста путём задания высоты и ширины элемента canvas, без использования CSS. Редактирование стиля элемента canvas будет изменять его отображаемый размер, без изменения размеров области отрисовки. Редактирование атрибутов ширины и высоты элемента canvas после создания контекста не будет также изменять число пикселей для отрисовки. Чтобы изменить размер области отрисовки, с которой WebGL производит работу, например, когда пользователь изменяет размер окна на весь экран или когда вам необходимо менять настройки графики в самом приложении, вам необходимо вызвать контекстную функцию WebGL <code>viewport()</code>, чтобы подтвердить изменения.</p>
<p>Чтобы изменить размер области отрисовки контекста WebGL с переменными <code>gl</code> и <code>canvas</code>, использующимися в примере выше:</p>
<pre class="brush: js">gl.viewport(0, 0, canvas.width, canvas.height);</pre>
-<p>Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьезным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (<abbr style="line-height: 24px;" title='"Multisample'>MSAA) и </abbr>на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.</p>
+<p>Элемент canvas будет изменять размер, в случае, если его отрисовать с другими размерами области отрисовки, чем те, что указаны в его стилях CSS, согласно которым он занимает место на экране. Изменение размера с помощью CSS наиболее полезно для сохранения ресурсов, отрисовывая с низким разрешением и позволяя браузеру растягивать полученный результат; сжимать возможно при использовании эффекта избыточной выборки сглаживания ( super sample antialiasing - SSAA) (приводит к менее приемлемым результатам и серьёзным потерям производительности). В большинстве случаев лучше полагаться на множественную выборку сглаживания (<abbr style="line-height: 24px;" title='"Multisample'>MSAA) и </abbr>на реализацию алгоритмов фильтрации текстур, которые поддерживаются браузером пользователя, чем делать то же самое посредством грубой силы и надеяться, что алгоритм масштабирования изображений, используемый браузером, выдаст красивый результат.</p>
<h3 id="Смотрите_также">Смотрите также</h3>
diff --git a/files/ru/web/api/webgl_api/tutorial/index.html b/files/ru/web/api/webgl_api/tutorial/index.html
index 9b0f0f75e6..88f55bf361 100644
--- a/files/ru/web/api/webgl_api/tutorial/index.html
+++ b/files/ru/web/api/webgl_api/tutorial/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/WebGL_API/Tutorial
<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>
+<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>
@@ -35,5 +35,5 @@ translation_of: Web/API/WebGL_API/Tutorial
<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>
+ <dd>Как анимировать текстуры; здесь путём отображения Ogg видео на поверхность вращающегося куба.</dd>
</dl>
diff --git a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
index 57c1b21e35..f1645ba200 100644
--- a/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
+++ b/files/ru/web/api/webgl_api/tutorial/lighting_in_webgl/index.html
@@ -15,7 +15,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
<p><strong>Окружающий свет</strong> освещает всю сцену. Он не направленный и освещает все грани всех объектов одинаково, не зависимо от ориентации граней.</p>
-<p><strong>Направленный свет</strong> исходит из определенного направления. Этот свет приходит от настолько удаленного источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.</p>
+<p><strong>Направленный свет</strong> исходит из определённого направления. Этот свет приходит от настолько удалённого источника, что все фотоны летят параллельно друг другу. К примеру, солнечный свет можно считать.</p>
<p><strong>Точечный свет</strong> исходит из одной точки во всех направлениях. В реальном мире многие источники освещения являются точечными, например электрическая лампочка.</p>
@@ -28,11 +28,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
<li>Нам нужно знать направление, в котором распространяется свет. Оно определяется <strong>вектором направления</strong>.</li>
</ol>
-<p>Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учетом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.</p>
+<p>Затем мы обновим вершинный шейдер, чтобы скорректировать цвет каждой вершины в зависимости от окружающего и направленного освещения с учётом угла падения на грань. Мы увидим, как это делается, когда посмотрим на код шейдера.</p>
<h2 id="Построение_нормали_для_вершин">Построение нормали для вершин</h2>
-<p>Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчет нормалей будет более затратным.</p>
+<p>Сначала нам нужно создать массив нормалей для всех вершин, из которых состоит наш куб. Это будет просто, потому что куб очень простой объект. Очевидно, что для более сложных объектов расчёт нормалей будет более затратным.</p>
<pre class="brush: js">  const normalBuffer = gl.createBuffer();
  gl.bindBuffer(gl.ARRAY_BUFFER, normalBuffer);
@@ -89,7 +89,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
</pre>
-<p>Код уже должен выглядеть узнаваемо. Мы создаем новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи <code>bufferData()</code>.</p>
+<p>Код уже должен выглядеть узнаваемо. Мы создаём новый буфер, связываем его с рабочим буфером и записываем в него массив нормалей к вершинам при помощи <code>bufferData()</code>.</p>
<p>Затем добавим в <code>drawScene()</code> код, который свяжет массив нормалей с атрибутом шейдера. Таким образом шейдер сможет получить к нему доступ:</p>
@@ -114,7 +114,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
  }
</pre>
-<p>В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер <strong>матрицу нормалей</strong>, которая используется для трансформации нормалей при расчете ориентации куба относительно направления на источник света:</p>
+<p>В конце нужно обновить код, который строит матрицы для uniform-переменных, чтобы создать и передать в шейдер <strong>матрицу нормалей</strong>, которая используется для трансформации нормалей при расчёте ориентации куба относительно направления на источник света:</p>
<pre class="brush: js">  const normalMatrix = mat4.create();
  mat4.invert(normalMatrix, modelViewMatrix);
@@ -166,15 +166,15 @@ translation_of: Web/API/WebGL_API/Tutorial/Lighting_in_WebGL
  `;
</pre>
-<p>После расчета позиции вершины мы передаем координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчет освещения вершины.</p>
+<p>После расчёта позиции вершины мы передаём координаты текселя ({{Glossary("texel")}}), соответствующего вершине, во фрагментный шейдер, и начинаем расчёт освещения вершины.</p>
<p>Сначала нужно преобразовать нормаль, основываясь на текущей ориентации куба - умножив нормаль вершины на матрицу нормалей. Затем мы можем рассчитать количество света от направленного источника, которое приходит в вершину, посчитав скалярное произведение преобразованной нормали и вектора направления (направления, с которого приходит свет). Если скалярное произведение меньше нуля, то мы принимаем его за ноль, потому что количество света не может быть меньше 0.</p>
-<p>После расчета количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.</p>
+<p>После расчёта количества падающего направленного света мы можем посчитать финальное освещение, сложив окружающий свет и произведение количества направленного света на его цвет. В результате получается значение RGB, которое используется фрагментным шейдером для изменения цвета каждого пикселя.</p>
<h3 id="Фрагментный_шейдер">Фрагментный шейдер</h3>
-<p>Фрагментный шейдер должен быть обновлен таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:</p>
+<p>Фрагментный шейдер должен быть обновлён таким образом, чтобы он учитывал в значение освещения, рассчитанное в вершинном шейдере:</p>
<pre class="brush: js">  const fsSource = `
    varying highp vec2 vTextureCoord;
diff --git a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
index 0c01467385..1e3a2c7358 100644
--- a/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
+++ b/files/ru/web/api/webgl_api/tutorial/using_shaders_to_apply_color_in_webgl/index.html
@@ -11,14 +11,14 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
<h2 id="Задание_цвета_вершинам">Задание цвета вершинам</h2>
-<p>В GL, объекты строятся с использованием наборов вершин, для каждой из которых задается положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определенных цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.</p>
+<p>В GL, объекты строятся с использованием наборов вершин, для каждой из которых задаётся положение в пространстве и цвет. По умолчанию, цвета всех остальных пикселей (и все их другие атрибуты, включая положение в пространстве) вычисляются с использованием линейной интерполяции, автоматически создавая плавный градиент. В прошлый раз наш вершинный шейдер не задавал определённых цветов вершинам, а фрагментный шейдер назначил фиксированный белый цвет каждому пикселю, поэтому квадрат целиком был отрисован белым цветом.</p>
-<p>Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зеленого и белый. Первое, что необходимо сделать - назначить эти цвета четырем вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию <code>initBuffers()</code>:</p>
+<p>Предположим, что мы хотим отрисовать градиент, в котором каждый угол квадрата разного цвета: красного, синего, зелёного и белый. Первое, что необходимо сделать - назначить эти цвета четырём вершинам. Чтобы сделать это, нам сначала необходимо создать массив цветов вершин, а затем сохранить его в WebGL буфер. Мы сделаем это, добавив следующий код в нашу функцию <code>initBuffers()</code>:</p>
<pre class="brush: js"> var colors = [
1.0, 1.0, 1.0, 1.0, // белый
1.0, 0.0, 0.0, 1.0, // красный
- 0.0, 1.0, 0.0, 1.0, // зеленый
+ 0.0, 1.0, 0.0, 1.0, // зелёный
0.0, 0.0, 1.0, 1.0 // синий
];
@@ -48,11 +48,11 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
&lt;/script&gt;
</pre>
-<p>Ключевым отличием здесь является то, что для каждой вершины, мы задаем цвет на соответствующее значение из массива цвета.</p>
+<p>Ключевым отличием здесь является то, что для каждой вершины, мы задаём цвет на соответствующее значение из массива цвета.</p>
<h2 id="Окраска_фрагментов">Окраска фрагментов</h2>
-<p>Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведен его код:</p>
+<p>Чтобы напомнить, как фрагментный шейдер выглядел ранее, ниже приведён его код:</p>
<pre class="brush: html"> &lt;script id="shader-fs" type="x-shader/x-fragment"&gt;
      void main(void) {
@@ -88,7 +88,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL
gl.vertexAttribPointer(vertexColorAttribute, 4, gl.FLOAT, false, 0, 0);
</pre>
-<p>На этом этапе, вы можете посмотреть <a href="/samples/webgl/sample3/index.html" title="https://developer.mozilla.org/samples/webgl/sample3/index.html">результат работы написанного кода</a>, если используете браузер, поддерживающий WebGL. Вы увидите нечто похожее на следующий рисунок (расположенный по центру в большом черном поле):</p>
+<p>На этом этапе, вы можете посмотреть <a href="/samples/webgl/sample3/index.html" title="https://developer.mozilla.org/samples/webgl/sample3/index.html">результат работы написанного кода</a>, если используете браузер, поддерживающий WebGL. Вы увидите нечто похожее на следующий рисунок (расположенный по центру в большом чёрном поле):</p>
<p><img alt="screenshot.png" class="default internal" src="/@api/deki/files/4081/=screenshot.png"></p>
diff --git a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
index 706bf00786..5d3b79d1bc 100644
--- a/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
+++ b/files/ru/web/api/webgl_api/tutorial/using_textures_in_webgl/index.html
@@ -5,7 +5,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Using_textures_in_WebGL
---
<p>{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}</p>
-<p>Сейчас наша программа рисует вращающийся объемный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.</p>
+<p>Сейчас наша программа рисует вращающийся объёмный куб - давайте натянем на него текстуру вместо заливки граней одним цветом.</p>
<h2 id="Загрузка_текстур">Загрузка текстур</h2>
@@ -52,7 +52,7 @@ function loadTexture(gl, url) {
// и к не имеющим размер степени 2, поэтому проверяем, что изображение
  // имеет размер степени 2 в обеих измерениях.
if (isPowerOf2(image.width) &amp;&amp; isPowerOf2(image.height)) {
- // Размер соответствует степени 2. Создаем MIP'ы.
+ // Размер соответствует степени 2. Создаём MIP'ы.
gl.generateMipmap(gl.TEXTURE_2D);
} else {
// Размер не соответствует степени 2.
@@ -71,15 +71,15 @@ function isPowerOf2(value) {
return (value &amp; (value - 1)) == 0;
}</code></pre>
-<p>Функция <code>loadTexture()</code> начинается с создания объекта WebGL <code>texture</code> вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создает текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.</p>
+<p>Функция <code>loadTexture()</code> начинается с создания объекта WebGL <code>texture</code> вызовом функции {{domxref("WebGLRenderingContext.createTexture()", "createTexture()")}}. Сначала функция создаёт текстуру из единственного голубого пикселя, используя {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}. Таким образом текстура может быть использована сразу (как сплошной голубой цвет) при том, что загрузка изображения может занять некоторое время.</p>
-<p>Чтобы загрузить текстуру из файла изображения, функция создает объект <code>Image</code> и присваивает атрибуту <code>src</code> адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие <code>image.onload</code>,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.</p>
+<p>Чтобы загрузить текстуру из файла изображения, функция создаёт объект <code>Image</code> и присваивает атрибуту <code>src</code> адрес, с которого мы хотим загрузить текстуру. Функция, которую мы назначили на событие <code>image.onload</code>,будет вызвана после завершения загрузки изображения. В этот момент мы вызываем {{domxref("WebGLRenderingContext.texImage2D()", "texImage2D()")}}, используя загруженное изображение как исходник для текстуры. Затем мы устанавливаем фильтрацию и натяжение, исходя из того, является ли размер изображения степенью 2 или нет.</p>
<p>В WebGL1 изображения размера, не являющегося степенью 2, могут использовать только <code>NEAREST</code> или <code>LINEAR</code> фильтрацию, и для них нельзя создать mipmap. Также для таких изображений мы должны установить натяжение <code>CLAMP_TO_EDGE</code>. С другой стороны, если изображение имеет размер степени 2 по обеим осям, WebGL может производить более качественную фильтрацию, использовать mipmap и режимы натяжения <code>REPEAT</code> или <code>MIRRORED_REPEAT</code>.</p>
<p>Примером повторяющейся текстуры является изображение нескольких кирпичей, которое размножается для покрытия поверхности и создания изображения кирпичной стены.</p>
-<p>Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придется контролировать, как именно устройство будет обрабатывать текстуру.</p>
+<p>Мипмаппинг и UV-повторение могут быть отключены с помощью {{domxref("WebGLRenderingContext.texParameter()", "texParameteri()")}}. Так вы сможете использовать текстуры с размером, не являющимся степенью 2 (NPOT - non-power-of-two), ценой отключения мипмаппинга, UV-натяжения, UV-повторения, и вам самому придётся контролировать, как именно устройство будет обрабатывать текстуру.</p>
<pre><code>// также разрешено gl.NEAREST вместо gl.LINEAR, но не mipmap.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
@@ -88,7 +88,7 @@ gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
// Не допускаем повторения по t-координате.
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);</code></pre>
-<p>Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный черный цвет <code>rgba(0,0,0,0)</code>.</p>
+<p>Повторим, что с этими параметрами совместимые WebGL устройства будут допускать использование текстур с любым разрешением (вплоть до максимального). Без подобной настройки WebGL потерпит неудачу при загрузке NPOT-текстур, и вернёт прозрачный чёрный цвет <code>rgba(0,0,0,0)</code>.</p>
<p>Для загрузки изображения добавим вызов <code>loadTexture()</code> в функцию <code>main()</code>. Код можно разместить после вызова <code>initBuffers(gl)</code>.</p>
@@ -145,7 +145,7 @@ const texture = loadTexture(gl, 'cubetexture.png');</code></pre>
indices: indexBuffer,
};</code></pre>
-<p>Сначала мы создаем WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.</p>
+<p>Сначала мы создаём WebGL буфер, в котором сохраняем координаты текстуры для каждой грани, затем связываем его с массивом, в который будем записывать значения.</p>
<p>Массив <code>textureCoordinates</code> определяет координаты текстуры, соответствующие каждой вершине каждой грани. Заметьте, что координаты текстуры лежат в промежутке между 0.0 и 1.0. Размерность текстуры нормализуется в пределах между 0.0 и 1.0, независимо от реального размера изображения.</p>
@@ -174,7 +174,7 @@ const texture = loadTexture(gl, 'cubetexture.png');</code></pre>
}
`;</code></pre>
-<p>Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаем их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.</p>
+<p>Ключевое изменение в том, что вместо получения цвета вершины, мы получаем координаты текстуры и передаём их в вершинный шейдер, сообщая положение точки внутри текстуры, которая соответствует вершине.</p>
<h3 id="Фрагментный_шейдер">Фрагментный шейдер</h3>
diff --git a/files/ru/web/api/webgl_api/webgl_best_practices/index.html b/files/ru/web/api/webgl_api/webgl_best_practices/index.html
index 64dee04e13..eb5aef450a 100644
--- a/files/ru/web/api/webgl_api/webgl_best_practices/index.html
+++ b/files/ru/web/api/webgl_api/webgl_best_practices/index.html
@@ -10,9 +10,9 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices
<h2 id="Чего_следует_избегать">Чего следует избегать</h2>
<ul>
- <li>Убедитесь, что ваше приложение не выдает какие-либо ошибки WebGL, возвращаемые функцией <code>getError(). В Firefox при каждой ошибке (до определенного предела) или при любой другой проблеме в работе WebGL выводится JavaScript предупреждение с подробным описанием. Вам же не хочется, что бы ваше приложение выдавало множество ошибок в консоль, не так ли?</code></li>
+ <li>Убедитесь, что ваше приложение не выдаёт какие-либо ошибки WebGL, возвращаемые функцией <code>getError(). В Firefox при каждой ошибке (до определённого предела) или при любой другой проблеме в работе WebGL выводится JavaScript предупреждение с подробным описанием. Вам же не хочется, что бы ваше приложение выдавало множество ошибок в консоль, не так ли?</code></li>
<li>Не следует использовать <code>#ifdef GL_ES в шейдерах WebGL. Несмотря на то что в некоторых ранних примерах используются эти директивы, это не обязательно в том случае, если проверяемое условие всегда истинно.</code></li>
- <li>Использование высокой точности (<code>highp</code> precision) во фрагментных шейдерах может приводить к несовместимости вашего приложения с некоторыми устаревшими мобильными устройствами. Вы можете использовать среднюю точность (<code>mediump), но помните, что это может привести к некорректному результату отрисовки из-за потери данных на большинстве мобильных устройств, причем этот некорректный результат не будет заметен на обычном компьютере. В общем, только использование высокой точности (highp) в вершинном и фрагментном шейдерах является более надежными решением, если нет возможности тщательно проверить работу шейдеров на различных платформах. В Firefox версии 11 и выше реализована функция WebGL getShaderPrecisionFormat(), которая позволяет проверить, поддерживается ли высокая точность и, более того, запросить реальную точность всех поддерживаемых квалификаторов точности. </code></li>
+ <li>Использование высокой точности (<code>highp</code> precision) во фрагментных шейдерах может приводить к несовместимости вашего приложения с некоторыми устаревшими мобильными устройствами. Вы можете использовать среднюю точность (<code>mediump), но помните, что это может привести к некорректному результату отрисовки из-за потери данных на большинстве мобильных устройств, причём этот некорректный результат не будет заметен на обычном компьютере. В общем, только использование высокой точности (highp) в вершинном и фрагментном шейдерах является более надёжными решением, если нет возможности тщательно проверить работу шейдеров на различных платформах. В Firefox версии 11 и выше реализована функция WebGL getShaderPrecisionFormat(), которая позволяет проверить, поддерживается ли высокая точность и, более того, запросить реальную точность всех поддерживаемых квалификаторов точности. </code></li>
</ul>
<h2 id="О_чем_следует_помнить.">О чем следует помнить.</h2>
@@ -22,7 +22,7 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices
<li>В частности, использование текстур в вершинном шейдере возможно только если значение <code>webgl.getParameter(webgl.MAX_VERTEX_TEXTURE_IMAGE_UNITS) больше ноля. Как правило, эта возможность не поддерживается на текущих мобильных устройствах.</code></li>
<li>Доступность большинства расширений WebGL зависит от клиента. Если это возможно, проектируйте приложение так, чтобы оно оставалось работоспособным даже в случае, когда используемое расширение недоступно. В Firefox версии 10 и выше есть настройка<code> webgl.disable-extensions, позволяющая сымитировать отсутствие всех расширений для проверки переносимости приложения.</code></li>
<li>Рендеринг в floating-point текстуру может не выполняться даже если расширение <code>OES_texture_float поддерживается. Обычно это случается на современных мобильных устройствах. Проверить эту возможность можно с помощью функции WebGL checkFramebufferStatus().</code></li>
- <li>Вы можете выполнять отрисовку на холсте, реальные размеры которого отличается от значений, определенных в таблице стилей. При проблемах с производительностью рассмотрите возможность рендеринга в более низком разрешении. (<em>Уменьшение области рендеринга ускорит обработку пиксельных шейдеров, например, эффектов постобработки</em>, <em>однако, на скорость работы вершинных шейдеров это не повлияет.</em> <span class="forum_post_content med1" style="word-wrap: break-word;"><span class="ln_height" id="post_text_1166974"><em>прим. перев.).</em></span></span></li>
+ <li>Вы можете выполнять отрисовку на холсте, реальные размеры которого отличается от значений, определённых в таблице стилей. При проблемах с производительностью рассмотрите возможность рендеринга в более низком разрешении. (<em>Уменьшение области рендеринга ускорит обработку пиксельных шейдеров, например, эффектов постобработки</em>, <em>однако, на скорость работы вершинных шейдеров это не повлияет.</em> <span class="forum_post_content med1" style="word-wrap: break-word;"><span class="ln_height" id="post_text_1166974"><em>прим. перев.).</em></span></span></li>
</ul>
<h2 id="Общие_советы_по_повышению_производительности">Общие советы по повышению производительности</h2>
@@ -30,7 +30,7 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices
<ul>
<li>Все, что требует синхронизации ЦП и ГП потенциально приводит в уменьшению производительности. Поэтому избегайте в цикле отрисовки следующих вызовов функций WebGL: <code>getError()</code>, <code>readPixels()</code> и <code>finish()</code>. Вызовы функций, получающих значения, такие как <code>getParameter()</code> и <code>getUniformLocation() тоже должны рассматриваться как медленные и их значения следует сохраняться в переменных JavaScript.</code></li>
<li>Несколько больших операций отрисовки выполняются быстрее, чем много мелких. Если вам нужно нарисовать 1000 спрайтов, попробуйте реализовать это одним вызовом функции<code> drawArrays()</code> или <code>drawElements(). Вы также можете использовать вырожденные (плоские) треугольники для рисования нескольких объектов за один вызов drawArrays().</code></li>
- <li>Уменьшение переключений состояний также увеличивает производительность. В частности, если есть возможность упаковать несколько изображений в одну текстуру <em>(т.н. текстурный атлас, прим. перев.)</em> и отображать требуемое изображение с помощью поправок текстурных координат, то это приведет к уменьшению переключений между текстурами, что увеличит производительность.
+ <li>Уменьшение переключений состояний также увеличивает производительность. В частности, если есть возможность упаковать несколько изображений в одну текстуру <em>(т.н. текстурный атлас, прим. перев.)</em> и отображать требуемое изображение с помощью поправок текстурных координат, то это приведёт к уменьшению переключений между текстурами, что увеличит производительность.
<ul>
<li>В некоторых редких случаях разные одноцветные изображения можно упаковать в разные цветовые каналы текстуры.</li>
</ul>