Данные в WebGL

Программы шейдеров имеют доступ к трём видам хранилища данных, каждое из которых имеет определённое назначение. Каждая переменная доступна для одного или обоих типов программ шейдеров (в зависимости от типа хранилища данных) и, возможно, кодом JavaScript на сайте, в зависимости от конкретного типа переменной.

См. Типы данных в документации GLSL.

В GLSL доступны три вида «переменных» или хранилищ данных, каждое со своим назначением и областью применения: атрибуты, переменные-вариации и униформы.

Атрибуты — это переменные GLSL, доступные только шейдеру вершин (как переменные) и коду JavaScript. Атрибуты обычно используются для хранения информации о цвете, координатах текстуры и любой другой информации, которая должна быть обмена между кодом JavaScript и шейдером вершин.

// init colors
const vertexColors = [
  vec4(0.0, 0.0, 0.0, 1.0), // black
  vec4(1.0, 0.0, 0.0, 1.0), // red
  vec4(1.0, 1.0, 0.0, 1.0), // yellow
  vec4(0.0, 1.0, 0.0, 1.0), // green
  vec4(0.0, 0.0, 0.0, 1.0), // black
  vec4(1.0, 0.0, 0.0, 1.0), // red
  vec4(1.0, 1.0, 0.0, 1.0), // yellow
  vec4(0.0, 1.0, 0.0, 1.0), // green
];
const cBuffer = gl.createBuffer();

// continued
// create buffer to store colors and reference it to "vColor" which is in GLSL
gl.bindBuffer(gl.ARRAY_BUFFER, cBuffer);
gl.bufferData(gl.ARRAY_BUFFER, flatten(vertexColors), gl.STATIC_DRAW);

const vColor = gl.getAttribLocation(program, "vColor");
gl.vertexAttribPointer(vColor, 4, gl.FLOAT, false, 0, 0);
gl.enableVertexAttribArray(vColor);

//glsl
attribute  vec4 vColor;

void main()
{
  fColor = vColor;
}

Переменные-вариации — это переменные, объявленные шейдером вершин и используемые для передачи данных от шейдера вершин к шейдеру фрагментов. Это часто используется для обмена вектором нормали вершины после его вычисления шейдером вершин.

<<как использовать>>

Униформы задаются кодом JavaScript и доступны как шейдеру вершин, так и шейдеру фрагментов. Они используются для предоставления значений, которые будут одинаковыми для всего, что отображается в кадре, например, позиции и величины освещения, глобальные преобразования и детали перспективы и так далее.

<<добавить детали>>

<<добавить информацию>>

<<добавить информацию>>