view fps/fps.html @ 3:aa7abf13d3f5 draft default tip

fix bug
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Wed, 16 May 2012 21:56:12 +0900
parents 47399f2f3a80
children
line wrap: on
line source

<html>
<head>
<title>WebGL fps</title> 
<script src="resources/J3DI.js"> </script>    
<script src="resources/J3DIMath.js"> </script>
<script src="resources/parse.js"> </script>
<script src="resources/makePanel.js"> </script>
<script src="resources/jkl-parsexml.js"> </script>    
<script src="resources/keyboard.js"> </script>    
<script src="resources/mouse.js"> </script>    
</head>

<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);
}
</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);
        //    if(color.a == 1.0)color=vec4(1,0,0,1);
        //    else color=vec4(0,1,1,1);
        gl_FragColor = vec4(color.xyz * v_Dot, color.a);
        //    gl_FragColor = vec4(color.xyz * v_Dot, 0.5);
}
</script> 


<script>
//画面(canvas)の大きさ
var w = 1024;
var h = 640;

//var mvMatrix = mat4.create();


function init()
{
        gl = initWebGL("game", "vshader", "fshader", 
                        [ "vNormal", "vTexCoord", "vPosition"],
                        [ 0, 0, 0, 1 ], 10000);

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

        gl.enable(gl.TEXTURE_2D);

        modelMap = new XMLModelMap(gl);
        modelMap.load("./xml/cube.xml");
        object = modelMap["Cube"];
        object2 = modelMap["Cube"];
        object3 = modelMap["Cube"];

        modelMap.load("./xml/underwall.xml");
        object4 = modelMap["UnderWall"];

        return gl;
}

function XMLModelMap(gl) {
        this.gl = gl;
}

XMLModelMap.prototype.load = function(file) {
        var data = parseObj(file);
        if(!data) return;
        for(var name in data) {
                this[name] = makeXmlObj(gl,data[name]);
                this[name].texture = loadImageTexture(this.gl, data[name].image);
        }
}

/* translate */
xPos = 0;
yPos = 0;
zPos = 0;

/* rotate */
xRool = 0;
yRool = 0;
zRool = 0;

/* moving late */
speedX = 0;
speedZ = 0;

/* rotating late */
//rotateX = 0;
//rotateY = 0;

yaw = 0;
yawRate = 0;


function reshape(ctx, ortho)
{
        var canvas = document.getElementById('game');

        width = canvas.width;
        height = canvas.height;

        ctx.viewport(0, 0, width, height);

        var t = width/height;

        ctx.perspectiveMatrix = new J3DIMatrix4();
        ctx.perspectiveMatrix.frustum(-0.5, 0.5, -0.5 / t, 0.5 / t, 1, 100000);
}


function setCamera(ctx){
    ctx.viewport(0, 0, width, height);

    var t = width/height;

    ctx.perspectiveMatrix.makeIdentity();
    ctx.perspectiveMatrix.frustum(-0.5, 0.5, -0.5 / t, 0.5 / t, 1, 100000);

    var x = Math.cos((angle+90)*Math.PI/180 );
    var z = Math.sin((angle+90)*Math.PI/180 );

    cameraX += x * speedZ;
    cameraZ += z * speedZ;

    ctx.perspectiveMatrix.rotate(angle,0,1,0);
    ctx.perspectiveMatrix.translate(cameraX,0,cameraZ);

}

angle = 0;
cameraX = 0;
cameraZ = 0;

FILPCOUNT = 0;
function loop(ctx, ortho)
{
        ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);	

	setCamera(ctx);

        PutSpriteV(ctx, cube_X, cube_Y, cube_Z, 1, matrix, object);
        PutSpriteV(ctx, cube_X2, cube_Y2, cube_Z2, 1, matrix, object2);
        PutSpriteV(ctx, cube_X3, cube_Y3, cube_Z3, 1, matrix, object3);
        PutSpriteV(ctx, ground_X, ground_Y, ground_Z, 2, matrix2, object4);

        move();	
        ctx.flush();

        FILPCOUNT++;
        framerate.snapshot();
}


function opening(ctx, ortho)
{
        reshape(ctx, ortho);
        ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);

        ctx.flush();
        var f = function() { loop(ctx, ortho); };
        setInterval(f, 10);
}


// display size
var W = 1024;
var H = 640;

function start() 
{
        var ortho = {left:0, right:200, bottom:140, top:0}
        matrix = new J3DIMatrix4(); // global variable 
        matrix2 = new J3DIMatrix4(); // global variable 


        cube_X = 0; 
        cube_Y = 0;
        cube_Z = -10;

        cube_X2 = 5; 
        cube_Y2 = 0;
        cube_Z2 = -10;

        cube_X3 = -5; 
        cube_Y3 = 0;
        cube_Z3 = -10;

        ground_X = 0;
        ground_Y = 15;
        ground_Z = -50;


        //    var c = document.getElementById("game");
        //    c.width = W;
        //    c.height = H;

        var ctx = init();
        //var ctx2  = init("./xml/sphere.xml","Sphere")

        o = function() {opening(ctx, ortho);};
        setTimeout(o, 10);
        framerate = new Framerate("framerate");
}


function loadFile(objectname)
{
        var filename = "./xml/"+objectname+".xml";
        modelMap.load(filename);
        //console.log(filename);
        object = modelMap[objectname];
}

function objToString(obj,map,indent){
        indent=indent?indent+"\t":"";if(!map)map={};
        if(map[obj])return;
        map[obj]=true;
        if(typeof obj=="string"||typeof obj=="number"||typeof obj=="boolena")return indent+obj;
        if(typeof obj=="array"){

                for(var i=0,s="";i < obj.length;i++ )s+=objToString(obj[i],map,indent)+",";
                return indent+"["+s+"]";
        }
        var s="";for(var i in obj)s+=indent+"\t"+i+":"+objToString(obj[i],map)+"\n";return indent+"{"+s+"}";
}

</script>

<body onload="start()" onkeydown="keyboardDown()" onkeypress="keyboardPress()" onkeyup="keyboardUp()" onmousedown="mouseDown();" onmouseup="mouseUp();" style='overflow:hidden; '>
<canvas id="game" width=1024 height=640 >
</canvas>
<form onsubmit="loadFile(document.getElementById('filename').value);return false;">
<input type="text" id="filename" value="Cube">
</form>
<div id="framerate"></div>
<div id="console"></div>


</body>

</html>