WebGL Tutorial with Mouse and Keyboard Interaction
File Manifest
- WebGL.html
- gl-matrix.js
Basic
- Canvas size is 500 x 500
- Vertex Shader code
attribute vec3 position;
uniform mat4 Pmatrix;
uniform mat4 Vmatrix;
uniform mat4 Mmatrix;
attribute vec3 color;
varying vec3 vColor;
void main(void) {
gl_Position = Pmatrix*Vmatrix*Mmatrix*vec4(position, 1.);
vColor = color;
}
Model, View, Projective Matrices are Uniform.
Position and color Matrices are attribute
Return color vColor is varying to return to Fragment Shader.
- Fragment Shader code
precision mediump float;
varying vec3 vColor;
void main(void) {
gl_FragColor = vec4(vColor, 1.);
}
vColor is returned from Vertex Shader.
- Perspective Matrix
glMatrix.mat4.perspective(proj_matrix,40/180*Math.PI,canvas.width/canvas.height,1100);
Perspective matrix has 5 parameters.
- out - Frustrum matrix will be written to.
- fovy - Vertical field of view in radians. if has angle, convert to radians using angle/180*Math.PI
- aspect - Aspect ratio of canvas typically viewport width/height
- near - Near bound of the frustrum
- far - Far bound of the frustrum. can be null or Infinity
Events
HTML has addEventListner function that sets up a function that will be called whenever the specified event is delivered to the targer.
I used this function to implement interation WebGL Program.
Mouse Event
- mouseDown
this function is called when mouse is clicked.
drag = true;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
return false;
- mouseUp
this function is called when mouse is released.
drag = false;
- mouseMove
this function has 2 ways. it collaborates with Keyboard Event.
when mouse is not clicked, it ignores the function.
when m(move) is pressed. mousemove is working as translator, else working as rotator.
if (!drag) return false;
if(!move){
dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
THETA+= dX;
PHI+=dY;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
}
else{
mX = (e.pageX-old_x)/canvas.width*view_matrix[14];
mY = (-e.pageY+old_y)/canvas.height*view_matrix[14];
view_matrix[12]-=mX;
view_matrix[13]-=mY;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
}
- Wheel
Wheel has 2 directions. When up, e.deltaY will be negative. when down, it will be positive.
per 1 click, Zoom +-0.2 and view_matrix[14]is limited from -20 to -5.
if(e.deltaY<0){
if(view_matrix[14]<-5.1) view_matrix[14] = view_matrix[14]+0.2;
}
else {
if(view_matrix[14]>-20) view_matrix[14] = view_matrix[14]-0.2;
}
Keyboard Event
- onKeyPress
as I told above, mouseMove action collaborates with onKeyPress action.
when m is pressed, variable move become 1. now mouseMove action will working as translator.
when c is pressed, this action will change the color of cube. color will be randomly chosen.
if(e.key=='c'){
for(i in colors){
colors[i] = Math.random()+0.3;
}
gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(colors), gl.STATIC_DRAW);
}
if(e.key=='m'){
move=1;
return false;
}
- onKeyUp
move=0;
Copyright
(CC-NC-BY) Kim Kwangho 2019