04 Textures and noise

Sampling: magnify, minify and mipmaps

The plane stretches far away. Switch the filter and watch the moiré in the distance.

filter

wrap

Repeats12.00

0.540

Runs once per pixelDrag numbers, or edit the code

void main() {
  vec2 uv = vUv * 12.000;
  vec3 color = texture2D(uPattern, uv).rgb;
  gl_FragColor = vec4(color, 1.0);
}

void main() {
  vec2 uv = vUv * 12.000;
  vec3 color = texture2D(uPattern, uv).rgb;
  gl_FragColor = vec4(color, 1.0);
}

JS side

gl.uniformMatrix4fv(uModel, …) // rotation 0.00 / -1.20

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT)
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT)

When a texture is scaled, the GPU must “guess” in-between colours: NEAREST takes the closest, LINEAR interpolates, mipmaps keep pre-shrunk copies.

Try it

With NEAREST, set repeats to 30: moiré appears in the distance
Switch to mipmap: the distance smooths out
Try the three wrap modes with few repeats and look at the borders