Mercurial > hg > Members > e105716
comparison 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 |
comparison
equal
deleted
inserted
replaced
-1:000000000000 | 0:fbb6f4f89f76 |
---|---|
1 <html> | |
2 <head> | |
3 <title>WebGL fps</title> | |
4 <script src="resources/J3DI.js"> </script> | |
5 <script src="resources/J3DIMath.js"> </script> | |
6 <script src="resources/parse.js"> </script> | |
7 <script src="resources/makePanel.js"> </script> | |
8 <script src="resources/jkl-parsexml.js"> </script> | |
9 <script src="resources/keyboard.js"> </script> | |
10 <script src="resources/mouse.js"> </script> | |
11 </head> | |
12 | |
13 <script id="vshader" type="x-shader/x-vertex"> | |
14 uniform mat4 u_modelViewProjMatrix; | |
15 uniform mat4 u_normalMatrix; | |
16 uniform vec3 lightDir; | |
17 | |
18 attribute vec3 vNormal; | |
19 attribute vec4 vTexCoord; | |
20 attribute vec4 vPosition; | |
21 | |
22 varying float v_Dot; | |
23 varying vec2 v_texCoord; | |
24 | |
25 void main() | |
26 { | |
27 gl_Position = u_modelViewProjMatrix * vPosition; | |
28 v_texCoord = vTexCoord.st; | |
29 vec4 transNormal = u_normalMatrix * vec4(vNormal,1); | |
30 v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); | |
31 } | |
32 </script> | |
33 | |
34 <script id="fshader" type="x-shader/x-fragment"> | |
35 #ifdef GL_ES | |
36 precision mediump float; | |
37 #endif | |
38 | |
39 uniform sampler2D sampler2d; | |
40 | |
41 varying float v_Dot; | |
42 varying vec2 v_texCoord; | |
43 | |
44 void main() | |
45 { | |
46 vec4 color = texture2D(sampler2d,v_texCoord); | |
47 color += vec4(0.1,0.1,0.1,1); | |
48 // if(color.a == 1.0)color=vec4(1,0,0,1); | |
49 // else color=vec4(0,1,1,1); | |
50 gl_FragColor = vec4(color.xyz * v_Dot, color.a); | |
51 // gl_FragColor = vec4(color.xyz * v_Dot, 0.5); | |
52 } | |
53 </script> | |
54 | |
55 | |
56 <script> | |
57 //画面(canvas)の大きさ | |
58 var w = 1024; | |
59 var h = 640; | |
60 | |
61 //var mvMatrix = mat4.create(); | |
62 | |
63 | |
64 function init() | |
65 { | |
66 gl = initWebGL("game", "vshader", "fshader", | |
67 [ "vNormal", "vTexCoord", "vPosition"], | |
68 [ 0, 0, 0, 1 ], 10000); | |
69 | |
70 gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 1, 1, 1); | |
71 gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0); | |
72 | |
73 gl.enable(gl.TEXTURE_2D); | |
74 | |
75 modelMap = new XMLModelMap(gl); | |
76 modelMap.load("./xml/Cube.xml"); | |
77 object = modelMap["Cube"]; | |
78 | |
79 return gl; | |
80 } | |
81 | |
82 function XMLModelMap(gl) { | |
83 this.gl = gl; | |
84 } | |
85 | |
86 XMLModelMap.prototype.load = function(file) { | |
87 var data = parseObj(file); | |
88 if(!data) return; | |
89 for(var name in data) { | |
90 this[name] = makeXmlObj(gl,data[name]); | |
91 this[name].texture = loadImageTexture(this.gl, data[name].image); | |
92 } | |
93 } | |
94 | |
95 xPos = 0; | |
96 yPos = 0; | |
97 zPos = 0; | |
98 | |
99 xEye = 0; | |
100 yEye = 0; | |
101 zEye = 0; | |
102 | |
103 speedX = 0; | |
104 speedZ = 0; | |
105 | |
106 rotateX = 0; | |
107 rotateY = 0; | |
108 | |
109 | |
110 function reshape(ctx, ortho) | |
111 { | |
112 var canvas = document.getElementById('game'); | |
113 | |
114 width = canvas.width; | |
115 height = canvas.height; | |
116 | |
117 ctx.viewport(0, 0, width, height); | |
118 | |
119 var t = width/height; | |
120 | |
121 ctx.perspectiveMatrix = new J3DIMatrix4(); | |
122 ctx.perspectiveMatrix.frustum(-0.5, 0.5, -0.5 / t, 0.5 / t, 1, 100000); | |
123 | |
124 } | |
125 | |
126 | |
127 FILPCOUNT = 0; | |
128 function loop(ctx, ortho) | |
129 { | |
130 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); | |
131 | |
132 ctx.perspectiveMatrix.lookat([-xEye,-yEye,-zEye], [0,0,-10], [0,1,0]); | |
133 ctx.perspectiveMatrix.translate(-xPos,-yPos,-zPos); | |
134 | |
135 PutSpriteV(ctx, X, Y, Z, 1, matrix, object); | |
136 | |
137 move(); | |
138 ctx.flush(); | |
139 | |
140 FILPCOUNT++; | |
141 framerate.snapshot(); | |
142 } | |
143 | |
144 function move(){ | |
145 if(speedX != 0) xPos += speedX; | |
146 if(speedZ != 0) zPos -= speedZ; | |
147 if(rotateX != 0) xEye += rotateX; | |
148 if(rotateY != 0) yEye -= rotateY; | |
149 } | |
150 | |
151 function opening(ctx, ortho) | |
152 { | |
153 reshape(ctx, ortho); | |
154 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); | |
155 | |
156 ctx.flush(); | |
157 | |
158 var f = function() { loop(ctx, ortho); }; | |
159 setInterval(f, 10); | |
160 | |
161 } | |
162 | |
163 | |
164 // display size | |
165 var W = 1024; | |
166 var H = 640; | |
167 | |
168 function start() | |
169 { | |
170 var ortho = {left:0, right:200, bottom:140, top:0} | |
171 matrix = new J3DIMatrix4(); // global variable | |
172 X = 0; | |
173 Y = 0; | |
174 Z = -10; | |
175 | |
176 // var c = document.getElementById("game"); | |
177 // c.width = W; | |
178 // c.height = H; | |
179 | |
180 var ctx = init(); | |
181 | |
182 o = function() {opening(ctx, ortho);}; | |
183 setTimeout(o, 10); | |
184 framerate = new Framerate("framerate"); | |
185 } | |
186 | |
187 | |
188 function loadFile(objectname) | |
189 { | |
190 var filename = "./xml/"+objectname+".xml"; | |
191 modelMap.load(filename); | |
192 // console.log(filename); | |
193 object = modelMap[objectname]; | |
194 } | |
195 | |
196 function objToString(obj,map,indent){ | |
197 indent=indent?indent+"\t":"";if(!map)map={}; | |
198 if(map[obj])return; | |
199 map[obj]=true; | |
200 if(typeof obj=="string"||typeof obj=="number"||typeof obj=="boolena")return indent+obj; | |
201 if(typeof obj=="array"){ | |
202 | |
203 for(var i=0,s="";i < obj.length;i++ )s+=objToString(obj[i],map,indent)+","; | |
204 return indent+"["+s+"]"; | |
205 } | |
206 var s="";for(var i in obj)s+=indent+"\t"+i+":"+objToString(obj[i],map)+"\n";return indent+"{"+s+"}"; | |
207 } | |
208 | |
209 </script> | |
210 | |
211 <body onload="start()" onkeydown="keyboardDown()" onkeypress="keyboardPress()" onkeyup="keyboardUp()" onmousedown="mouseDown();" onmouseup="mouseUp();" style='overflow:hidden; '> | |
212 <canvas id="game" width=1024 height=640 > | |
213 </canvas> | |
214 <form onsubmit="loadFile(document.getElementById('filename').value);return false;"> | |
215 <input type="text" id="filename" value="Cube"> | |
216 </form> | |
217 <div id="framerate"></div> | |
218 <div id="console"></div> | |
219 | |
220 | |
221 </body> | |
222 | |
223 </html> |