Delete project.js

project.js

-/*
-(CC-NC-BY) Jun-ho Roh 2019
-*/
-
-var gl;
-var fragsource;
-var vertexsource;
-var vm_value= new Array();
-var timer;
-var pm_value = new Array();
-var near,far;
-var fov_up, fov_down, fov_left, fov_right;
-var is_cal;
-var mm_value = new Array();
-var is_pause;
-var out = new Array();
-var proj_matrix = perspectiveFromFieldOfView(out, [30.0, 30.0, 30.0, 30.0], 2, 20.0);
-var view_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,-5,1];
-var mov_matrix = [1,0,0,0, 0,1,0,0, 0,0,1,0, 0,0,0,1];
-
-
-//make 4d identity matrix
-function idMatrix(m) {
-    m[0] = 1; m[1] = 0; m[2] = 0; m[3] = 0; 
-    m[4] = 0; m[5] = 1; m[6] = 0; m[7] = 0; 
-    m[8] = 0; m[9] = 0; m[10] = 1; m[11] = 0; 
-    m[12] = 0; m[13] = 0; m[14] = 0; m[15] = 1; 
-}
-
- /**
-   * Multiplies two mat4s
-   *
-   * @param {mat4} out the receiving matrix
-   * @param {mat4} a the first operand
-   * @param {mat4} b the second operand
-   * @returns {mat4} out
-   */
-function multiply$3(out, a, b) {
-    var a00 = a[0],
-        a01 = a[1],
-        a02 = a[2],
-        a03 = a[3];
-    var a10 = a[4],
-        a11 = a[5],
-        a12 = a[6],
-        a13 = a[7];
-    var a20 = a[8],
-        a21 = a[9],
-        a22 = a[10],
-        a23 = a[11];
-    var a30 = a[12],
-       
-        a31 = a[13],
-        a32 = a[14],
-        a33 = a[15]; // Cache only the current line of the second matrix
-
-    var b0 = b[0],
-        b1 = b[1],
-        b2 = b[2],
-        b3 = b[3];
-
-    out[0] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    out[1] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    out[2] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    out[3] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = b[4];
-    b1 = b[5];
-    b2 = b[6];
-    b3 = b[7];
-    out[4] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    out[5] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    out[6] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    out[7] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = b[8];
-    b1 = b[9];
-    b2 = b[10];
-    b3 = b[11];
-    out[8] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    out[9] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    out[10] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    out[11] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    b0 = b[12];
-    b1 = b[13];
-    b2 = b[14];
-    b3 = b[15];
-    out[12] = b0 * a00 + b1 * a10 + b2 * a20 + b3 * a30;
-    out[13] = b0 * a01 + b1 * a11 + b2 * a21 + b3 * a31;
-    out[14] = b0 * a02 + b1 * a12 + b2 * a22 + b3 * a32;
-    out[15] = b0 * a03 + b1 * a13 + b2 * a23 + b3 * a33;
-    return out;
-  }
-
-/**
-   * Translate a mat4 by the given vector
-   *
-   * @param {mat4} out the receiving matrix
-   * @param {mat4} a the matrix to translate
-   * @param {vec3} v vector to translate by
-   * @returns {mat4} out
-*/
-function translate$2(out, a, v) {
-    var x = v[0],
-        y = v[1],
-        z = v[2];
-    var a00, a01, a02, a03;
-    var a10, a11, a12, a13;
-    var a20, a21, a22, a23;
-
-    if (a === out) {
-      out[12] = a[0] * x + a[4] * y + a[8] * z + a[12];
-      out[13] = a[1] * x + a[5] * y + a[9] * z + a[13];
-      out[14] = a[2] * x + a[6] * y + a[10] * z + a[14];
-      out[15] = a[3] * x + a[7] * y + a[11] * z + a[15];
-    } else {
-      a00 = a[0];
-      a01 = a[1];
-      a02 = a[2];
-      a03 = a[3];
-      a10 = a[4];
-      a11 = a[5];
-      a12 = a[6];
-      a13 = a[7];
-      a20 = a[8];
-      a21 = a[9];
-      a22 = a[10];
-      a23 = a[11];
-      out[0] = a00;
-      out[1] = a01;
-      out[2] = a02;
-      out[3] = a03;
-      out[4] = a10;
-      out[5] = a11;
-      out[6] = a12;
-      out[7] = a13;
-      out[8] = a20;
-      out[9] = a21;
-      out[10] = a22;
-      out[11] = a23;
-      out[12] = a00 * x + a10 * y + a20 * z + a[12];
-      out[13] = a01 * x + a11 * y + a21 * z + a[13];
-      out[14] = a02 * x + a12 * y + a22 * z + a[14];
-      out[15] = a03 * x + a13 * y + a23 * z + a[15];
-    }
-
-    return out;
-  }
-
-  /**
-   * Scales the mat4 by the dimensions in the given vec3 not using vectorization
-   *
-   * @param {mat4} out the receiving matrix
-   * @param {mat4} a the matrix to scale
-   * @param {vec3} v the vec3 to scale the matrix by
-   * @returns {mat4} out
-   **/
-function scale$3(out, a, v) {
-    var x = v[0],
-        y = v[1],
-        z = v[2];
-    out[0] = a[0] * x;
-    out[1] = a[1] * x;
-    out[2] = a[2] * x;
-    out[3] = a[3] * x;
-    out[4] = a[4] * y;
-    out[5] = a[5] * y;
-    out[6] = a[6] * y;
-    out[7] = a[7] * y;
-    out[8] = a[8] * z;
-    out[9] = a[9] * z;
-    out[10] = a[10] * z;
-    out[11] = a[11] * z;
-    out[12] = a[12];
-    out[13] = a[13];
-    out[14] = a[14];
-    out[15] = a[15];
-    return out;
-}
-
-
-  /**
-   * Rotates a mat4 by the given angle around the given axis
-   *
-   * @param {mat4} out the receiving matrix
-   * @param {mat4} a the matrix to rotate
-   * @param {Number} rad the angle to rotate the matrix by
-   * @param {vec3} axis the axis to rotate around
-   * @returns {mat4} out
-   */
-function rotate$3(out, a, rad, axis) {
-    var x = axis[0],
-        y = axis[1],
-        z = axis[2];
-    var len = Math.hypot(x, y, z);
-    var s, c, t;
-    var a00, a01, a02, a03;
-    var a10, a11, a12, a13;
-    var a20, a21, a22, a23;
-    var b00, b01, b02;
-    var b10, b11, b12;
-    var b20, b21, b22;
-
-    if (len < 1e-6) {
-      return null;
-    }
-
-    len = 1 / len;
-    x *= len;
-    y *= len;
-    z *= len;
-    s = Math.sin(rad);
-    c = Math.cos(rad);
-    t = 1 - c;
-    a00 = a[0];
-    a01 = a[1];
-    a02 = a[2];
-    a03 = a[3];
-    a10 = a[4];
-    a11 = a[5];
-    a12 = a[6];
-    a13 = a[7];
-    a20 = a[8];
-    a21 = a[9];
-    a22 = a[10];
-    a23 = a[11]; // Construct the elements of the rotation matrix
-
-    b00 = x * x * t + c;
-    b01 = y * x * t + z * s;
-    b02 = z * x * t - y * s;
-    b10 = x * y * t - z * s;
-    b11 = y * y * t + c;
-    b12 = z * y * t + x * s;
-    b20 = x * z * t + y * s;
-    b21 = y * z * t - x * s;
-    b22 = z * z * t + c; // Perform rotation-specific matrix multiplication
-
-    out[0] = a00 * b00 + a10 * b01 + a20 * b02;
-    out[1] = a01 * b00 + a11 * b01 + a21 * b02;
-    out[2] = a02 * b00 + a12 * b01 + a22 * b02;
-    out[3] = a03 * b00 + a13 * b01 + a23 * b02;
-    out[4] = a00 * b10 + a10 * b11 + a20 * b12;
-    out[5] = a01 * b10 + a11 * b11 + a21 * b12;
-    out[6] = a02 * b10 + a12 * b11 + a22 * b12;
-    out[7] = a03 * b10 + a13 * b11 + a23 * b12;
-    out[8] = a00 * b20 + a10 * b21 + a20 * b22;
-    out[9] = a01 * b20 + a11 * b21 + a21 * b22;
-    out[10] = a02 * b20 + a12 * b21 + a22 * b22;
-    out[11] = a03 * b20 + a13 * b21 + a23 * b22;
-
-    if (a !== out) {
-      // If the source and destination differ, copy the unchanged last row
-      out[12] = a[12];
-      out[13] = a[13];
-      out[14] = a[14];
-      out[15] = a[15];
-    }
-
-    return out;
-}
-
-
-/**
-   * Generates a perspective projection matrix with the given field of view.
-   * This is primarily useful for generating projection matrices to be used
-   * with the still experiemental WebVR API.
-   *
-   * @param {mat4} out mat4 frustum matrix will be written into
-   * @param {Object} fov Object containing the following values: upDegrees, downDegrees, leftDegrees, rightDegrees
-   * @param {number} near Near bound of the frustum
-   * @param {number} far Far bound of the frustum
-   * @returns {mat4} out
-   */
-function perspectiveFromFieldOfView(out, fov, near, far) {
-    var upTan = Math.tan(fov[0]* Math.PI / 180.0);
-    var downTan = Math.tan(fov[1] * Math.PI / 180.0);
-    var leftTan = Math.tan(fov[2] * Math.PI / 180.0);
-    var rightTan = Math.tan(fov[3] * Math.PI / 180.0);
-    var xScale = 2.0 / (leftTan + rightTan);
-    var yScale = 2.0 / (upTan + downTan);
-    out[0] = xScale;
-    out[1] = 0.0;
-    out[2] = 0.0;
-    out[3] = 0.0;
-    out[4] = 0.0;
-    out[5] = yScale;
-    out[6] = 0.0;
-    out[7] = 0.0;
-    out[8] = -((leftTan - rightTan) * xScale * 0.5);
-    out[9] = (upTan - downTan) * yScale * 0.5;
-    out[10] = far / (near - far);
-    out[11] = -1.0;
-    out[12] = 0.0;
-    out[13] = 0.0;
-    out[14] = far * near / (near - far);
-    out[15] = 0.0;
-    return out;
-}
-
-
-function testGLError(functionLastCalled) {
-
-    var lastError = gl.getError();
-
-    if (lastError != gl.NO_ERROR) {
-        alert(functionLastCalled + " failed (" + lastError + ")");
-        return false;
-    }
-
-    return true;
-}
-
-function initialiseGL(canvas) {
-    try {
- // Try to grab the standard context. If it fails, fallback to experimental
-        gl = canvas.getContext("webgl") || canvas.getContext("experimental-webgl");
-        gl.viewport(0, 0, canvas.width, canvas.height);
-    }
-    catch (e) {
-    }
-
-    if (!gl) {
-        alert("Unable to initialise WebGL. Your browser may not support it");
-        return false;
-    }
-
-    return true;
-}
-
-var shaderProgram;
-
-function initialiseBuffer() {
-		
-    var vertexData = [
-		-0.5, 0.5, 0.5,		1.0, 1.0, 1.0, 0.5,		0.0, 1.0,//3
-        0.5, 0.5, 0.5,		1.0, 1.0, 1.0, 0.5,		1.0, 1.0,//1
-		0.5, 0.5, -0.5,		1.0, 1.0, 1.0, 0.5,		1.0, 1.0,//2
-				
-		-0.5, 0.5, 0.5,		1.0, 1.0, 1.0, 0.5,		0.0, 1.0,//3
-		0.5, 0.5, -0.5,		1.0, 1.0, 1.0, 0.5,		1.0, 1.0,//2
-		-0.5, 0.5, -0.5,	1.0, 1.0, 1.0, 0.5,		0.0, 1.0,//4
-		 
-		0.5, 0.5, -0.5,		0.0, 0.0, 0.0, 0.5,		1.0, 1.0,//2
-		0.5, -0.5, -0.5,	0.0, 0.0, 0.0, 0.5,		1.0, 0.0,//6
-		-0.5,-0.5,-0.5,		0.0, 0.0, 0.0, 0.5,		0.0, 0.0,//8
-		   
-		-0.5, 0.5, -0.5,	0.0, 0.0, 0.0, 0.5,		0.0, 1.0,//4
-		0.5, 0.5, -0.5,		0.0, 0.0, 0.0, 0.5,		1.0, 1.0,//2
-		-0.5,-0.5,-0.5,		0.0, 0.0, 0.0, 0.5,		0.0, 0.0,//8
-			
-		0.5, -0.5, 0.5,		1.0, 0.5, 0.0, 0.5,		0.0, 1.0,//5
-		0.5, -0.5, -0.5,	1.0, 0.5, 0.0, 0.5,		0.0, 1.0,//6
-		0.5, 0.5, -0.5,		1.0, 0.5, 0.0, 0.5,		1.0, 1.0,//2
-
-		0.5, -0.5, 0.5,		1.0, 0.5, 0.0, 0.5,		0.0, 1.0,//5
-		0.5, 0.5, -0.5,		1.0, 0.5, 0.0, 0.5,		1.0, 1.0,//2
-		0.5, 0.5, 0.5,		1.0, 0.5, 0.0, 0.5,		1.0, 1.0,//1
-				 
-		-0.5, 0.5, -0.5,	1.0, 0.0, 0.0, 0.5,		0.0, 1.0,//4
-		-0.5,-0.5, -0.5,	1.0, 0.0, 0.0, 0.5,		0.0, 0.0,//8
-		-0.5, -0.5, 0.5,	1.0, 0.0, 0.0, 0.5,		0.0, 0.0,//7
-		
-		-0.5, 0.5, 0.5,		1.0, 0.0, 0.0, 0.5,		0.0, 1.0,//3
-		-0.5, 0.5, -0.5,	1.0, 0.0, 0.0, 0.5,		0.0, 1.0,//4
-		-0.5, -0.5, 0.5,	1.0, 0.0, 0.0, 0.5,		0.0, 0.0,//7
-		
-		-0.5, -0.5, 0.5,	0.0, 0.0, 1.0, 0.5,		0.0, 0.0,//7
-		0.5, -0.5, 0.5,		0.0, 0.0, 1.0, 0.5,		1.0, 0.0,//5
-		0.5, 0.5, 0.5,		0.0, 0.0, 1.0, 0.5,		1.0, 1.0,//1
-				 
-		-0.5, -0.5, 0.5,	0.0, 0.0, 1.0, 0.5,		0.0, 0.0,//7
-		0.5, 0.5, 0.5,		0.0, 0.0, 1.0, 0.5,		1.0, 1.0,//1
-		-0.5, 0.5, 0.5,		0.0, 0.0, 1.0, 0.5,		0.0, 1.0,//3
-		
-		 0.5, -0.5, -0.5,	0.0, 1.0, 0.0, 0.5,		1.0, 0.0,//6
-		 0.5, -0.5, 0.5,	0.0, 1.0, 0.0, 0.5,		1.0, 0.0,//5
-		-0.5, -0.5, 0.5,	0.0, 1.0, 0.0, 0.5,		0.0, 0.0,//7
-		
-		-0.5,-0.5, -0.5,	0.0, 1.0, 0.0, 0.5,		0.0, 0.0,//8
-		 0.5, -0.5, -0.5,	0.0, 1.0, 0.0, 0.5,		1.0, 0.0,//6
-		-0.5, -0.5, 0.5,	0.0, 1.0, 0.0, 0.5,		0.0, 0.0,//7
-    ];
-	
-    // Generate a buffer object
-    gl.vertexBuffer = gl.createBuffer();
-    // Bind buffer as a vertex buffer so we can fill it with data
-    gl.bindBuffer(gl.ARRAY_BUFFER, gl.vertexBuffer);
-    gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(vertexData), gl.STATIC_DRAW);
-    return testGLError("initialiseBuffers");
-}
-
-function initialiseShaders() {
-    
-    gl.fragShader = gl.createShader(gl.FRAGMENT_SHADER);
-    gl.shaderSource(gl.fragShader, fragsource.value);
-    gl.compileShader(gl.fragShader);
-    if (!gl.getShaderParameter(gl.fragShader, gl.COMPILE_STATUS)) {
-        alert("Failed to compile the fragment shader.\n" + gl.getShaderInfoLog(gl.fragShader));
-        return false;
-    }
-
-    gl.vertexShader = gl.createShader(gl.VERTEX_SHADER);
-    gl.shaderSource(gl.vertexShader, vertexsource.value);
-    gl.compileShader(gl.vertexShader);
-    if (!gl.getShaderParameter(gl.vertexShader, gl.COMPILE_STATUS)) {
-        alert("Failed to compile the vertex shader.\n" + gl.getShaderInfoLog(gl.vertexShader));
-        return false;
-    }
-
-    gl.programObject = gl.createProgram();
-
-    // Attach the fragment and vertex shaders to it
-    gl.attachShader(gl.programObject, gl.fragShader);
-    gl.attachShader(gl.programObject, gl.vertexShader);
-
-    // Bind the custom vertex attribute "myVertex" to location 0
-    gl.bindAttribLocation(gl.programObject, 0, "myVertex");
-    gl.bindAttribLocation(gl.programObject, 1, "myColor");
-	gl.bindAttribLocation(gl.programObject, 2, "myUV");
-
-    // Link the program
-    gl.linkProgram(gl.programObject);
-
-    if (!gl.getProgramParameter(gl.programObject, gl.LINK_STATUS)) {
-        alert("Failed to link the program.\n" + gl.getProgramInfoLog(gl.programObject));
-        return false;
-    }
-
-    gl.useProgram(gl.programObject);
-
-    return testGLError("initialiseShaders");
-}
-
-
-rotValue = 0.0; 
-mainRotXValue = 0.0;
-mainRotYValue = 0.0; 
-mainRotZValue = 0.0;
-moonRotXValue = 0.0;
-moonRotYValue = 0.0;
-moonRotZValue = 0.0;
-animRotValue = 0.0;
-mainAnimRotXValue = 0.0;
-mainAnimRotYValue = 0.0;
-mainAnimRotZValue = 0.0;
-moonAnimRotXValue = 0.0;
-moonAnimRotYValue = 0.0;
-moonAnimRotZValue = 0.0;
-
-transX = 0.0;
-transY = 0.0;
-transZ = 0.0;
-frames = 1;
-
-moonTransX = 0.0;
-moonTransY = 0.0;
-moonTransZ = 0.0;
-
-function mainAnimPause()
-{
-	mainAnimRotXValue = 0.0;
-          mainAnimRotYValue = 0.0;
-	mainAnimRotZValue = 0.0;
-}
-function resetMainPos()
-{
-	transX = 0.0;
-	transY = 0.0;
-	transZ = 0.0;
-	document.getElementById("webTrX").innerHTML = "transX : " + transX.toFixed(4);
-	document.getElementById("webTrY").innerHTML = "transY : " + transY.toFixed(4);
-	document.getElementById("webTrZ").innerHTML = "transZ : " + transZ.toFixed(4);
-
-}
-function moonAnimPause()
-{
-	moonAnimRotXValue = 0.0;
-          moonAnimRotYValue = 0.0;
-	moonAnimRotZValue = 0.0;
-}
-function resetMoonPos()
-{
-	moonTransX = 0.0;
-	moonTransY = 0.0;
-	moonTransZ = 0.0;
-	document.getElementById("mwebTrX").innerHTML = "transX : " + moonTransX.toFixed(4);
-	document.getElementById("mwebTrY").innerHTML = "transY : " + moonTransY.toFixed(4);
-	document.getElementById("mwebTrZ").innerHTML = "transZ : " + moonTransZ.toFixed(4);
-
-}
-
-
-function rotXYZ(matrix, a, b, c)
-{
-    rotAxis = [1,0,0];
-    rotate$3(mov_matrix, mov_matrix, a, rotAxis);
-    rotAxis = [0,1,0];
-    rotate$3(mov_matrix, mov_matrix, b, rotAxis);
-    rotAxis = [0,0,1];
-    rotate$3(mov_matrix, mov_matrix, c, rotAxis);
-}
-
-function animRotate()
-{
-	animRotValue += 0.01;
-}
-
-function mainAnimXRotate()
-{
-	mainAnimRotXValue += 0.01;
-}
-function mainAnimYRotate()
-{
-	mainAnimRotYValue += 0.01;
-}
-function mainAnimZRotate()
-{
-	mainAnimRotZValue += 0.01;
-}
-function moonAnimXRotate()
-{
-	moonAnimRotXValue += 0.01;
-}
-function moonAnimYRotate()
-{
-	moonAnimRotYValue += 0.01;
-}
-function moonAnimZRotate()
-{
-	moonAnimRotZValue += 0.01;
-}
-function trXinc()
-{
-	transX += 0.01;
-	document.getElementById("webTrX").innerHTML = "transX : " + transX.toFixed(4);
-}
-function trYinc()
-{
-	transY += 0.01;
-	document.getElementById("webTrY").innerHTML = "transY : " + transY.toFixed(4);
-}
-function trZinc()
-{
-	transZ += 0.01;
-	document.getElementById("webTrZ").innerHTML = "transZ : " + transZ.toFixed(4);
-}
-function trXdec()
-{
-	transX -= 0.01;
-	document.getElementById("webTrX").innerHTML = "transX : " + transX.toFixed(4);
-}
-function trYdec()
-{
-	transY -= 0.01;
-	document.getElementById("webTrY").innerHTML = "transY : " + transY.toFixed(4);
-}
-function trZdec()
-{
-	transZ -= 0.01;
-	document.getElementById("webTrZ").innerHTML = "transZ : " + transZ.toFixed(4);
-}
-function mtrXinc()
-{
-	moonTransX += 0.01;
-	document.getElementById("mwebTrX").innerHTML = "transX : " + moonTransX.toFixed(4);
-}
-function mtrYinc()
-{
-	moonTransY += 0.01;
-	document.getElementById("mwebTrY").innerHTML = "transY : " + moonTransY.toFixed(4);
-}
-function mtrZinc()
-{
-	moonTransZ += 0.01;
-	document.getElementById("mwebTrZ").innerHTML = "transZ : " + moonTransZ.toFixed(4);
-}
-function mtrXdec()
-{
-	moonTransX -= 0.01;
-	document.getElementById("mwebTrX").innerHTML = "transX : " + moonTransX.toFixed(4);
-}
-function mtrYdec()
-{
-	moonTransY -= 0.01;
-	document.getElementById("mwebTrY").innerHTML = "transY : " + moonTransY.toFixed(4);
-}
-function mtrZdec()
-{
-	moonTransZ -= 0.01;
-	document.getElementById("mwebTrZ").innerHTML = "transZ : " + moonTransZ.toFixed(4);
-}
-
-
-//mouse events
-var windowHalfX=0
-var beforeLoc = [0, 0];
-function onDocumentMouseDown(event){
-    event.preventDefault();                                                
-    document.addEventListener('mousemove',onDocumentMouseMove, false );
-    document.addEventListener('mouseup', onDocumentMouseUp, false);
-    document.addEventListener('mouseout', onDocumentMouseOut, false);
-    beforeLoc = [event.clientX - windowHalfX, event.clientY - windowHalfX];
-}
-
-function onDocumentMouseMove(event){
-    mouseLoc = [event.clientX-windowHalfX, event.clientY-windowHalfX];
-    //window.LookAtCamera(view_matrix, 0, 0, 0, 0, 0, 0, 0, 0, 0)
-    rotate$3(view_matrix, view_matrix, (mouseLoc[0]-beforeLoc[0])*0.01, [0, 1, 0]);
-    rotate$3(view_matrix, view_matrix, (mouseLoc[1]-beforeLoc[1])*0.01, [1, 0, 0]);
-    for(var i = 0; i < 16; i++){
-        vm_value[i].value = view_matrix[i];
-    }
-    beforeLoc = mouseLoc
-}
-
-//remove event listener when drag out or end drag
-function onDocumentMouseUp(event){                                            
-    document.removeEventListener( 'mousemove', onDocumentMouseMove, false ); 
-    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-    document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-}
-
-function onDocumentMouseOut(event){
-    document.removeEventListener( 'mousemove', onDocumentMouseMove, false );
-    document.removeEventListener( 'mouseup', onDocumentMouseUp, false );
-    document.removeEventListener( 'mouseout', onDocumentMouseOut, false );
-}
-
-//render func
-function renderScene() {  
-    frames += 1 ;
-
-    var Pmatrix = gl.getUniformLocation(gl.programObject, "Pmatrix");
-    var Vmatrix = gl.getUniformLocation(gl.programObject, "Vmatrix");
-    var Mmatrix = gl.getUniformLocation(gl.programObject, "Mmatrix");
-
-    //auto calculate proj_matrix
-    if(is_cal.checked == true){
-        var tmp = new Array();
-        perspectiveFromFieldOfView(tmp, [fov_up.value, fov_down.value, fov_left.value, fov_right.value], near.value, far.value);
-        for(var i = 0; i < 16; i++)
-            pm_value[i].value = tmp[i];
-    }
-
-    //get matrix value from table
-    for(var i = 0; i < 16; i++){
-        view_matrix[i] = vm_value[i].value;
-        proj_matrix[i] = pm_value[i].value;
-    }
-
-    gl.uniformMatrix4fv(Pmatrix, false, proj_matrix);
-    gl.uniformMatrix4fv(Vmatrix, false, view_matrix);
-
-
-    if (!testGLError("gl.uniformMatrix4fv")) {
-        return false;
-    }
-
-    gl.enableVertexAttribArray(0);
-    gl.vertexAttribPointer(0, 3, gl.FLOAT, gl.FALSE, 36, 0);
-    gl.enableVertexAttribArray(1);
-    gl.vertexAttribPointer(1, 4, gl.FLOAT, gl.FALSE, 36, 12);
-    gl.enableVertexAttribArray(2);
-    gl.vertexAttribPointer(2, 2, gl.FLOAT, gl.FALSE, 36, 28);
-
-
-    if (!testGLError("gl.vertexAttribPointer")) {
-        return false;
-    }
-    gl.enable(gl.DEPTH_TEST);
-    gl.depthFunc(gl.LEQUAL); 
-    // gl.enable(gl.CULL_FACE);
-    gl.enable(gl.BLEND);
-    gl.blendFunc(gl.SRC_ALPHA, gl.ONE_MINUS_SRC_ALPHA);
-    gl.blendEquation(gl.FUNC_ADD);
-
-    gl.clearColor(0.6, 0.8, 1.0, 1.0);
-    gl.clearDepth(1.0); 
-    gl.clear(gl.COLOR_BUFFER_BIT | gl.DEPTH_BUFFER_BIT);
-
-
-
-    //main square
-    if(is_pause.checked == true){
-        for(var i = 0; i < 16; i++)
-            mov_matrix[i] = mm_value[i].value;
-    }
-    if(is_pause.checked == false){
-        idMatrix(mov_matrix);
-        for(var i = 0; i < 16; i++)
-            mm_value[i].value = mov_matrix[i];
-        rotXYZ(mov_matrix, mainRotXValue, mainRotYValue, mainRotZValue);
-        translate$2(mov_matrix, mov_matrix, [transX, transY, transZ]);
-        for(var i = 0; i < 16; i++)
-            mm_value[i].value = mov_matrix[i];
-    }
-    
-    gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
-    gl.drawArrays(gl.TRIANGLES, 0, 36);
-    
-    //----------------------------------------
-    //small square
-    var tmp = mov_matrix.slice();
-    translate$2(mov_matrix, mov_matrix, [.75, .75, .75]); 
-    scale$3(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
-    rotXYZ(mov_matrix, moonRotXValue, moonRotYValue, moonRotZValue);
-    translate$2(mov_matrix, mov_matrix, [moonTransX, moonTransY, moonTransZ]);
-    gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
-    gl.drawArrays(gl.TRIANGLES, 0, 36);
-    mov_matrix = tmp.slice();
-
-    var tmp = mov_matrix.slice();
-    translate$2(mov_matrix, mov_matrix, [.75, .75, -.75]); 
-    scale$3(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
-    rotXYZ(mov_matrix, moonRotXValue, moonRotYValue, moonRotZValue);
-    translate$2(mov_matrix, mov_matrix, [moonTransX, moonTransY, moonTransZ]);
-    gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
-    gl.drawArrays(gl.TRIANGLES, 0, 36);
-    mov_matrix = tmp.slice();
-
-    var tmp = mov_matrix.slice();
-    translate$2(mov_matrix, mov_matrix, [-.75, .75, .75]); 
-    scale$3(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
-    rotXYZ(mov_matrix, moonRotXValue, moonRotYValue, moonRotZValue);
-    translate$2(mov_matrix, mov_matrix, [moonTransX, moonTransY, moonTransZ]);
-    gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
-    gl.drawArrays(gl.TRIANGLES, 0, 36);
-    mov_matrix = tmp.slice();
-
-    var tmp = mov_matrix.slice();
-    translate$2(mov_matrix, mov_matrix, [-.75, .75, -.75]); 
-    scale$3(mov_matrix, mov_matrix, [0.25, 0.25, 0.25]);
-    rotXYZ(mov_matrix, moonRotXValue, moonRotYValue, moonRotZValue);
-    translate$2(mov_matrix, mov_matrix, [moonTransX, moonTransY, moonTransZ]);
-    gl.uniformMatrix4fv(Mmatrix, false, mov_matrix);
-    gl.drawArrays(gl.TRIANGLES, 0, 36);
-    mov_matrix = tmp.slice();
-    //end small square
-    //--------------------------------------------------
-
-    //rotate value
-    mainRotXValue += mainAnimRotXValue;
-    mainRotYValue += mainAnimRotYValue; 
-    mainRotZValue += mainAnimRotZValue;
-    moonRotXValue += moonAnimRotXValue; 
-    moonRotYValue += moonAnimRotYValue; 
-    moonRotZValue += moonAnimRotZValue;
-    rotValue += animRotValue; 
-    //end rotate value
-
-
-    if (!testGLError("gl.drawArrays")) {
-        return false;
-    }
-
-    return true;
-}
-
-
-
-//---------------------------------------
-// main function
-function main() {
-
-    var canvas = document.getElementById("maincanvas");
-    fragsource = document.getElementById("fragmentSource");
-    vertexsource = document.getElementById("vertexSource");
-    fov_up = document.getElementById("fov_up");
-    fov_down = document.getElementById("fov_down");
-    fov_left = document.getElementById("fov_left");
-    fov_right = document.getElementById("fov_right");
-    near = document.getElementById("near");
-    far = document.getElementById("far");
-    is_cal = document.getElementById("is_cal");
-    is_pause = document.getElementById("is_pause");
-    timer = document.getElementById("timer");
-    canvas.addEventListener('mousedown', onDocumentMouseDown, false);
-    
-    for (var i=0;i<16;i++){
-        vm_value[i] = document.getElementById("vmatrix"+i);
-        pm_value[i] = document.getElementById("pmatrix"+i);
-        mm_value[i] = document.getElementById("mmatrix"+i);
-    }
-    
-    console.log("Start");
-
-    if (!initialiseGL(canvas)) {
-        return;
-    }
-
-    if (!initialiseBuffer()) {
-        return;
-    }
-
-    if (!initialiseShaders()) {
-        return;
-    }
-
-
-    /*
-    // Render loop
-    // 함수 renderLoop함수는 정의와 동시에 실행이 되며
-    // 타이머 값이 0이하일 경우 랜더링을 정지한다.(0.5초만큼 대기 후 자기자신을 호출)
-    // 타이머 값이 0보다 클경우 renderScene을 통해 랜더링 후 타이머 값만큼 대기 후
-    // 자기자신을 호출한다. window.requestAnimationFrame은 실행 최적화 
-    */
-    (function renderLoop(param) {
-        if(timer.value <= 0){
-            window.setTimeout(renderLoop,500);
-        }
-        else if (renderScene()) {
-            
-            window.setTimeout(window.requestAnimationFrame, timer.value * 1000, renderLoop);
-        }
-    })();
-    
-}
-//end main
-//---------------------------------------------
-function apply()
-{
-    main();
-
-}