Uniform Transform

A shift uniform and a scale uniform transform the triangle before the shader writes clip-space positions.

Program

Uniforms are shared values for a draw call. Unlike attributes, a uniform has one value for all vertices in that draw.

uniform_transform.html

Visuals: generated teaching cards from captured state

state written by this keyframe

uniform_transform.html · full logical source

1<canvas id="stage" width="360" height="210"></canvas>
2<script>
3  const vertices = new Float32Array([
        0.0,  0.62,  0.94, 0.35, 0.28,
       -0.62, -0.52,  0.22, 0.82, 0.55,
        0.62, -0.52,  0.29, 0.55, 0.96
      ]);
4  const uShift = gl.getUniformLocation(program, "uShift");
5  const uScale = gl.getUniformLocation(program, "uScale");
6  gl.uniform2f(uShift, 0.30, 0.02);
7  gl.uniform1f(uScale, 0.72);
8  gl.drawArrays(gl.TRIANGLES, 0, 3);
9</script>

1
Find the shift uniform location
kf: 1event 0kind: lifecycle
Find the shift uniform location.
```
⋯4const uShift = gl.getUniformLocation→ found(program, "uShift");⋯
```
getUniformLocation returns the handle needed for later updates.
State after this keyframeunknown → founduShift location
2
Find the scale uniform location
kf: 2event 1kind: lifecycle
Find the scale uniform location.
```
⋯5const uScale = gl.getUniformLocation→ found(program, "uScale");⋯
```
Uniform locations are program-specific handles.
State after this keyframeunknown → founduScale location
3
Set the shared x/y shift
kf: 3event 2kind: lifecycle
Set the shared x/y shift.
```
⋯6gl.uniform2f→ 0.30,0.02(uShift, 0.30, 0.02);⋯
```
uniform2f writes one vector value shared by all vertices.
State after this keyframe0,0 → 0.30,0.02uShift
4
Set the shared scale value
kf: 4event 3kind: lifecycle
Set the shared scale value.
```
⋯7gl.uniform1f→ 0.72(uScale, 0.72);⋯
```
uniform1f writes one scalar value shared by all vertices.
State after this keyframe1.0 → 0.72uScale
5
Draw the transformed triangle
kf: 5event 4kind: lifecycle
Draw the transformed triangle.
```
⋯8gl.drawArrays→ shifted smaller triangle(gl.TRIANGLES, 0, 3);⋯
```
The shader applies uniform scale and shift to every vertex.
State after this keyframeclear color → shifted smaller trianglepixels

uniform A uniform is one shared shader input value for a draw call.

clip space Clip-space x and y coordinates range from -1 to 1 before viewport mapping.