Multi Touch Event Handling

multi-touch.js

let node;
let rotation = 0;
let gestureStartRotation = 0;
let gestureStartScale = 0;
let scale = 1;
let posX = 0;
let posY = 0;
let startX;
let startY;

let node = document.querySelector('.frame')

const render = () => {

  window.requestAnimationFrame(() => {
    var val = `translate3D(${posX}px, ${posY}px, 0px) rotate(${rotation}deg) scale(${scale})`
    node.style.transform = val
  })
  
}

window.addEventListener('wheel', (e) => {
  e.preventDefault();

  if (e.ctrlKey) {
    scale -= e.deltaY * 0.01;
  } else {
    posX -= e.deltaX * 2;
    posY -= e.deltaY * 2;
  }

  render();
});


window.addEventListener("gesturestart", function (e) {
  e.preventDefault();
  startX = e.pageX - posX;
  startY = e.pageY - posY;
  gestureStartRotation = rotation;
  gestureStartScale = scale;
});

window.addEventListener("gesturechange", function (e) {
  e.preventDefault();
  
  rotation = gestureStartRotation + e.rotation;
  scale = gestureStartScale * e.scale;

  posX = e.pageX - startX;
  posY = e.pageY - startY;

  render();

})

window.addEventListener("gestureend", function (e) {
  e.preventDefault();
});

shader-multi-touch.js

const now = window.performance && performance.now ? function () {
  return performance.now()
} : function () {
  return +new Date()
}
const _requestAnimationFrame = window.requestAnimationFrame || window.mozRequestAnimationFrame || setTimeout

function createShader (vertexSource, fragmentSource) {
  function compileShader (type, source) {
    const shader = gl.createShader(type)
    gl.shaderSource(shader, source)
    gl.compileShader(shader)
    if (!gl.getShaderParameter(shader, gl.COMPILE_STATUS)) {
      throw new Error('Compile error: ' + gl.getShaderInfoLog(shader))
    }
    gl.attachShader(program, shader)
  }
  const program = gl.createProgram()
  compileShader(gl.VERTEX_SHADER, vertexSource)
  compileShader(gl.FRAGMENT_SHADER, fragmentSource)
  gl.linkProgram(program)
  if (!gl.getProgramParameter(program, gl.LINK_STATUS)) {
    throw new Error('Link error: ' + gl.getProgramInfoLog(program))
  }
  return program
}

const gl = canvas.getContext('experimental-webgl', {
  antialias: false,
  alpha: false,
  depth: false,
  stencil: false
})
const buffer = gl.createBuffer()
const shader = createShader('\
  precision highp float;\
  attribute vec2 vertex;\
  varying vec2 coord;\
  void main() {\
    coord = vertex;\
    gl_Position = vec4(vertex, 0.0, 1.0);\
  }\
', '\
  precision highp float;\
  uniform vec2 viewport;\
  uniform vec2 offset;\
  uniform float zoom;\
  varying vec2 coord;\
  void main() {\
    vec2 grid = coord * viewport * pow(2.0, zoom * 0.01) + offset;\
    vec2 foo = fract(grid / 512.0);\
    gl_FragColor = vec4(foo, 0.0, 1.0);\
  }\
')

let viewportUniform = gl.getUniformLocation(shader, 'viewport')
let zoomUniform = gl.getUniformLocation(shader, 'zoom')
let offsetUniform = gl.getUniformLocation(shader, 'offset')
let previousTime = now()
let frameCount = 0
let zoom = 0
let offsetX = 0
let offsetY = 0

gl.useProgram(shader)
gl.enableVertexAttribArray(0)
gl.bindBuffer(gl.ARRAY_BUFFER, buffer)
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array([-1, -1, 1, -1, -1, 1, 1, 1]), gl.DYNAMIC_DRAW)
gl.vertexAttribPointer(0, 2, gl.FLOAT, false, 0, 0)

window.onwheel = function (e) {
  e.preventDefault()
  if (e.ctrlKey) {
    zoom += e.deltaY
  } else {
    offsetX += e.deltaX * 2
    offsetY -= e.deltaY * 2
  }
}

function render () {
  gl.clear(gl.COLOR_BUFFER_BIT)
  gl.uniform2f(offsetUniform, offsetX, offsetY)
  gl.uniform1f(zoomUniform, zoom)
  gl.drawArrays(gl.TRIANGLE_STRIP, 0, 4)

  let nextTime = now()
  let deltaTime = (nextTime - previousTime) / 1000
  frameCount++
  if (deltaTime > 1) {
    document.title = (frameCount / deltaTime).toFixed(1) + 'fps'
    previousTime = nextTime
    frameCount = 0
  }

  _requestAnimationFrame(render)
}

function resize () {
  const dpr = window.devicePixelRatio || 1
  // dpr = 1;
  gl.canvas.width = innerWidth * dpr
  gl.canvas.height = innerHeight * dpr
  gl.viewport(0, 0, gl.canvas.width, gl.canvas.height)
  gl.uniform2f(viewportUniform, innerWidth, innerHeight)
}

window.onresize = resize
resize()
render()