04 纹理与噪声

采样：放大、缩小与 mipmap

平面一直延伸到远处。切换过滤方式，观察远处的摩尔纹。

过滤 filter

边界 wrap

重复次数12.00

0.540

每个像素运行一次拖动数字，或直接改代码

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 这一侧

gl.uniformMatrix4fv(uModel, …) // 旋转 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)

纹理放大缩小时要“猜”中间的颜色：NEAREST 取最近，LINEAR 插值，mipmap 预先缩小好几份。

试一试

用 NEAREST 把重复调到 30，远处出现摩尔纹
切到 mipmap，远处变平滑
切换三种 wrap 模式，把重复调小观察边界