Блок-схема OGL - изображение не изменяется

Question

Кто-нибудь знает, как я могу изменить размер этого изображения при масштабировании браузера вверх и вниз? Я вообще не знаю, как заставить его реагировать. Должно быть что-то связанное с исправлением imgSize . Даже если я положу его в div , это не сработает.

Ссылка

https://codepen.io/rodolfo-sarno/pen/OJVReoQ

Код

  const renderer = new ogl.Renderer({ dpr: 2 });
  const gl = renderer.gl;
  const canvas = document.getElementsByClassName("a")[0].appendChild(gl.canvas);


  // Variable inputs to control flowmap
  let aspect = 1;
  const mouse = new ogl.Vec2(-1);
  const velocity = new ogl.Vec2();
  let imgSize = [442, 590]

  function resize() {
    let a1, a2;
    var imageAspect = imgSize[1] / imgSize[0];
    if (imgSize[1] / imgSize[0] < imageAspect) {
      a1 = 1;
      a2 = imgSize[1] / imgSize[0] / imageAspect;
    } else {
      a1 = (imgSize[0] / imgSize[1]) * imageAspect;
      a2 = 1;
    }
    mesh.program.uniforms.res.value = new ogl.Vec4(
      imgSize[0],
      imgSize[1],
      a1,
      a2
    );

    renderer.setSize(imgSize[0], imgSize[1]);
    aspect = imgSize[0] / imgSize[1];
  }
  const flowmap = new ogl.Flowmap(gl, { falloff: 0.4, dissipation: 0.9 });
  // Triangle that includes -1 to 1 range for 'position', and 0 to 1 range for 'uv'.
  const geometry = new ogl.Geometry(gl, {
    position: {
      size: 2,
      data: new Float32Array([-1, -1, 3, -1, -1, 3])
    },
    uv: { size: 2, data: new Float32Array([0, 0, 2, 0, 0, 2]) }
  });
  const texture = new ogl.Texture(gl, {
    minFilter: gl.LINEAR,
    magFilter: gl.LINEAR
  });
  const img = new Image();
  img.onload = () => (texture.image = img);
  img.crossOrigin = "Anonymous";
  img.src = "https://uploads-ssl.webflow.com/5e45dfd2f236a837b28b569d/5e4e5a6079f200b3eca2d58a_iconic_2.png?";

  let a1, a2;
  var imageAspect = imgSize[1] / imgSize[0];
  if (imgSize[1] / imgSize[0] < imageAspect) {
    a1 = 1;
    a2 = imgSize[1] / imgSize[0] / imageAspect;
  } else {
    a1 = (imgSize[0] / imgSize[1]) * imageAspect;
    a2 = 1;
  }

  const program = new ogl.Program(gl, {
    vertex,
    fragment,
    uniforms: {
      uTime: { value: 0 },
      tWater: { value: texture },
      res: {
        value: new ogl.Vec4(imgSize[0], imgSize[1], a1, a2)
      },
      img: { value: new ogl.Vec2(imgSize[0], imgSize[1]) },
      // Note that the uniform is applied without using an object and value property
      // This is because the class alternates this texture between two render targets
      // and updates the value property after each render.
      tFlow: flowmap.uniform
    }
  });
  const mesh = new ogl.Mesh(gl, { geometry, program });

  window.addEventListener("resize", resize, false);
  resize();

  // Create handlers to get mouse position and velocity
  const isTouchCapable = "ontouchstart" in window;
  if (isTouchCapable) {
    window.addEventListener("touchstart", updateMouse, false);
    window.addEventListener("touchmove", updateMouse, { passive: false });
  } else {
    window.addEventListener("mousemove", updateMouse, false);
  }
  let lastTime;
  const lastMouse = new ogl.Vec2();
  function updateMouse(e) {
    e.preventDefault();
    if (e.changedTouches && e.changedTouches.length) {
      e.x = e.changedTouches[0].pageX;
      e.y = e.changedTouches[0].pageY;
      }
     const positionX = e.x - canvas.getBoundingClientRect().x
     const positionY = e.y - canvas.getBoundingClientRect().y

     // Get mouse value in 0 to 1 range, with y flipped
  mouse.set(positionX / gl.renderer.width, 1.0 - positionY / gl.renderer.height)

    // Calculate velocity
  if (!lastTime) {
    // First frame
    lastTime = performance.now()
    lastMouse.set(positionX, positionY)
  }

  const deltaX = positionX - lastMouse.x
  const deltaY = positionY - lastMouse.y

  lastMouse.set(positionX, positionY)

  let time = performance.now()

    // Avoid dividing by 0
    let delta = Math.max(10.4, time - lastTime);
    lastTime = time;
    velocity.x = deltaX / delta;
    velocity.y = deltaY / delta;
    // Flag update to prevent hanging velocity values when not moving
    velocity.needsUpdate = true;
  }
  requestAnimationFrame(update);
  function update(t) {
    requestAnimationFrame(update);
    // Reset velocity when mouse not moving
    if (!velocity.needsUpdate) {
      mouse.set(-1);
      velocity.set(0);
    }
    velocity.needsUpdate = false;
    // Update flowmap inputs
    flowmap.aspect = aspect;
    flowmap.mouse.copy(mouse);
    // Ease velocity input, slower when fading out
    flowmap.velocity.lerp(velocity, velocity.len ? 0.15 : 0.1);
    flowmap.update();
    program.uniforms.uTime.value = t * 0.01;
    renderer.render({ scene: mesh });
  }
}

Спасибо