Изображения с большим разрешением и текстуры

const VSHADER_SOURCE = `
  attribute vec4 a_Position;
  attribute vec2 a_TexCoord;
  varying vec2 v_TexCoord;
  void main() {
    gl_Position = a_Position;
    v_TexCoord = a_TexCoord;
  }
`

const FSHADER_SOURCE = `
  precision mediump float;
  uniform sampler2D u_Sampler;
  varying vec2 v_TexCoord;
  void main() {
    gl_FragColor = texture2D(u_Sampler, v_TexCoord);
  }
`

// я сказала стартуем
let width = canvas.width = innerWidth
let height = canvas.height = innerHeight
const gl = canvas.getContext('webgl')

// vertex shader
const vertexShader = gl.createShader(gl.VERTEX_SHADER)
gl.shaderSource(vertexShader, VSHADER_SOURCE)
gl.compileShader(vertexShader)

// fragment shader
const fragmentShader = gl.createShader(gl.FRAGMENT_SHADER)
gl.shaderSource(fragmentShader, FSHADER_SOURCE)
gl.compileShader(fragmentShader)

// создание программы
const program = gl.createProgram()
gl.attachShader(program, vertexShader)
gl.attachShader(program, fragmentShader)
gl.linkProgram(program)
gl.useProgram(program)

// поихали
gl.clearColor(0.0, 0.0, 0.0, 1.0)
initTextures(gl, initVertexBuffers(gl))

function initVertexBuffers(gl) {
  //       координаты
  //  вершины      текстуры
  var verticesTexCoords = new Float32Array([
    -0.5,  0.5,    0.0, 1.0,
    -0.5, -0.5,    0.0, 0.0,
     0.5,  0.5,    1.0, 1.0,
     0.5, -0.5,    1.0, 0.0
  ])
  const n = 4

  // создаю буфер
  const vertexTexCoordBuffer = gl.createBuffer()
  // Указываю тип буфера
  gl.bindBuffer(gl.ARRAY_BUFFER, vertexTexCoordBuffer)
  // Записываю данные в буфер
  gl.bufferData(gl.ARRAY_BUFFER, verticesTexCoords, gl.STATIC_DRAW)
  // число байт на один элемент массива
  const FSIZE = verticesTexCoords.BYTES_PER_ELEMENT

  //  сохраняю ссылку на буфер в a_Position и разрешаю присваивание
  const a_Position = gl.getAttribLocation(program, 'a_Position')
  gl.vertexAttribPointer(a_Position, 2, gl.FLOAT, false, FSIZE * 4, 0)
  gl.enableVertexAttribArray(a_Position)

  //  сохраняю ссылку на буфер в a_TexCoord и разрешаю присваивание
  const a_TexCoord = gl.getAttribLocation(program, 'a_TexCoord')
  gl.vertexAttribPointer(a_TexCoord, 2, gl.FLOAT, false, FSIZE * 4, FSIZE * 2)
  gl.enableVertexAttribArray(a_TexCoord)

  // возвращаю количество вершин
  return n
}

function initTextures(gl, n) {
  // создаю объект текстуры
  const texture = gl.createTexture()
  // получаю ссылку на u_Sampler
  const u_Sampler = gl.getUniformLocation(program, 'u_Sampler')
  // создаю объект изображения
  const image = new Image()
  // когда изображение загрузится устанавливаю текстуру
  image.onload = () => loadTexture(gl, n, texture, u_Sampler, image)
  image.crossOrigin = ''
  image.src = 'https://dl.dropboxusercontent.com/s/9dr681brbw0gtz6/sky.jpg'
}

function loadTexture(gl, n, texture, u_Sampler, image) {
  // поворачиваю ось Y изображения
  gl.pixelStorei(gl.UNPACK_FLIP_Y_WEBGL, 1)
  // выбираю текстурный слот
  gl.activeTexture(gl.TEXTURE0)
  // указываю тип объекта текстуры
  gl.bindTexture(gl.TEXTURE_2D, texture)

  // наверное тут нужно что-либо поменять
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR)
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGB, gl.RGB, gl.UNSIGNED_BYTE, image)

  // передаю текстурный слот фрагментному шейдеру
  gl.uniform1i(u_Sampler, 0)

  // очищаю буфер
  gl.clear(gl.COLOR_BUFFER_BIT)
  // рисую
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, n)
}

body {
  margin: 0;
}

canvas {
  display: block;
}

<canvas id=canvas></canvas>