Тяжелые артефакты понижающей дискретизации изображения

Качество минимизированных текстур можно улучшить с помощью Трилинейной фильтрации и Mip Mapping .

Для этого функцию минимизации текстурных текстур (gl.TEXTURE_MIN_FILTER) необходимо установить на одно из gl.NEAREST_MIPMAP_NEAREST, gl.NEAREST_MIPMAP_LINEAR, gl.LINEAR_MIPMAP_NEAREST или gl.LINEAR_MIPMAP_LINEAR - см. Спецификация WebGL 2.0; 3.7.6 Текстурные объекты .

Кроме того, MIP-карты могут быть сгенерированы автоматически gl.generateMipmap - см. Спецификация WebGL 2.0; 5.41. GenerateMipmap требует положительных размеров изображения - или даже вручную, загружая разные изображения в слои текстуры.

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);

//gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR_MIPMAP_LINEAR);

gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);

// Upload the image into the texture.
var mipLevel = 0; // the largest mip
var internalFormat = gl.RGBA; // format we want in the texture
var srcFormat = gl.RGBA; // format of data we are supplying
var srcType = gl.UNSIGNED_BYTE; // type of data we are supplying
gl.texImage2D(gl.TEXTURE_2D,
  mipLevel,
  internalFormat,
  srcFormat,
  srcType,
  image);

gl.generateMipmap(gl.TEXTURE_2D)