From 1386fed7d38652d5848d315927e7e23a66cffd13 Mon Sep 17 00:00:00 2001 From: Alexey Pyltsyn Date: Wed, 20 Oct 2021 13:28:52 +0300 Subject: [RU] Remove `name` attribute from headings (#2788) --- .../games/techniques/3d_on_the_web/glsl_shaders/index.html | 12 ++++++------ 1 file changed, 6 insertions(+), 6 deletions(-) (limited to 'files/ru/games') diff --git a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html index 5844e41686..7b5ed98528 100644 --- a/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html +++ b/files/ru/games/techniques/3d_on_the_web/glsl_shaders/index.html @@ -17,23 +17,23 @@ translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders

Как вы помните из статьи о теоретических основах, вертекс или вершина это точка в системе 3D координат. Также вершины могут иметь дополнительные свойства. Система 3D координат определяет пространство, а вертексы позволяют определять формы в этом пространстве.

-

Типы шейдеров

+

Типы шейдеров

Шейдер, по сути, это функция, которая требуется для отображения чего-либо на экране. Шейдер запускается в GPU (graphics processing unit), который оптимизирован для выполнения подобных операций. Using a GPU to deal with shaders offloads some of the number crunching from the CPU. This allows the CPU to focus its processing power on other tasks, like executing code.

-

Вершинный шейдер

+

Вершинный шейдер

Vertex shaders manipulate coordinates in a 3D space and are called once per vertex. The purpose of the vertex shader is to set up the gl_Position variable — this is a special, global, and built-in GLSL variable. gl_Position is used to store the position of the current vertex.

The void main() function is a standard way of defining the gl_Position variable. Everything inside  void main() will be executed by the vertex shader.  A vertex shader yields a variable containing how to project a vertex's position in 3D space onto a 2D screen.

-

Фрагментный шейдер

+

Фрагментный шейдер

Fragment (or texture) shaders define RGBA (red, blue, green, alpha) colors for each pixel being processed — a single fragment shader is called once per pixel. The purpose of the fragment shader is to set up the gl_FragColor variable. gl_FragColor is a built-in GLSL variable like gl_Position.

The calculations result in a variable containing the information about the RGBA color.

-

Демо

+

Демо

Let's build a simple demo to explain those shaders in action. Be sure to read Three.js tutorial first to grasp the concept of the scene, its objects, and materials.

@@ -41,7 +41,7 @@ translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders

Note: Remember that you don't have to use Three.js or any other library to write your shaders — pure WebGL (Web Graphics Library) is more than enough. We've used Three.js here to make the background code a lot simpler and clearer to understand, so you can just focus on the shader code. Three.js and other 3D libraries abstract a lot of things for you — if you wanted to create such an example in raw WebGL, you'd have to write a lot of extra code to actually make it work.

-

Настройка окружения

+

Настройка окружения

Чтобы приступить к работе с шейдерами WebGL вам потребуется:

@@ -51,7 +51,7 @@ translation_of: Games/Techniques/3D_on_the_web/GLSL_Shaders
  • Сохранить копию последней минимизированной версии библиотеки Three.js в созданную папку.
    • -

    Структура HTML кода

    +

    Структура HTML кода

    Мы будем использовать следующую структуру HTML кода.

    -- cgit v1.2.3-54-g00ecf