Mercurial > hg > Members > e105716
diff fps/fps.html @ 0:fbb6f4f89f76
info3_1week
| author | Syusaku Morita <e105716@ie.u-ryukyu.ac.jp> |
|---|---|
| date | Fri, 27 Apr 2012 13:13:49 +0900 |
| parents | |
| children | 6b217e0f301c |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/fps/fps.html Fri Apr 27 13:13:49 2012 +0900 @@ -0,0 +1,223 @@ +<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"]; + + 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); + } + } + + xPos = 0; + yPos = 0; + zPos = 0; + + xEye = 0; + yEye = 0; + zEye = 0; + + speedX = 0; + speedZ = 0; + + rotateX = 0; + rotateY = 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); + + } + + + FILPCOUNT = 0; + function loop(ctx, ortho) + { + ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); + + ctx.perspectiveMatrix.lookat([-xEye,-yEye,-zEye], [0,0,-10], [0,1,0]); + ctx.perspectiveMatrix.translate(-xPos,-yPos,-zPos); + + PutSpriteV(ctx, X, Y, Z, 1, matrix, object); + + move(); + ctx.flush(); + + FILPCOUNT++; + framerate.snapshot(); + } + + function move(){ + if(speedX != 0) xPos += speedX; + if(speedZ != 0) zPos -= speedZ; + if(rotateX != 0) xEye += rotateX; + if(rotateY != 0) yEye -= rotateY; + } + + 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 + X = 0; + Y = 0; + Z = -10; + +// var c = document.getElementById("game"); +// c.width = W; +// c.height = H; + + var ctx = init(); + + 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>