OHGYUSEOK
WebGL Tutorial

Repository

    var vertexShaderSource = '\
			attribute highp vec4 myVertex; \
			attribute highp vec4 myColor; \
			uniform mediump mat4 transformationMatrix; \
			varying highp vec4 color;\
			void main(void)  \
			{ \
				gl_Position = transformationMatrix * myVertex; \
				color = myColor; \
			}';
    ...
    var vertexShaderSource = '\
            attribute highp vec4 myVertex; \
            attribute highp vec4 myColor; \
            uniform mediump mat4 mMat; \
            uniform mediump mat4 vMat; \
            uniform mediump mat4 pMat; \
            varying  highp vec4 color;\
			void main(void)  \
			{ \
				gl_Position = pMat * vMat * mMat * myVertex; \
				color = myColor; \
			}';
    ...
    var mMat=[];
    var vMat=[];
    var pMat=[];

    mat4.fromYRotation(mMat,rotY);

	if ( flag_animation ){
		rotY += 0.01;
    }

    mat4.lookAt(vMat,[0.0,0.0,2.0],[0.0,0.0,0.0],[0.0,1.0,0.0]);
    mat4.perspective(pMat,3.14/2,800.0/600.0,0.5,5);
    ...
    var mMatLocation = gl.getUniformLocation(gl.programObject, "mMat");
    var vMatLocation = gl.getUniformLocation(gl.programObject, "vMat");
    var pMatLocation = gl.getUniformLocation(gl.programObject, "pMat");

    gl.uniformMatrix4fv(mMatLocation, gl.FALSE, mMat );
    gl.uniformMatrix4fv(vMatLocation, gl.FALSE, vMat );
    gl.uniformMatrix4fv(pMatLocation, gl.FALSE, pMat );
    ...
    mat4.lookAt(out, eye, center, up);
    //MVP array
    var mMat = [];
    var vMat = [];
    var pMat = [];

    //vMat initialize
    var vMat_x=0.0;
    var vMat_y=0.0;
    var vMat_z=2.0;

    //Array that used in lootAt function. Define camera position
    var camera=[vMat_x,vMat_y,vMat_z];
    mat4.lookAt(vMat, camera, [0.0,0.0,0.0], [0.0, 1.0, 0.0]);
    function wheel(){
        canvas.onmousewheel=function(e){

            if(e.wheelDelta<0){
                //if wheel rolled to backward
                //vMat z coord + 0.2
                vMat_z+=0.2;
                //camera position renewal
                camera=[vMat_x,vMat_y,vMat_z];
                //camera coord print
                coord.value="camera position\nx :" + camera[0] + "\ny : "+camera[1]+"\nz : "+camera[2]+"\r\n";
            }
            else{
                //if wheel rolled to forward
                //vMat z coord - 0.2
                vMat_z-=0.2;
                //restrict minimun z to 0
                if(vMat_z<0){
                    vMat_z=0;
                }
                //camera position renewal
                camera=[vMat_x,vMat_y,vMat_z];
                //camera coord print
                coord.value="camera position\nx :" + camera[0] + "\ny : "+camera[1]+"\nz : "+camera[2]+"\r\n";
            }
        }
    }
    //drag start action
    canvas.onmousedown=function(){
        //drag starting coord save
        clicked_x=event.offsetX;
        clicked_y=event.offsetY;

        click_check=1;
    };

    //drag end action
    canvas.onmouseup=function(){
        click_check=0;
    };

    canvas.onmousemove=function(){
        if(click_check==1){
            //drag ending coord save
            moved_x=event.offsetX;
            moved_y=event.offsetY;

            //drag ending cood - drag starting coord
            //down to up :  camera y move to - direction
            //up to down : camera y move to + direction
            //left to right : camera x move to - direction
            //right to left : camera x move to + direction
            //also used to diagonal direction
            between_x=-((moved_x-clicked_x)/3000);
            between_y=((moved_y-clicked_y)/3000);

            //for vMat, vMat_x and vMat_y renewal
            vMat_x+=between_x;
            vMat_y+=between_y;

            //vMat renewal
            camera=[vMat_x,vMat_y,vMat_z];

            //print moving coord in upper textarea
            moving.value="moving distance\nx : " + between_x + ", y : "+between_y;
            moving.value="to camera x :" + moved_x + ", y : "+moved_y+"\r\n"+moving.value;
            moving.value="from camera x :" + clicked_x + ", y : "+clicked_y+"\r\n"+moving.value;
            //print current camera position(print camera array) in lower textarea
            coord.value="camera position\nx : " + camera[0] + "\ny : "+camera[1]+"\nz : "+camera[2];
        }
    }