Skip to content

Commit 3dfe35c

Browse files
author
Lucien Grondin
committed
make trackball more mobile friendly
1 parent 9659f6c commit 3dfe35c

File tree

2 files changed

+152
-116
lines changed

2 files changed

+152
-116
lines changed

Diff for: ‎cube.js

+112-110
Original file line numberDiff line numberDiff line change
@@ -1,46 +1,49 @@
11
function main() {
2-
let canvas = document.getElementById('canvas'),
3-
trackball = new Trackball(canvas),
4-
gl = WebGLUtils.setupWebGL(canvas),
5-
cube = {
6-
vertices: [
7-
-1, -1, -1, +1, -1, -1, +1, +1, -1, -1, +1, -1,
8-
-1, -1, +1, +1, -1, +1, +1, +1, +1, -1, +1, +1,
9-
-1, -1, -1, -1, +1, -1, -1, +1, +1, -1, -1, +1,
10-
+1, -1, -1, +1, +1, -1, +1, +1, +1, +1, -1, +1,
11-
-1, -1, -1, -1, -1, +1, +1, -1, +1, +1, -1, -1,
12-
-1, +1, -1, -1, +1, +1, +1, +1, +1, +1, +1, -1,
13-
],
14-
colors: [
15-
// #FFA500
16-
1,.65,0, 1,.65,0, 1,.65,0, 1,.65,0,
17-
1,1,1, 1,1,1, 1,1,1, 1,1,1,
18-
0,0,1, 0,0,1, 0,0,1, 0,0,1,
19-
1,0,0, 1,0,0, 1,0,0, 1,0,0,
20-
1,1,0, 1,1,0, 1,1,0, 1,1,0,
21-
0,1,0, 0,1,0, 0,1,0, 0,1,0
22-
],
23-
indices: [
24-
0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7,
25-
8, 9,10, 8,10,11, 12,13,14, 12,14,15,
26-
16,17,18, 16,18,19, 20,21,22, 20,22,23
27-
]
28-
};
29-
30-
let vertex_buffer = gl.createBuffer();
31-
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
32-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube.vertices), gl.STATIC_DRAW);
33-
gl.bindBuffer(gl.ARRAY_BUFFER, null);
34-
35-
let color_buffer = gl.createBuffer ();
36-
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
37-
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube.colors), gl.STATIC_DRAW);
38-
39-
let index_buffer = gl.createBuffer ();
40-
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
41-
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cube.indices), gl.STATIC_DRAW);
42-
43-
let vertCode = `
2+
"use strict";
3+
let $ = (...x) => document.getElementById(...x),
4+
canvas = $('canvas'),
5+
log = (x => (y => x.innerHTML = y))($('log')),
6+
trackball = new Trackball(canvas),
7+
gl = WebGLUtils.setupWebGL(canvas),
8+
cube = {
9+
vertices: [
10+
-1, -1, -1, +1, -1, -1, +1, +1, -1, -1, +1, -1,
11+
-1, -1, +1, +1, -1, +1, +1, +1, +1, -1, +1, +1,
12+
-1, -1, -1, -1, +1, -1, -1, +1, +1, -1, -1, +1,
13+
+1, -1, -1, +1, +1, -1, +1, +1, +1, +1, -1, +1,
14+
-1, -1, -1, -1, -1, +1, +1, -1, +1, +1, -1, -1,
15+
-1, +1, -1, -1, +1, +1, +1, +1, +1, +1, +1, -1,
16+
],
17+
colors: [
18+
// #FFA500
19+
1,.65,0, 1,.65,0, 1,.65,0, 1,.65,0,
20+
1,1,1, 1,1,1, 1,1,1, 1,1,1,
21+
0,0,1, 0,0,1, 0,0,1, 0,0,1,
22+
1,0,0, 1,0,0, 1,0,0, 1,0,0,
23+
1,1,0, 1,1,0, 1,1,0, 1,1,0,
24+
0,1,0, 0,1,0, 0,1,0, 0,1,0
25+
],
26+
indices: [
27+
0, 1, 2, 0, 2, 3, 4, 5, 6, 4, 6, 7,
28+
8, 9,10, 8,10,11, 12,13,14, 12,14,15,
29+
16,17,18, 16,18,19, 20,21,22, 20,22,23
30+
]
31+
};
32+
33+
let vertex_buffer = gl.createBuffer();
34+
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
35+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube.vertices), gl.STATIC_DRAW);
36+
gl.bindBuffer(gl.ARRAY_BUFFER, null);
37+
38+
let color_buffer = gl.createBuffer ();
39+
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
40+
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(cube.colors), gl.STATIC_DRAW);
41+
42+
let index_buffer = gl.createBuffer ();
43+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
44+
gl.bufferData(gl.ELEMENT_ARRAY_BUFFER, new Uint16Array(cube.indices), gl.STATIC_DRAW);
45+
46+
let vertCode = `
4447
attribute vec3 position;
4548
uniform mat4 Pmatrix;
4649
uniform mat4 Vmatrix;
@@ -51,79 +54,78 @@ function main() {
5154
gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);
5255
vColor = color;
5356
}`,
54-
fragCode = `
57+
fragCode = `
5558
precision mediump float;
5659
varying vec3 vColor;
5760
void main(void) {
5861
gl_FragColor = vec4(vColor, 1.);
5962
}`;
6063

61-
let vertShader = gl.createShader(gl.VERTEX_SHADER);
62-
gl.shaderSource(vertShader, vertCode);
63-
gl.compileShader(vertShader);
64-
65-
let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
66-
gl.shaderSource(fragShader, fragCode);
67-
gl.compileShader(fragShader);
68-
69-
let shaderprogram = gl.createProgram();
70-
gl.attachShader(shaderprogram, vertShader);
71-
gl.attachShader(shaderprogram, fragShader);
72-
gl.linkProgram(shaderprogram);
73-
74-
let _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix"),
75-
_Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix"),
76-
_Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");
77-
78-
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
79-
let _position = gl.getAttribLocation(shaderprogram, "position");
80-
gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
81-
gl.enableVertexAttribArray(_position);
82-
83-
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
84-
let _color = gl.getAttribLocation(shaderprogram, "color");
85-
gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
86-
gl.enableVertexAttribArray(_color);
87-
gl.useProgram(shaderprogram);
88-
89-
function get_projection(angle, a, zMin, zMax) {
90-
let ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
91-
return mat4.fromValues(
92-
0.5/ang, 0 , 0, 0,
93-
0, 0.5*a/ang, 0, 0,
94-
0, 0, -(zMax+zMin)/(zMax-zMin), -1,
95-
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
96-
);
97-
}
98-
99-
let proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100),
100-
view_matrix = mat4.create();
101-
102-
view_matrix[14] = view_matrix[14]-6;
103-
104-
gl.clearColor(0.0, 0.0, 0.0, 1.0);
105-
gl.enable(gl.DEPTH_TEST);
106-
gl.viewport(0,0,canvas.width,canvas.height);
107-
108-
109-
let animate = function () {
110-
gl.clearColor(0.5, 0.5, 0.5, 0.9);
111-
gl.clearDepth(1.0);
112-
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
113-
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
114-
115-
gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
116-
gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
117-
gl.uniformMatrix4fv(_Mmatrix, false, trackball.matrix);
118-
119-
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
120-
gl.drawElements(gl.TRIANGLES, cube.indices.length, gl.UNSIGNED_SHORT, 0);
121-
122-
window.requestAnimationFrame(animate);
123-
document.getElementById("determinant").value =
124-
mat4.determinant(trackball.matrix);
125-
}
126-
127-
animate();
64+
let vertShader = gl.createShader(gl.VERTEX_SHADER);
65+
gl.shaderSource(vertShader, vertCode);
66+
gl.compileShader(vertShader);
67+
68+
let fragShader = gl.createShader(gl.FRAGMENT_SHADER);
69+
gl.shaderSource(fragShader, fragCode);
70+
gl.compileShader(fragShader);
71+
72+
let shaderprogram = gl.createProgram();
73+
gl.attachShader(shaderprogram, vertShader);
74+
gl.attachShader(shaderprogram, fragShader);
75+
gl.linkProgram(shaderprogram);
76+
77+
let _Pmatrix = gl.getUniformLocation(shaderprogram, "Pmatrix"),
78+
_Vmatrix = gl.getUniformLocation(shaderprogram, "Vmatrix"),
79+
_Mmatrix = gl.getUniformLocation(shaderprogram, "Mmatrix");
80+
81+
gl.bindBuffer(gl.ARRAY_BUFFER, vertex_buffer);
82+
let _position = gl.getAttribLocation(shaderprogram, "position");
83+
gl.vertexAttribPointer(_position, 3, gl.FLOAT, false,0,0);
84+
gl.enableVertexAttribArray(_position);
85+
86+
gl.bindBuffer(gl.ARRAY_BUFFER, color_buffer);
87+
let _color = gl.getAttribLocation(shaderprogram, "color");
88+
gl.vertexAttribPointer(_color, 3, gl.FLOAT, false,0,0) ;
89+
gl.enableVertexAttribArray(_color);
90+
gl.useProgram(shaderprogram);
91+
92+
function get_projection(angle, a, zMin, zMax) {
93+
let ang = Math.tan((angle*.5)*Math.PI/180);//angle*.5
94+
return mat4.fromValues(
95+
0.5/ang, 0 , 0, 0,
96+
0, 0.5*a/ang, 0, 0,
97+
0, 0, -(zMax+zMin)/(zMax-zMin), -1,
98+
0, 0, (-2*zMax*zMin)/(zMax-zMin), 0
99+
);
100+
}
101+
102+
let proj_matrix = get_projection(40, canvas.width/canvas.height, 1, 100),
103+
view_matrix = mat4.create();
104+
105+
view_matrix[14] = view_matrix[14]-6;
106+
107+
gl.clearColor(0.0, 0.0, 0.0, 1.0);
108+
gl.enable(gl.DEPTH_TEST);
109+
gl.viewport(0,0,canvas.width,canvas.height);
110+
111+
112+
function animate() {
113+
gl.clearColor(0.5, 0.5, 0.5, 0.9);
114+
gl.clearDepth(1.0);
115+
gl.viewport(0.0, 0.0, canvas.width, canvas.height);
116+
gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
117+
118+
gl.uniformMatrix4fv(_Pmatrix, false, proj_matrix);
119+
gl.uniformMatrix4fv(_Vmatrix, false, view_matrix);
120+
gl.uniformMatrix4fv(_Mmatrix, false, trackball.matrix);
121+
122+
gl.bindBuffer(gl.ELEMENT_ARRAY_BUFFER, index_buffer);
123+
gl.drawElements(gl.TRIANGLES, cube.indices.length, gl.UNSIGNED_SHORT, 0);
124+
125+
window.requestAnimationFrame(animate);
126+
log("The determinant of the motion matrix is " + mat4.determinant(trackball.matrix));
127+
}
128+
129+
animate();
128130

129131
}

Diff for: ‎trackball.js

+40-6
Original file line numberDiff line numberDiff line change
@@ -8,17 +8,15 @@ class Trackball {
88
this.translation = mat4.create();
99
this.translation[14] = -10;
1010
mat4.copy(this.rotation.copy = mat4.create(), this.rotation);
11-
canvas.addEventListener(
12-
"wheel",
11+
canvas.addEventListener("wheel",
1312
(function (self) {
1413
return function (e) {
1514
self.translation[14] *= e.deltaY > 0 ? 1.1 : 0.9;
1615
e.preventDefault()
1716
}
1817
})(this)
1918
);
20-
canvas.addEventListener(
21-
"mousedown",
19+
canvas.addEventListener("mousedown",
2220
e => {
2321
mat4.copy(this.rotation.copy, this.rotation);
2422
this.drag = true;
@@ -28,9 +26,27 @@ class Trackball {
2826
return false;
2927
}, false
3028
);
29+
canvas.addEventListener(
30+
"touchstart",
31+
e => {
32+
e.preventDefault();
33+
if (e.touches.length == 1) {
34+
let t = e.touches[0];
35+
mat4.copy(this.rotation.copy, this.rotation);
36+
this.drag = true;
37+
this.x = t.pageX;
38+
this.y = t.pageY;
39+
} else {
40+
}
41+
}
42+
);
3143
document.addEventListener("mouseup", e => this.drag = false);
32-
document.addEventListener(
33-
"mousemove",
44+
document.addEventListener("touchend",
45+
e => {
46+
this.drag = false;
47+
}
48+
);
49+
document.addEventListener("mousemove",
3450
e => {
3551
if (!this.drag) return false;
3652
mat4.multiply(
@@ -44,7 +60,25 @@ class Trackball {
4460
e.preventDefault();
4561
}, false
4662
);
63+
document.addEventListener("touchmove",
64+
e => {
65+
e.preventDefault();
66+
if (e.touches.length == 1) {
67+
if (!this.drag) return false;
68+
let t = e.touches[0];
69+
mat4.multiply(
70+
this.rotation,
71+
this.turn(
72+
-(t.pageX-this.x)/this.maxLength,
73+
+(t.pageY-this.y)/this.maxLength,
74+
),
75+
this.rotation.copy,
76+
);
77+
} else { ; }
78+
}
79+
);
4780
}
81+
4882
turn(X, Y) {
4983
let X2 = X*X, Y2 = Y*Y,
5084
q = 1 + X2 + Y2,

0 commit comments

Comments
 (0)