04 Texturas y ruido

Muestreo: ampliar, reducir y usar mipmaps

El plano se extiende a lo lejos. Cambia el filtro y observa el muaré en la distancia.

filtro

envoltura

Repeticiones12.00

0.540

Se ejecuta una vez por píxelArrastra los números o edita el código

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);
}

Lado JS

gl.uniformMatrix4fv(uModel, …) // rotación 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)

Al escalar una textura, la GPU debe «estimar» colores intermedios: NEAREST toma el más cercano, LINEAR interpola y los mipmaps guardan copias reducidas.

Pruébalo

Con NEAREST, pon las repeticiones en 30: aparece muaré a lo lejos
Cambia a mipmap: la distancia se suaviza
Prueba los tres modos de envoltura con pocas repeticiones y observa los bordes