Transforming WebGL2 canvas based on touch events?

I want a webgl canvas that I can seemlessly translate, rotate and scale with multitouch (using touch events).

So far I have a canvas that I can translate with 1 finger or scale with 2 fingers, but I'm having trouble integrating all the functionality into one.

So far I'm completely clueless how to support rotation at all.

My code:

const vertSource = `#version 300 es

in vec4 a_position;
in vec2 a_texcoord;

uniform mat4 u_matrix;

out vec2 v_texcoord;

void main() {
  gl_Position = u_matrix * a_position;
  
  v_texcoord = a_texcoord;
}`
const fragSource = `#version 300 es

precision highp float;

in vec2 v_texcoord;

uniform sampler2D u_texture;

out vec4 outColor;

void main() {
  outColor = texture(u_texture, v_texcoord);
}`
const css = `html, body, canvas {
  width: 100%;
  height: 100%;
}
body {
  overscroll-behavior-y: contain;
  overflow: hidden;
  touch-action: none;
}
*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
}`

function define(target, defines) {
  return Object.defineProperties(target, Object.getOwnPropertyDescriptors(defines))
}

function vec2(x, y) {
  if (x === undefined)
    x = 0
  if (y === undefined)
    y = x
  
  return define([x, y], {
    get x() { return this[0] },
    set x(value) { this[0] = value },
    get y() { return this[1] },
    set y(value) { this[1] = value },
  })
}

const mat4 = {
  translation(x, y, z = 0) {
    return [
      1, 0, 0, 0,
      0, 1, 0, 0,
      0, 0, 1, 0,
      x, y, z, 1,
    ]
  },
  xRotation(angle) {
    const c = Math.cos(angle)
    const s = Math.sin(angle)
    
    return [
      1,  0, 0, 0,
      0,  c, s, 0,
      0, -s, c, 0,
      0,  0, 0, 1,
    ]
  },
  yRotation(angle) {
    const c = Math.cos(angle)
    const s = Math.sin(angle)
    
    return [
      c, 0, -s, 0,
      0, 1,  0, 0,
      s, 0,  c, 0,
      0, 0,  0, 1,
    ]
  },
  zRotation(angle) {
    const c = Math.cos(angle)
    const s = Math.sin(angle)
    
    return [
       c, s, 0, 0,
      -s, c, 0, 0,
       0, 0, 1, 0,
       0, 0, 0, 1,
    ]
  },
  scale(x, y, z = 1) {
    if (y === undefined)
      y = x
    return [
      x, 0, 0, 0,
      0, y, 0, 0,
      0, 0, z, 0,
      0, 0, 0, 1,
    ]
  },
  projection(width, height, depth) {
    // Note: This matrix flips the Y axis so 0 is at the top.
    return [
       2 / width, 0, 0, 0,
       0, -2 / height, 0, 0,
       0, 0, 2 / depth, 0,
      -1, 1, 0, 1,
    ]
  },
  orthographic(left, right, bottom, top, near, far) {
    return [
      2 / (right - left), 0, 0, 0,
      0, 2 / (top - bottom), 0, 0,
      0, 0, 2 / (near - far), 0,
      
      (left + right) / (left - right),
      (bottom + top) / (bottom - top),
      (near + far) / (near - far),
      1,
    ]
  },
  mul(a, b) {
    const b00 = b[0 * 4 + 0]
    const b01 = b[0 * 4 + 1]
    const b02 = b[0 * 4 + 2]
    const b03 = b[0 * 4 + 3]
    const b10 = b[1 * 4 + 0]
    const b11 = b[1 * 4 + 1]
    const b12 = b[1 * 4 + 2]
    const b13 = b[1 * 4 + 3]
    const b20 = b[2 * 4 + 0]
    const b21 = b[2 * 4 + 1]
    const b22 = b[2 * 4 + 2]
    const b23 = b[2 * 4 + 3]
    const b30 = b[3 * 4 + 0]
    const b31 = b[3 * 4 + 1]
    const b32 = b[3 * 4 + 2]
    const b33 = b[3 * 4 + 3]
    const a00 = a[0 * 4 + 0]
    const a01 = a[0 * 4 + 1]
    const a02 = a[0 * 4 + 2]
    const a03 = a[0 * 4 + 3]
    const a10 = a[1 * 4 + 0]
    const a11 = a[1 * 4 + 1]
    const a12 = a[1 * 4 + 2]
    const a13 = a[1 * 4 + 3]
    const a20 = a[2 * 4 + 0]
    const a21 = a[2 * 4 + 1]
    const a22 = a[2 * 4 + 2]
    const a23 = a[2 * 4 + 3]
    const a30 = a[3 * 4 + 0]
    const a31 = a[3 * 4 + 1]
    const a32 = a[3 * 4 + 2]
    const a33 = a[3 * 4 + 3]
    
    return [
      b00 * a00 + b01 * a10 + b02 * a20 + b03 * a30,
      b00 * a01 + b01 * a11 + b02 * a21 + b03 * a31,
      b00 * a02 + b01 * a12 + b02 * a22 + b03 * a32,
      b00 * a03 + b01 * a13 + b02 * a23 + b03 * a33,
      b10 * a00 + b11 * a10 + b12 * a20 + b13 * a30,
      b10 * a01 + b11 * a11 + b12 * a21 + b13 * a31,
      b10 * a02 + b11 * a12 + b12 * a22 + b13 * a32,
      b10 * a03 + b11 * a13 + b12 * a23 + b13 * a33,
      b20 * a00 + b21 * a10 + b22 * a20 + b23 * a30,
      b20 * a01 + b21 * a11 + b22 * a21 + b23 * a31,
      b20 * a02 + b21 * a12 + b22 * a22 + b23 * a32,
      b20 * a03 + b21 * a13 + b22 * a23 + b23 * a33,
      b30 * a00 + b31 * a10 + b32 * a20 + b33 * a30,
      b30 * a01 + b31 * a11 + b32 * a21 + b33 * a31,
      b30 * a02 + b31 * a12 + b32 * a22 + b33 * a32,
      b30 * a03 + b31 * a13 + b32 * a23 + b33 * a33,
    ]
  },
}

const camera = vec2()
let rotation = 0
let scaling = 1
const tiles = [
  [0, 0],
  [1, 0],
  [2, 0],
  [3, 0],
  [4, 0],
  [5, 0],
  [6, 0],
  [0, 1],
  [0, 2],
  [0, 3],
  [0, 4],
  [1, 4],
  [2, 4],
  [3, 4],
  [4, 4],
  [5, 4],
  [6, 4],
  [6, 1],
  [6, 2],
  [6, 3],
]

function resizeCanvasToDisplaySize(canvas, mult = 1) {
  const width = canvas.clientWidth * mult | 0
  const height = canvas.clientHeight * mult | 0
  if (canvas.width != width || canvas.height != height) {
    canvas.width  = width
    canvas.height = height
    return true
  }
  return false
}

function createShader(type, source) {
  const shader = gl.createShader(type)
  gl.shaderSource(shader, source)
  gl.compileShader(shader)
  const success = gl.getShaderParameter(shader, gl.COMPILE_STATUS)
  if (success)
    return shader
  
  console.log(gl.getShaderInfoLog(shader))
  gl.deleteShader(shader)
  return undefined
}

function createProgram(vertexShader, fragmentShader) {
  const program = gl.createProgram()
  gl.attachShader(program, vertexShader)
  gl.attachShader(program, fragmentShader)
  gl.linkProgram(program)
  const success = gl.getProgramParameter(program, gl.LINK_STATUS)
  if (success)
    return program

  console.log(gl.getProgramInfoLog(program))
  gl.deleteProgram(program)
  return undefined
}

function setupTouchEvents() {
  let cam, p0, p1
  let rot, scale
  gl.canvas.ontouchstart = e => {
    const t0 = e.touches[0]
    const t1 = e.touches[1]
    const [x0, y0] = [t0.clientX, t0.clientY]
    const [x1, y1] = [t1?.clientX, t1?.clientY]
    
    if (e.touches.length == 1) {
      p0 = vec2(x0, y0)
      cam = vec2(camera.x, camera.y)
    }
    else {
      p0 = vec2(x0, y0)
      p1 = vec2(x1, y1)
      cam = vec2(camera.x, camera.y)
      scale = Math.hypot(p0.x - p1.x, p0.y - p1.y)
    }
  }
  gl.canvas.ontouchmove = e => {
    const t0 = e.touches[0]
    const t1 = e.touches[1]
    const [x0, y0] = [t0.clientX, t0.clientY]
    const [x1, y1] = [t1?.clientX, t1?.clientY]
    
    if (e.touches.length == 1) {
      camera.x = cam.x + (x0 - p0.x) / 32
      camera.y = cam.y + (y0 - p0.y) / 32
    }
    else {
      p0 = vec2(x0, y0)
      p1 = vec2(x1, y1)
      
      const newScale = Math.hypot(p0.x - p1.x, p0.y - p1.y)
      scaling = newScale / scale
      
      camera.x = cam.x + (x0 - p0.x) / 32
      camera.y = cam.y + (y0 - p0.y) / 32
    }
  }
  gl.canvas.ontouchend = e => {
    const t = e.changedTouches[0]
    const [x, y] = [t.clientX, t.clientY]
    
    
    if (t.identifier == 0) {
      
    }
  }
}

function main() {
  const style = document.createElement('style')
  style.textContent = css
  document.head.append(style)
  
  const canvas = document.createElement('canvas')
  document.body.append(canvas)
  
  define(globalThis, { gl: canvas.getContext('webgl2') })
  if (!gl)
    return
  
  // Create shader program
  const vertexShader = createShader(gl.VERTEX_SHADER, vertSource)
  const fragmentShader = createShader(gl.FRAGMENT_SHADER, fragSource)
  const program = createProgram(vertexShader, fragmentShader)
  
  // Find attribute and uniform locations
  const a_position = gl.getAttribLocation(program, 'a_position')
  const a_texcoord = gl.getAttribLocation(program, 'a_texcoord')
  const u_matrix = gl.getUniformLocation(program, 'u_matrix')

  // Create a vertex array object (attribute state)
  const vao = gl.createVertexArray()
  gl.bindVertexArray(vao)

  // Create position buffer
  const positionBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer)
  const positions = [
    0, 0, 0,
    0, 1, 0,
    1, 0, 0,
    1, 1, 0,
  ]
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(positions), gl.STATIC_DRAW)

  // Turn on the attribute
  gl.enableVertexAttribArray(a_position)
  gl.vertexAttribPointer(a_position, 3, gl.FLOAT, false, 0, 0)

  // Create texcoord buffer
  const texcoordBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ARRAY_BUFFER, texcoordBuffer)
  const texcoords = [
    0, 0,
    0, 1,
    1, 0,
    1, 1,
  ]
  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(texcoords), gl.STATIC_DRAW)

  // Turn on the attribute
  gl.enableVertexAttribArray(a_texcoord)
  gl.vertexAttribPointer(a_texcoord, 2, gl.FLOAT, true, 0, 0)

  // Create a texture
  const texture = gl.createTexture()
  gl.activeTexture(gl.TEXTURE0 + 0)
  gl.bindTexture(gl.TEXTURE_2D, texture)
  gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, 2, 2, 0, gl.RGBA, gl.UNSIGNED_BYTE, new Uint8Array([
    0, 0, 255, 255,
    255, 0, 0, 255,
    255, 0, 0, 255,
    0, 0, 255, 255,
  ]))
  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.CLAMP_TO_EDGE)
  gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE)
  
  // Create index buffer
  const indexBuffer = gl.createBuffer()
  gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, indexBuffer)
  const indices = [
    0, 1, 2,
    2, 1, 3,
  ]
  gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(indices), gl.STATIC_DRAW)
  
  setupTouchEvents()

  let lastTime = 0
  function drawScene(time) {
    // Subtract the previous time from the current time
    const delta = (time - lastTime) / 1000
    // Remember the current time for the next frame.
    lastTime = time
    
    resizeCanvasToDisplaySize(gl.canvas)
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
    
    // Turn on depth testing and culling
    gl.enable(gl.DEPTH_TEST)
    gl.enable(gl.CULL_FACE)
    
    // Clear color and depth information
    gl.clearColor(0, 0, 0, 1)
    gl.clearDepth(1)
    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT)
    
    // Bind the attribute/buffer set we want
    gl.useProgram(program)
    gl.bindVertexArray(vao)
    
    const unit = 32
    let proj = mat4.projection(gl.canvas.clientWidth / unit, gl.canvas.clientHeight / unit, 400)
    proj = mat4.mul(proj, mat4.translation(camera.x, camera.y))
    proj = mat4.mul(proj, mat4.zRotation(rotation))
    proj = mat4.mul(proj, mat4.scale(scaling))
    
    tiles.forEach(([x, y]) => {
      // Transform matrix
      const matrix = mat4.mul(proj, mat4.translation(x, y))
      
      // Set the matrix
      gl.uniformMatrix4fv(u_matrix, false, matrix)
      
      // Draw the geometry
      gl.drawElements(gl.TRIANGLES, 6, gl.UNSIGNED_SHORT, 0)
    })
    
    // Call drawScene again next frame
    requestAnimationFrame(drawScene)
  }
  requestAnimationFrame(drawScene)
}

main()