Passing data to WebGL

There are several ways to pass data from JavaScript to WebGL.

Vertex Data like 3D model data are pushed to WebGL via GL Buffers. These can be accessed from the vertext shader via an attribute variable. In the most common case, buffers contain vertex coordinates. Further data can be passed alongside these vertices. Further data could be passing colors or texture coordinate alongside with vertex coordinates, for example.

In the vertex shader, you can set a varying variable. These will be passed from the vertex shader to the fragment shader and are interpolated. When your vertex shader specifies a triangle with a red egde and a blue side, the varying variable containing the color is interpolated from red to blue, creating a gradient.

Uniform variables are like global variables you can set from the JavaScript side before executing your shader.

A common use case of uniform variables is to pass the screen resolution as a vec2 to your shader.

const locResolution = gl.getUniformLocation(program, 'resolution');
gl.uniform2fv(locResolution, [innerWidth, innerHeight]);

You can then access the resolution variable in the shader like this:

uniform vec2 resolution;

void main() {
  float aspectRatio = resolution.x / resolution.y;
  // ...
}

You can put data into a texture and then use it like a random access buffer in your shader code