Mercurial > hg > Members > e105716

comparison fps/fps.html @ 1:6b217e0f301c

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