Mercurial > hg > Game > WebGL

comparison drawObj/drawObj.html @ 3:d17004426a74

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add drawObj
author Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp>
date Sun, 15 Apr 2012 19:03:54 +0900
parents
children 86eb5933aeb9
comparison
equal deleted inserted replaced
2:b3f1d1f5673c 3:d17004426a74
1 <html>
2 <head>
3 <title>WebGL dandy</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 function init()
61 {
62 gl = initWebGL("game", "vshader", "fshader",
63 [ "vNormal", "vTexCoord", "vPosition"],
64 [ 0, 0, 0, 1 ], 10000);
65
66 gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1);
67 gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0);
68
69 gl.enable(gl.TEXTURE_2D);
70
71 parseXml(gl);//parse.js
72
73 return gl;
74 }
75
76
77 function parseXml(gl)
78 {
79 loadObjXml(gl, "./xml/cube.xml");
80 }
81
82
83 function reshape(ctx, ortho)
84 {
85 var canvas = document.getElementById('game');
86
87 width = canvas.width;
88 height = canvas.height;
89
90 ctx.viewport(0, 0, width, height);
91
92 var t = width/height;
93
94 ctx.perspectiveMatrix = new J3DIMatrix4();
95 ctx.perspectiveMatrix.frustum(-0.5, 0.5, -0.5 / t, 0.5 / t, 1, 100000);
96
97 }
98
99
100 FILPCOUNT = 0;
101 function loop(ctx, ortho)
102 {
103 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
104
105 PutSpriteV(ctx, 0, 0, -10, 2, matrix, object);
106
107 ctx.flush();
108
109 FILPCOUNT++;
110 framerate.snapshot();
111 }
112
113
114
115 function opening(ctx, ortho)
116 {
117 reshape(ctx, ortho);
118 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
119
120 ctx.flush();
121
122 var f = function() { loop(ctx, ortho); };
123 setInterval(f, 10);
124
125 }
126
127
128 // display size
129 var W = 1024;
130 var H = 640;
131
132 function start()
133 {
134 var ortho = {left:0, right:200, bottom:140, top:0}
135 matrix = new J3DIMatrix4(); // global variable
136
137 // var c = document.getElementById("game");
138 // c.width = W;
139 // c.height = H;
140
141 var ctx = init();
142 object = gl.obj["Cube"]; // default object.
143
144 o = function() {opening(ctx, ortho);};
145 setTimeout(o, 10);
146 framerate = new Framerate("framerate");
147 }
148
149
150 function loadFile(objectname)
151 {
152 var filename = "./xml/"+objectname+".xml";
153 loadObjXml(gl, filename);
154 console.log(filename);
155 object = gl.obj[objectname];
156 }
157
158 function objToString(obj,map,indent){
159 indent=indent?indent+"\t":"";if(!map)map={};
160 if(map[obj])return;
161 map[obj]=true;
162 if(typeof obj=="string"||typeof obj=="number"||typeof obj=="boolena")return indent+obj;
163 if(typeof obj=="array"){
164
165 for(var i=0,s="";i < obj.length;i++ )s+=objToString(obj[i],map,indent)+",";
166 return indent+"["+s+"]";
167 }
168 var s="";for(var i in obj)s+=indent+"\t"+i+":"+objToString(obj[i],map)+"\n";return indent+"{"+s+"}";
169 }
170
171 </script>
172
173 <body onload="start()" onkeydown="keyboardDown()" onkeypress="keyboardPress()" onkeyup="keyboardUp()"
174 onmousedown="mouseDown();" onmouseup="mouseUp();" style='overflow:hidden; '>
175 <canvas id="game" width=1024 height=640 >
176 </canvas>
177 <form onsubmit="loadFile(document.getElementById('filename').value);return false;">
178 <input type="text" id="filename" value="Cube">
179 </form>
180 <div id="framerate"></div>
181 <div id="console"></div>
182
183
184 </body>
185
186 </html>