When working with WebGL, shaders are the key to rendering graphics on the GPU. But they don’t work alone, they need data to do their job. In this post, we’ll take a look at how to provide data to shaders using attributes, uniforms and varyings.

Before we dive into the code, let’s clarify what attributes and uniforms are and how they fit into WebGL.

• Attributes: These are per-vertex inputs, unique to each vertex in your geometry (e.g., positions, colors). They’re handled in the vertex shader.
• Uniforms: These are global values, constant across all vertices and fragments in a single draw call (e.g., transformation matrices). They’re accessible in both vertex and fragment shaders.
• Varyings: These are values passed from the vertex shader to the fragment shader.

      
graph TD
    A[Vertex Shader<br><small>Processes each vertex individually</small>]
    A --> B[Primitive Assembly<br><small>Assembles vertices into primitives</small>]
    B --> C[Rasterization<br><small>Converts primitives into fragments</small>]
    C --> D[Fragment Shader<br><small>Determines fragment colors</small>]
    D --> E[Testing and Blending<br><small>Applies depth test and blending</small>]
    E --> F[Framebuffer<br><small>Writes final pixel values</small>]
    
    %% Data Inputs
    ATTRIB[Attributes<br><small>Per-vertex data like position,<br>color, texture coordinates</small>] -->|Input| A
    UNIFORM[Uniforms<br><small>Global constants like matrices,<br>lighting parameters</small>] -->|Input| A
    UNIFORM -->|Input| D
    
    %% Data Flow
    A -->|Varyings<br><small>Interpolated data passed<br>from vertex to fragment shader</small>| D
    
    classDef programmable fill:#87CEFA,stroke:#000
    classDef fixed fill:#90EE90,stroke:#000
    classDef none1 fill:none,stroke:none
    classDef dataInput fill:#FFD700,stroke:#000,stroke-dasharray: 5 5

    class A,D programmable
    class B,C,E fixed
    class G,F none1
    class ATTRIB,UNIFORM dataInput
    
    

Attributes are variables in the vertex shader that let you pass data unique to each vertex, such as its position, color, or normal vector.

The example from the previous post, drawing a triangle, uses attributes to pass the triangle’s positions to the vertex shader.

#version 300 es
in vec3 a_position;  // Vertex position attribute
void main() {
    gl_Position = vec4(a_position, 1.0);  // Set vertex position
}

You have to use in to declare an attribute in GLSL ES 3.00.

In this shader, a_position is the attribute that holds the position of each vertex. The attribute is a 3D vector, and we set the vertex position in clip space using gl_Position.

To pass the attribute data to the shader, you need to:

• Create a buffer: Allocate a WebGL buffer to store the data.

  const buffer = gl.createBuffer();

• Bind and fill the buffer: Use gl.bindBuffer and gl.bufferData to load your data into the buffer.

  gl.bindBuffer(gl.ARRAY_BUFFER, buffer);
  gl.bufferData(gl.ARRAY_BUFFER, vertices, gl.STATIC_DRAW);

• Get the attribute location: Use gl.getAttribLocation to find where the attribute lives in the shader.

  const location = gl.getAttribLocation(program, "a_position");

• Enable the attribute: Activate it with gl.enableVertexAttribArray.

  gl.enableVertexAttribArray(location);

• Set the attribute pointer: Use gl.vertexAttribPointer to tell WebGL how to read the data from the buffer.

  gl.vertexAttribPointer(location, 2, gl.FLOAT, false, 0, 0);

Uniforms are constants shared across all vertices and fragments in a single draw call. They’re useful for passing global data like transformation matrices, lighting parameters, or texture samplers.

To translate the triangle, you can use a uniform to pass the translation vector to the vertex shader.

#version 300 es
uniform vec2 u_translation;  // Translation vector
in vec3 a_position;          // Vertex position attribute
void main() {
    gl_Position = vec4(a_position.xy + u_translation, 0.0, 1.0);
}

• Set up the uniform: Use gl.getUniformLocation to find the uniform’s location in the shader.

  const location = gl.getUniformLocation(program, "u_translation");

• Update the uniform: Use gl.uniform[*] functions to set the uniform’s value.

  gl.uniform2f(location, x, y);

Varyings let you pass data from the vertex shader to the fragment shader, with WebGL automatically interpolating the values across the shape. This is how we get smooth gradients, like transitioning colors across our triangle.

You can pass the color of each vertex to the fragment shader using a varying. But first we need to define the color attribute in the vertex shader and the varying in both shaders.

#version 300 es

in vec3 a_position;  // Vertex position attribute
in vec3 a_color;     // Vertex color attribute
out vec3 v_color;    // Varying color

uniform vec2 u_translation;  // Translation vector

void main() {
    gl_Position = vec4(a_position.xy + u_translation, 0.0, 1.0);
    v_color = a_color;  // Pass color to fragment shader
}

#version 300 es

precision highp float;

in vec3 v_color;  // Varying color
out vec4 fragColor;  // Fragment color

void main() {
    fragColor = vec4(v_color, 1.0);  // Set fragment color
}

In the vertex shader, we define the color attribute a_color and the varying v_color. The color is passed from the vertex shader to the fragment shader, where it’s used to set the fragment color.

To define a varying, use out in the vertex shader and in in the fragment shader.

Here’s a complete example that draws a triangle with a color attribute and a translation uniform:

const canvas = document.getElementById("example-canvas");
const gl = canvas.getContext("webgl2");

// Define the position and color of each vertex
const colors = [
    1.0, 0.0, 0.0,  // Red
    0.0, 1.0, 0.0,  // Green
    0.0, 0.0, 1.0   // Blue
];

const positions = [
    0.0,  0.5,  // Top
   -0.5, -0.5,  // Bottom-left
    0.5, -0.5   // Bottom-right
];

// Create and bind the buffer for colors
const colorBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);

// Create and bind the buffer for positions
const positionBuffer = gl.createBuffer();
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW);

// Create and compile the vertex shader
const vertexShaderSource = `#version 300 es

in vec2 a_position;
in vec3 a_color;
out vec3 v_color;

uniform vec2 u_translation;

void main() {
    gl_Position = vec4(a_position + u_translation, 0.0, 1.0);
    v_color = a_color;
}`;

const vertexShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertexShader, vertexShaderSource);
gl.compileShader(vertexShader);

// Create and compile the fragment shader
const fragmentShaderSource = `#version 300 es

precision highp float;

in vec3 v_color;
out vec4 fragColor;

void main() {
    fragColor = vec4(v_color, 1.0);
}`;

const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragmentShader, fragmentShaderSource);
gl.compileShader(fragmentShader);

// Create and link the shader program
const program = gl.createProgram();
gl.attachShader(program, vertexShader);
gl.attachShader(program, fragmentShader);
gl.linkProgram(program);
gl.useProgram(program);

// Get attribute and uniform locations
const positionLocation = gl.getAttribLocation(program, "a_position");
const colorLocation = gl.getAttribLocation(program, "a_color");
const translationLocation = gl.getUniformLocation(program, "u_translation");

// Set up the attributes
gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
gl.enableVertexAttribArray(positionLocation);
gl.vertexAttribPointer(positionLocation, 2, gl.FLOAT, false, 0, 0);

gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
gl.enableVertexAttribArray(colorLocation);
gl.vertexAttribPointer(colorLocation, 3, gl.FLOAT, false, 0, 0);

// Set the uniform
gl.uniform2f(translationLocation, 0.5, 0.5);

// Clear the canvas and draw the triangle
gl.clearColor(1.0, 1.0, 1.0, 1.0);
gl.clear(gl.COLOR_BUFFER_BIT);
gl.drawArrays(gl.TRIANGLES, 0, 3);