From 55ddd4454665a3c66e3d5b186bc79048468d36e7 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Mon, 15 Mar 2021 14:29:50 +0300 Subject: Auto fixes --- .../tutorial/adding_2d_content_to_a_webgl_context/index.html | 2 +- .../api/webgl_api/tutorial/animating_objects_with_webgl/index.html | 4 ++-- .../webgl_api/tutorial/creating_3d_objects_using_webgl/index.html | 4 ++-- .../tutorial/using_shaders_to_apply_color_in_webgl/index.html | 2 +- .../web/api/webgl_api/tutorial/using_textures_in_webgl/index.html | 6 +++--- files/ru/web/api/webgl_api/webgl_best_practices/index.html | 2 +- 6 files changed, 10 insertions(+), 10 deletions(-) (limited to 'files/ru/web/api/webgl_api') 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 98198d8f7e..55ea7cad8c 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 @@ -44,7 +44,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Adding_2D_content_to_a_WebGL_context

Этой процедурой загружаются две шейдерные программы. Первая - фрагментный шейдер, загружается из элемента script с ID "shader-fs". Вторая - вершинный шейдер, загружается из элемента script с ID "shader-vs". Мы рассмотрим функцию getShader() чуть ниже. Эта процедура фактически отвечает за извлечение шейдерных программ из DOM.

-

Затем мы создаем шейдерную программу, вызывая функцию createProgram() объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра LINK_STATUS объекта gl для того, чтобы убедиться, что программа успешно скомпанована. Если это так, мы активируем новую шейдерную программу.

+

Затем мы создаем шейдерную программу, вызывая функцию createProgram() объекта WebGL, присоединяя два шейдера к нему, и связывая шейдерную программу. После выполнения этого, проверяется значение параметра LINK_STATUS объекта gl для того, чтобы убедиться, что программа успешно скомпонована. Если это так, мы активируем новую шейдерную программу.

Загрузка шейдеров из DOM

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 6d18ab5490..919d3fccff 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 @@ -7,7 +7,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL ---

{{WebGLSidebar("Tutorial")}} {{PreviousNext("Web/API/WebGL_API/Tutorial/Using_shaders_to_apply_color_in_WebGL", "Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL") }}

-

Наш код оставшийся от предыдущего примера уже насроен на перерисовку нашей WebGL сцены каждые 15 миллисекунд. До сих пор мы просто отрисовывали в точности одно и то же каждый раз. Пришло время изменить это так, чтобы наш квадрат начал двигаться.

+

Наш код оставшийся от предыдущего примера уже настроен на перерисовку нашей WebGL сцены каждые 15 миллисекунд. До сих пор мы просто отрисовывали в точности одно и то же каждый раз. Пришло время изменить это так, чтобы наш квадрат начал двигаться.

В этом примере мы заставим наш двумерный квадрат вращаться и двигаться во всех трёх направлениях. Это докажет, что не смотря на то, что мы создавали всего-лишь двумерный объект, он всё ещё существует в трёхмерном пространстве.

@@ -18,7 +18,7 @@ translation_of: Web/API/WebGL_API/Tutorial/Animating_objects_with_WebGL 
var squareRotation = 0.0;
-

Теперь нам надо изменить процедуру drawScene() и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального рассчёта матрицы положения для квадрата мы применяем условия поворота следующим образом:

+

Теперь нам надо изменить процедуру drawScene() и добавить в неё код, который бы учитывал этот угол поворота при отрисовке квадрата в нашей сцене. После первоначального расчета матрицы положения для квадрата мы применяем условия поворота следующим образом:

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 298613d533..0684b89016 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
@@ -15,7 +15,7 @@ original_slug: Web/API/WebGL_API/Tutorial/Создание_3D_объектов_
 
 
Определение позиций вершин куба

 
-
Во первых, давайте построим буффер позиций вершин куба, обновив код в initBuffers(). Это в значительной степени то же самое как это было для квадрата, но несколько длиннее, так как здесь 24 вершины (4 с каждой стороны):

+
Во первых, давайте построим буфер позиций вершин куба, обновив код в initBuffers(). Это в значительной степени то же самое как это было для квадрата, но несколько длиннее, так как здесь 24 вершины (4 с каждой стороны):

 
 
var vertices = [
   // Передняя грань
@@ -114,7 +114,7 @@ gl.bufferData(gl.ELEMENT_ARRAY_BUFFER,
 
 
Рисование куба

 
-
Далее нам нужно обновить код нашей функции drawScene() , чтобы рисовать, используя буффер индексов куба, добавив новые вызовы {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} и {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}:

+
Далее нам нужно обновить код нашей функции drawScene() , чтобы рисовать, используя буфер индексов куба, добавив новые вызовы {{domxref("WebGLRenderingContext.bindBuffer()", "gl.bindBuffer()")}} и {{domxref("WebGLRenderingContext.drawElements()", "gl.drawElements()")}}:

 
 
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, cubeVerticesIndexBuffer);
 setMatrixUniforms();
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 74299aa620..0c01467385 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
@@ -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);
 

 
-
На этом этапе, вы можете посмотреть результат работы написанного кода, если используете браузер, поддерживающий WebGL. Вы увидете нечто похожее на следующий рисунок (расположенный по центру в большом черном поле):

+
На этом этапе, вы можете посмотреть результат работы написанного кода, если используете браузер, поддерживающий WebGL. Вы увидите нечто похожее на следующий рисунок (расположенный по центру в большом черном поле):

 
 
screenshot.png

 
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 adbc0ff443..706bf00786 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
@@ -149,7 +149,7 @@ const texture = loadTexture(gl, 'cubetexture.png');

 
 
Массив textureCoordinates определяет координаты текстуры, соответствующие каждой вершине каждой грани. Заметьте, что координаты текстуры лежат в промежутке между 0.0 и 1.0. Размерность текстуры нормализуется в пределах между 0.0 и 1.0, независимо от реального размера изображения.

 
-
После опредения массива координат текстуры, мы копируем его в буфер, и теперь WebGL имеет данные для отрисовки.

+
После определения массива координат текстуры, мы копируем его в буфер, и теперь WebGL имеет данные для отрисовки.

 
 
Обновление шейдеров

 
@@ -246,7 +246,7 @@ const texture = loadTexture(gl, 'cubetexture.png');
... function drawScene(gl, programInfo, buffers, texture, deltaTime) { -

Сейчас вращающийся куб должен именть текстуру на гранях.

+

Сейчас вращающийся куб должен иметь текстуру на гранях.

@@ -271,7 +271,7 @@ function drawScene(gl, programInfo, buffers, texture, deltaTime) {
-

Обратите внимание: Поддрежка CORS для кросс-доменного видео и атрибут crossorigin для HTML-элемента {{ HTMLElement("video") }} реализованы в {{Gecko("12.0")}}.

+

Обратите внимание: Поддержка CORS для кросс-доменного видео и атрибут crossorigin для HTML-элемента {{ HTMLElement("video") }} реализованы в {{Gecko("12.0")}}.

{{PreviousNext("Web/API/WebGL_API/Tutorial/Creating_3D_objects_using_WebGL", "Web/API/WebGL_API/Tutorial/Lighting_in_WebGL")}}

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 90b595c096..64dee04e13 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 @@ -41,6 +41,6 @@ translation_of: Web/API/WebGL_API/WebGL_best_practices
  • Однако сегодня даже мобильные устройства обладают мощными графическими процессорами которые способны быстро обрабатывать относительно сложные шейдерные программы. Более того, шейдеры компилируются в машинные коды, которые могут быть оптимизированы под конкретный процессор. Может оказаться, что дорогой вызов функции может быть скомпилирован в несколько (или даже в одну) процессорную инструкцию. Частично это справедливо для функций {{Glossary("GLSL")}}, выполняющих операции над векторами, таких как normalize(), dot() и mix(). Лучшим советом будет использовать встроенные функции, нежели пытаться реализовать, например, собственную версию скалярного произведения или линейной интерполяции, которые будут скомпилированы в набор сложных и неоптимальных инструкций процессора.
    • -
  • Выносите как можно больше операций в вершинный шейдер. Из-за того, что в процессе отрисовки фрагментные шейдеры выполняются гораздо чаще, чем вершинные, любые вычисления, которые можно выполнить с вершинами и интерполировать между пикселями, будут работать быстрее (интерполяция будет "бесплатна", т.к. это этап конвеера WebGL). Например, простая анимация текстурированной поверхности может быть реализована с помощью преобразований текстурных координат (простейший вариант - прибавлять значение uniform-вектора к attribute-вектору текстурных координат). Если результат будет визуально приемлем, то такой вариант будет работать быстрее, чем реализация во фрагментном шейдере.
    • +
  • Выносите как можно больше операций в вершинный шейдер. Из-за того, что в процессе отрисовки фрагментные шейдеры выполняются гораздо чаще, чем вершинные, любые вычисления, которые можно выполнить с вершинами и интерполировать между пикселями, будут работать быстрее (интерполяция будет "бесплатна", т.к. это этап конвейера WebGL). Например, простая анимация текстурированной поверхности может быть реализована с помощью преобразований текстурных координат (простейший вариант - прибавлять значение uniform-вектора к attribute-вектору текстурных координат). Если результат будет визуально приемлем, то такой вариант будет работать быстрее, чем реализация во фрагментном шейдере.
  • Всегда задействуйте атрибут вершин c нулевым индексом. Отрисовка с неактивным вершинным атрибутом с индексом 0 вынуждает браузер выполнять сложную эмуляцию настольного OpenGL (например, как на Mac OSX). Вызывайте функцию bindAttribLocation() чтобы вершинный атрибут использовал нулевой индекс и активируйте сам атрибут с помощью функции enableVertexAttribArray().
    • -- cgit v1.2.3-54-g00ecf