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

project.js

Blame
  • project.js 13.50 KiB
    "use strict";
    
    var canvas;
    var gl;
    var program;
    
    var projectionMatrix;
    var modelViewMatrix;
    
    var instanceMatrix;
    
    var modelViewMatrixLoc;
    
    var vertices = [
        vec4( -0.5, -0.5,  0.5, 1.0 ),
        vec4( -0.5,  0.5,  0.5, 1.0 ),
        vec4( 0.5,  0.5,  0.5, 1.0 ),
        vec4( 0.5, -0.5,  0.5, 1.0 ),
        vec4( -0.5, -0.5, -0.5, 1.0 ),
        vec4( -0.5,  0.5, -0.5, 1.0 ),
        vec4( 0.5,  0.5, -0.5, 1.0 ),
        vec4( 0.5, -0.5, -0.5, 1.0 )
    ];
    
    
    var torsoId = 0;
    var headId  = 1;
    var head1Id = 1;
    var head2Id = 13;
    var leftUpperArmId = 2;
    var leftLowerArmId = 3;
    var rightUpperArmId = 4;
    var rightLowerArmId = 5;
    var leftUpperLegId = 6;
    var leftLowerLegId = 7;
    var rightUpperLegId = 8;
    var rightLowerLegId = 9;
    var headUpperArmId = 10;
    var headLowerArmId = 11;
    var headArmHandId = 12;
    
    
    var torsoHeight = 8;
    var torsoWidth = 1.6;
    var upperArmHeight = 3.0;
    var lowerArmHeight = 3.0;
    var upperArmWidth  = 0.5;
    var lowerArmWidth  = 0.5;
    var upperLegWidth  = 0.5;
    var lowerLegWidth  = 0.5;
    var lowerLegHeight = 3.0;
    var upperLegHeight = 3.0;
    var headHeight = 0.5;
    var headWidth = 1.5;
    var headUpperArmHeight = 5.0;
    var headUpperArmWidth = 0.5;
    var headLowerArmHeight = 5.0;
    var headLowerArmWidth = 0.5;
    var headArmHandHeight = 1.0;
    var headArmHandWidth = 0.5;
    
    var numNodes = 13;
    var numAngles = 14;
    var angle = 0;
    
    var theta = [0, 0, 210, -60, 210, -60, 210, -60, 210, -60, 30, 120, -60, 0];
    
    var numVertices = 24;
    
    var stack = [];
    
    var figure = [];
    
    for( var i=0; i<numNodes; i++) figure[i] = createNode(null, null, null, null);
    
    var vBuffer;
    var modelViewLoc;
    
    var pointsArray = [];
    
    //-------------------------------------------
    
    function scale4(a, b, c) {
       var result = mat4();
       result[0][0] = a;
       result[1][1] = b;
       result[2][2] = c;
       return result;
    }
    
    //--------------------------------------------
    
    
    function createNode(transform, render, sibling, child){
        var node = {
        transform: transform,
        render: render,
        sibling: sibling,
        child: child,
        }
        return node;
    }
    
    
    function initNodes(Id) {
    
        var m = mat4();
    
        switch(Id) {
    
        case torsoId:
    
        m = rotate(theta[torsoId], 0, 1, 0 );
        figure[torsoId] = createNode( m, torso, null, headId );
        break;
    
        case headId:
        case head1Id:
        case head2Id:
    
    
        m = translate(0.0, torsoWidth+0.5*headHeight, torsoHeight*0.25);
    	m = mult(m, rotate(theta[head1Id], 1, 0, 0))
    	m = mult(m, rotate(theta[head2Id], 0, 1, 0));
        m = mult(m, translate(0.0, -0.5*headHeight, 0.0));
        figure[headId] = createNode( m, head, leftUpperArmId, headUpperArmId);
        break;
    
        case headUpperArmId:
    
        m = translate(0.0, headHeight, 0);
        m = mult(m, rotate(theta[headUpperArmId], 1, 0, 0));
        figure[headUpperArmId] = createNode( m, headUpperArm, null, headLowerArmId);
        break;
    
        case headLowerArmId:
    
        m = translate(0.0, headUpperArmHeight, 0);
        m = mult(m, rotate(theta[headLowerArmId], 1, 0, 0));
        figure[headLowerArmId] = createNode( m, headLowerArm, null, headArmHandId );
        break;
    
        case headArmHandId:
    
        m = translate(0.0, headLowerArmHeight, 0);
        m = mult(m, rotate(theta[headArmHandId], 1, 0, 0));
        figure[headArmHandId] = createNode( m, headArmHand, null, null);
        break;
    
    
    
        case leftUpperArmId:
    
        m = translate(-(torsoWidth*0.5), 0.5*torsoWidth, torsoHeight*0.4);
    	m = mult(m, rotate(theta[leftUpperArmId], 1, 0, 0));
        figure[leftUpperArmId] = createNode( m, leftUpperArm, rightUpperArmId, leftLowerArmId );
        break;
    
        case rightUpperArmId:
    
        m = translate(torsoWidth*0.5, 0.5*torsoWidth, torsoHeight*0.4);
    	m = mult(m, rotate(theta[rightUpperArmId], 1, 0, 0));
        figure[rightUpperArmId] = createNode( m, rightUpperArm, leftUpperLegId, rightLowerArmId );
        break;
    
        case leftUpperLegId:
    
        m = translate(-(torsoWidth*0.5), 0.5*torsoWidth, -torsoHeight*0.4);
    	m = mult(m , rotate(theta[leftUpperLegId], 1, 0, 0));
        figure[leftUpperLegId] = createNode( m, leftUpperLeg, rightUpperLegId, leftLowerLegId );
        break;
    
        case rightUpperLegId:
    
        m = translate(torsoWidth*0.5, 0.5*torsoWidth, -torsoHeight*0.4);
    	m = mult(m, rotate(theta[rightUpperLegId], 1, 0, 0));
        figure[rightUpperLegId] = createNode( m, rightUpperLeg, null, rightLowerLegId );
        break;
    
        case leftLowerArmId:
    
        m = translate(0.0, upperArmHeight*0.9, 0.0);
        m = mult(m, rotate(theta[leftLowerArmId], 1, 0, 0));
        figure[leftLowerArmId] = createNode( m, leftLowerArm, null, null );
        break;
    
        case rightLowerArmId:
    
        m = translate(0.0, upperArmHeight*0.9, 0.0);
        m = mult(m, rotate(theta[rightLowerArmId], 1, 0, 0));
        figure[rightLowerArmId] = createNode( m, rightLowerArm, null, null );
        break;
    
        case leftLowerLegId:
    
        m = translate(0.0, upperLegHeight*0.9, 0.0);
        m = mult(m, rotate(theta[leftLowerLegId], 1, 0, 0));
        figure[leftLowerLegId] = createNode( m, leftLowerLeg, null, null );
        break;
    
        case rightLowerLegId:
    
        m = translate(0.0, upperLegHeight*0.9, 0.0);
        m = mult(m, rotate(theta[rightLowerLegId], 1, 0, 0));
        figure[rightLowerLegId] = createNode( m, rightLowerLeg, null, null );
        break;
    
        }
    
    }
    
    function traverse(Id) {
    
       if(Id == null) return;
       stack.push(modelViewMatrix);
       // 원래 modelViewMatrix에서 옮기고 rotate까지
       modelViewMatrix = mult(modelViewMatrix, figure[Id].transform);
       // 중심점에서 조금 올리고 scaling 하기
       figure[Id].render();
       // traverse
       if(figure[Id].child != null) traverse(figure[Id].child);
        modelViewMatrix = stack.pop();
       if(figure[Id].sibling != null) traverse(figure[Id].sibling);
    }
    
    function torso() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5*torsoWidth, 0.0) );
        instanceMatrix = mult(instanceMatrix, scale4( torsoWidth, torsoWidth, torsoHeight));
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function head() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * headHeight, 0.0 ));
    	instanceMatrix = mult(instanceMatrix, scale4(headWidth, headHeight, headWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function headUpperArm() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * headUpperArmHeight, 0.0 ));
    	instanceMatrix = mult(instanceMatrix, scale4(headUpperArmWidth, headUpperArmHeight, headUpperArmWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function headLowerArm() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * headLowerArmHeight, 0.0 ));
    	instanceMatrix = mult(instanceMatrix, scale4(headLowerArmWidth, headLowerArmHeight, headLowerArmWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function headArmHand() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * headArmHandHeight, 0.0 ));
    	instanceMatrix = mult(instanceMatrix, scale4(headArmHandWidth, headArmHandHeight, headArmHandWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function leftUpperArm() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0) );
    	instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function leftLowerArm() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0) );
    	instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function rightUpperArm() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperArmHeight, 0.0) );
    	instanceMatrix = mult(instanceMatrix, scale4(upperArmWidth, upperArmHeight, upperArmWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function rightLowerArm() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerArmHeight, 0.0) );
    	instanceMatrix = mult(instanceMatrix, scale4(lowerArmWidth, lowerArmHeight, lowerArmWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function  leftUpperLeg() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperLegHeight, 0.0) );
    	instanceMatrix = mult(instanceMatrix, scale4(upperLegWidth, upperLegHeight, upperLegWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function leftLowerLeg() {
    
        instanceMatrix = mult(modelViewMatrix, translate( 0.0, 0.5 * lowerLegHeight, 0.0) );
    	instanceMatrix = mult(instanceMatrix, scale4(lowerLegWidth, lowerLegHeight, lowerLegWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function rightUpperLeg() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * upperLegHeight, 0.0) );
    	instanceMatrix = mult(instanceMatrix, scale4(upperLegWidth, upperLegHeight, upperLegWidth) );
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function rightLowerLeg() {
    
        instanceMatrix = mult(modelViewMatrix, translate(0.0, 0.5 * lowerLegHeight, 0.0) );
    	instanceMatrix = mult(instanceMatrix, scale4(lowerLegWidth, lowerLegHeight, lowerLegWidth) )
        gl.uniformMatrix4fv(modelViewMatrixLoc, false, flatten(instanceMatrix));
        for(var i =0; i<6; i++) gl.drawArrays(gl.TRIANGLE_FAN, 4*i, 4);
    }
    
    function quad(a, b, c, d) {
         pointsArray.push(vertices[a]);
         pointsArray.push(vertices[b]);
         pointsArray.push(vertices[c]);
         pointsArray.push(vertices[d]);
    }
    
    
    function cube()
    {
        quad( 1, 0, 3, 2 );
        quad( 2, 3, 7, 6 );
        quad( 3, 0, 4, 7 );
        quad( 6, 5, 1, 2 );
        quad( 4, 5, 6, 7 );
        quad( 5, 4, 0, 1 );
    }
    
    
    window.onload = function init() {
    
        canvas = document.getElementById( "gl-canvas" );
    
        gl = WebGLUtils.setupWebGL( canvas );
        if ( !gl ) { alert( "WebGL isn't available" ); }
    
        gl.viewport( 0, 0, canvas.width, canvas.height );
        gl.clearColor( 1.0, 1.0, 1.0, 1.0 );
    
        //
        //  Load shaders and initialize attribute buffers
        //
        program = initShaders( gl, "vertex-shader", "fragment-shader");
    
        gl.useProgram( program);
    
        instanceMatrix = mat4();
    
        projectionMatrix = ortho(-10.0,10.0,-10.0, 10.0,-10.0,10.0);
        modelViewMatrix = mat4();
    
    
        gl.uniformMatrix4fv(gl.getUniformLocation( program, "modelViewMatrix"), false, flatten(modelViewMatrix) );
        gl.uniformMatrix4fv( gl.getUniformLocation( program, "projectionMatrix"), false, flatten(projectionMatrix) );
    
        modelViewMatrixLoc = gl.getUniformLocation(program, "modelViewMatrix")
    
        cube();
    
        vBuffer = gl.createBuffer();
    
        gl.bindBuffer( gl.ARRAY_BUFFER, vBuffer );
        gl.bufferData(gl.ARRAY_BUFFER, flatten(pointsArray), gl.STATIC_DRAW);
    
        var vPosition = gl.getAttribLocation( program, "vPosition" );
        gl.vertexAttribPointer( vPosition, 4, gl.FLOAT, false, 0, 0 );
        gl.enableVertexAttribArray( vPosition );
    
            document.getElementById("slider0").onchange = function(event) {
            theta[torsoId ] = event.target.value;
            initNodes(torsoId);
        };
            document.getElementById("slider1").onchange = function(event) {
            theta[head1Id] = event.target.value;
            initNodes(head1Id);
        };
    
        document.getElementById("slider2").onchange = function(event) {
             theta[leftUpperArmId] = event.target.value;
             initNodes(leftUpperArmId);
        };
        document.getElementById("slider3").onchange = function(event) {
             theta[leftLowerArmId] =  event.target.value;
             initNodes(leftLowerArmId);
        };
    
            document.getElementById("slider4").onchange = function(event) {
            theta[rightUpperArmId] = event.target.value;
            initNodes(rightUpperArmId);
        };
        document.getElementById("slider5").onchange = function(event) {
             theta[rightLowerArmId] =  event.target.value;
             initNodes(rightLowerArmId);
        };
            document.getElementById("slider6").onchange = function(event) {
            theta[leftUpperLegId] = event.target.value;
            initNodes(leftUpperLegId);
        };
        document.getElementById("slider7").onchange = function(event) {
             theta[leftLowerLegId] = event.target.value;
             initNodes(leftLowerLegId);
        };
        document.getElementById("slider8").onchange = function(event) {
             theta[rightUpperLegId] =  event.target.value;
             initNodes(rightUpperLegId);
        };
            document.getElementById("slider9").onchange = function(event) {
            theta[rightLowerLegId] = event.target.value;
            initNodes(rightLowerLegId);
        };
        document.getElementById("slider10").onchange = function(event) {
             theta[head2Id] = event.target.value;
             initNodes(head2Id);
        };
    
        for(i=0; i<numNodes; i++) initNodes(i);
        render();
    }
    
    
    var render = function() {
    
            gl.clear( gl.COLOR_BUFFER_BIT );
            theta[head2Id] += 1;
            initNodes(head2Id);
            traverse(torsoId);
            requestAnimFrame(render);
    
    }