Mercurial > hg > Members > e105716
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>