Skip to content
Snippets Groups Projects
Select Git revision
  • a68e9e670cf5fa79cc3c937dac3bcd9c8d31d6ea
  • master default protected
2 results

webgl-tutorial

Name Last commit Last update
WebGL.html
gl-matrix.js
readme.md

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.

  1. out - Frustrum matrix will be written to.
  2. fovy - Vertical field of view in radians. if has angle, convert to radians using angle/180*Math.PI
  3. aspect - Aspect ratio of canvas typically viewport width/height
  4. near - Near bound of the frustrum
  5. 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

References