Skip to content
Snippets Groups Projects
Commit f9a7f8cf authored by KimKwangho's avatar KimKwangho
Browse files

.

parent 3051ac0a
No related branches found
No related tags found
No related merge requests found
......@@ -77,7 +77,7 @@
'vColor = color;'+
'}';
var fragCode = 'precision mediump float;'+
var fragCode = 'precision highp float;'+
'varying vec3 vColor;'+
'void main(void) {'+
'gl_FragColor = vec4(vColor, 1.);'+
......@@ -86,10 +86,12 @@
var vertShader = gl.createShader(gl.VERTEX_SHADER);
gl.shaderSource(vertShader, vertCode);
gl.compileShader(vertShader);
//make fragment shader and compile
var fragShader = gl.createShader(gl.FRAGMENT_SHADER);
gl.shaderSource(fragShader, fragCode);
gl.compileShader(fragShader);
//attach these 2 shader to shader program and link.
var shaderprogram = gl.createProgram();
gl.attachShader(shaderprogram, vertShader);
......@@ -117,12 +119,11 @@
glMatrix.mat4.perspective(proj_matrix,40/180*Math.PI,canvas.width/canvas.height,1,100);
var mo_matrix = glMatrix.mat4.create();
var view_matrix = glMatrix.mat4.create();
console.log(view_matrix);
view_matrix[14] = view_matrix[14]-8;
/*================= Mouse events ======================*/
var AMORTIZATION = 0.95;
var reduce = 0.98;
var drag = false;
var old_x, old_y;
var dX = 0, dY = 0, mX = 0.0, mY = 0.0;
......@@ -139,6 +140,7 @@
drag = false;
};
//when mouse is moving while mouse is pressed.
var move=0;
var mouseMove = function(e) {
if (!drag) return false;
......@@ -146,8 +148,8 @@
//when m is not pressed.
dX = (e.pageX-old_x)*2*Math.PI/canvas.width,
dY = (e.pageY-old_y)*2*Math.PI/canvas.height;
THETA+= dX;
PHI+=dY;
RotX+= dX;
RotY+=dY;
old_x = e.pageX, old_y = e.pageY;
e.preventDefault();
}
......@@ -204,21 +206,21 @@
window.addEventListener("keyup",onKeyUp, false); //key is released.
/*=================== Drawing =================== */
var THETA = 0, //variable for rotate y-axis
PHI = 0; //variabe for rotate x-axis
var RotX = 0, //variable for rotate y-axis
RotY = 0; //variabe for rotate x-axis
var time_old = 0;
var animate = function(time) {
var dt = time-time_old;
if (!drag) {
dX *= AMORTIZATION, dY*=AMORTIZATION;
THETA+=dX, PHI+=dY;
dX *= reduce, dY*=reduce;
RotX+=dX, RotY+=dY;
}
glMatrix.mat4.identity(mo_matrix); //before drawing, model matrix is being identity matrix
glMatrix.mat4.rotateY(mo_matrix,mo_matrix,THETA); //
glMatrix.mat4.rotateX(mo_matrix,mo_matrix,PHI); //
glMatrix.mat4.rotateY(mo_matrix,mo_matrix,RotX);
glMatrix.mat4.rotateX(mo_matrix,mo_matrix,RotY);
time_old = time;
gl.enable(gl.DEPTH_TEST);//DEPTH_TEST is enabled.
......
# WebGL Tutorial with Mouse and Keyboard Interaction
## Manifest
## File Manifest
- WebGL.html
- gl-matrix.js
......@@ -131,7 +131,8 @@ move=0;
```
## Copyright
(CC-NC-BY) Kim Kwangho 2019
## References
- https://www.tutorialspoint.com/webgl/webgl_interactive_cube.htm
......
0% Loading or .
You are about to add 0 people to the discussion. Proceed with caution.
Please register or to comment