view Pants_FPS/PantsFPS.html @ 17:bf87fe5a9797

ver3
author <e085737>
date Fri, 10 Dec 2010 20:19:03 +0900
parents 9367d87879ee
children 931ad40d56f5
line wrap: on
line source

<html>
  <head>
    <title>Earth and Mars</title>
    <script src="resources/SceneGraphRoot.js"></script>
    <script src="resources/SceneGraph.js"></script>
    <script src="resources/jkl-parsexml.js"></script>
    <script src="resources/Image_xml.js"></script>
    <script src="resources/keybord.js"></script>
    <script src="resources/walk.js"></script>
    <script src="resources/bullet.js"></script>
    <script src="resources/pants.js"></script>
    <script src="resources/human.js"></script>
    <script src="resources/DrawObject.js"></script>
    <script src="resources/J3DI.js"> </script>
    <script src="resources/J3DIMath.js" type="text/javascript"> </script>
    
    <script id="vshader" type="x-shader/x-vertex">
        uniform mat4 u_modelViewProjMatrix;
        uniform mat4 u_normalMatrix;
        uniform vec3 lightDir;

        attribute vec3 vNormal;
        attribute vec4 vTexCoord;
        attribute vec4 vPosition;
        
        varying float v_Dot;
        varying vec2 v_texCoord;
        
        void main()
	{
            gl_Position = u_modelViewProjMatrix * vPosition;
            v_texCoord = vTexCoord.st;
	    vec4 transNormal = (u_normalMatrix) * vec4(vNormal,1);
 
	    //v_Dot = max(dot(transNormal.xyz, lightDir), 0.0);
	    v_Dot = max(1.0, 1.0);
        }
    </script>

    <script id="fshader" type="x-shader/x-fragment">
#ifdef GL_ES
    precision mediump float;
#endif
    
        uniform sampler2D sampler2d;

        varying float v_Dot;
        varying vec2 v_texCoord;
        
        void main()
        {
	    vec4 color = texture2D(sampler2d,v_texCoord);
            /* 光源の色を設定 */
            color += vec4(0.1,0.1,0.1,1);
            gl_FragColor = vec4(color.xyz * v_Dot, color.a);
        }
    </script>

    <script>
        function init(w, h)
        {
            var gl = initWebGL("example", "vshader", "fshader", 
                                [ "vNormal", "vTexCoord", "vPosition"],
                                [ 0, 0, 0, 1 ], 10000);

            gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, -1, 0);
            gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);

            gl.enable(gl.TEXTURE_2D);

	    gl.sgroot = new SceneGraphRoot()
	    walk_init(gl, gl.sgroot, w, h)

            return gl;
        }
        
        width = 1;
	height = -1;
        
        function reshape(ctx, sgroot)
	{
	    var canvas = document.getElementById('example');
            if (canvas.width == width && canvas.width == height)
                return;

	    width = canvas.width 
	    height = canvas.height 
	    // 画面の調節はいまだ手作業

            ctx.viewport(0, 0, width, height);
	    //ctx.perspectiveMatrix = new J3DIMatrix4()
	    //sgroot.getCamera(ctx)

        }
        
        function drawObject(ctx, node, angle, xyz, scale, glObj)
        {
            // setup VBOs
            ctx.enableVertexAttribArray(0);
            ctx.enableVertexAttribArray(1);
            ctx.enableVertexAttribArray(2);

            ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.vertexObject);
            ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0);
            
            ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.normalObject);
            ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0);
            
            ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.texCoordObject);
            ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0);

            ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, glObj.indexObject);

	    // generate the model-view matrix 
	    //var mvMatrix = new J3DIMatrix4();
	    var mvMatrix = create_matrix(node, angle, xyz, scale)
	    /*var my_mat = new J3DIMatrix4()

	    mvMatrix.translate(xyz[0],xyz[1],xyz[2]);
	    mvMatrix.rotate(angle[0],0,1,0);
	    mvMatrix.rotate(angle[1],1,0,0);
	    mvMatrix.rotate(angle[2],0,0,1);
            mvMatrix.scale(scale, scale, scale);
	    mvMatrix.getAsArrayMatrix(my_mat.$matrix)

	    node.mat = my_mat
	    hand_mat(node)
            */

            // construct the normal matrix from the model-view matrix
            var normalMatrix = new J3DIMatrix4(mvMatrix);
            normalMatrix.invert();
            normalMatrix.transpose();
            normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);
            
            // construct the model-view * projection matrix
            var mvpMatrix = new J3DIMatrix4(ctx.perspectiveMatrix);
            mvpMatrix.multiply(mvMatrix);
            mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);

            ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture);
            ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);
        }
        
        function drawPicture(ctx,sgroot,w,h)
        {
            reshape(ctx, sgroot)
            ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT)
	    //sgroot.getCamera(ctx)

            MainLoop(ctx,sgroot,w,h)

            ctx.flush();
            
            framerate.snapshot();
            
            currentAngle += incAngle;
	    if (currentAngle > 360){
		currentAngle -= 360;
	    }
        }

        function start()
        {
            var c = document.getElementById("example");
            var w = Math.floor(window.innerWidth * 0.9);
            var h = Math.floor(window.innerHeight * 0.9);

            c.width = w;
	    c.height = h;
	    theta  = 90
	    theta1 = 90
	    cameraAngle_xyz = new Array(0,0,0)

	    var ctx = init(w, h);
	    
	    document.onkeydown = HandleKeyDown;
	    document.onkeyup = HandleKeyUp;

            currentAngle = 0;
	    incAngle = 2.0;

            var f = function() { drawPicture(ctx,ctx.sgroot,w,h) };
            setInterval(f, 10);
            framerate = new Framerate("framerate");
    
	}
    </script>
    <style type="text/css">
        canvas {
            border: 2px solid black;
        }
    </style>
  </head>
  <body onload="start()">
    <canvas id="example">
    There is supposed to be an example drawing here, but it's not important.
    </canvas>
    <div id="framerate"></div>
    <div id="console"></div>
  </body>
</html>