3Kb Controls.js "library" is used to control models. Touch Event Test was very useful for touch events undestanding.
var gl, canvas, pi180 = 180/Math.PI,
transl = -3, rTouch, fiTouch, idTouch0,
xRot = yRot = zRot = xOffs = yOffs = drag = 0;
function startTouch(evt) {
var evList = evt.touches;
if(evList.length == 1){ // one finger touch
xOffs = evList[0].pageX; yOffs = evList[0].pageY;
drag = 1;}
else if(evList.length == 2){ // two fingers touch
idTouch0 = evList[0].identifier;
var dx = evList[1].pageX - evList[0].pageX;
var dy = evList[1].pageY - evList[0].pageY;
rTouch = Math.sqrt(dx*dx + dy*dy); // 2 fingers radius
fiTouch = Math.atan2(dy, dx); // 2 fingers angle
drag = 2;}
evt.preventDefault();
}
function continueTouch(evt) {
if(drag == 1){ // X, Y - rotations
var x = evt.touches[0].pageX, y = evt.touches[0].pageY;
yRot = x - xOffs; xRot = x - yOffs;
xOffs = x; yOffs = y;
drawScene();}
else if(drag == 2){ // zoom and Z - rotation
var dx = evt.touches[1].pageX - evt.touches[0].pageX;
var dy = evt.touches[1].pageY - evt.touches[0].pageY;
var r = Math.sqrt(dx*dx + dy*dy);
var fi;
if( idTouch0 == evt.touches[0].identifier ) fi = Math.atan2(dy, dx);
else fi = Math.atan2(-dy, -dx);
transl *= rTouch / r;
zRot = pi180*(fiTouch - fi);
rTouch = r; fiTouch = fi;
drawScene();
}
}
function stopTouch() {
drag = 0;
}
...
function initGL(){
...
canvas.addEventListener('touchstart', startTouch, false);
canvas.addEventListener('touchmove', continueTouch, false);
canvas.addEventListener('touchend', stopTouch, false);
}
All pages are tested under Android 4.03 + Opera mobile. It is rather slow (about 1 fps on 700x700 canvas). Double tap html page to zoom it out 2 times. Browser will fit enlarged canvas to your screen and you get coarse but ~4 times faster picture (~350x350 and 6 fps on my tab). Firefox mobile can't get WebGL context on the tab. Google Chrome "is not supported on your device". But Opera mobile is enough for script debugging.
Highly optimized NDKmol 3D molecule viewer is fast enough on the tab.