Mercurial > hg > Members > e085711
comparison webGL/dandy/dandy5.html~ @ 25:e8c591a01a8e
update makePanel
author | NOBUYASU Oshiro |
---|---|
date | Fri, 05 Nov 2010 08:40:26 +0900 |
parents | |
children |
comparison
equal
deleted
inserted
replaced
24:7c1ff1927da3 | 25:e8c591a01a8e |
---|---|
1 <!DOCTYPE html> | |
2 | |
3 <html> | |
4 <head> | |
5 <title>WebGL dandy</title> | |
6 <script src="resources/J3DI.js"> </script> | |
7 <script src="resources/J3DIMath.js"> </script> | |
8 <script src="resources/jkl-parsexml.js"> </script> | |
9 <script src="resources/makePanel2.js"> </script> | |
10 <script src="resources/Character_state.js"> </script> | |
11 <script src="resources/Character.js"> </script> | |
12 <script src="resources/schedule.js"> </script> | |
13 <script src="resources/Player.js"> </script> | |
14 <script src="resources/enemy.js"> </script> | |
15 <script src="resources/bullet.js"> </script> | |
16 <script src="resources/collision.js"> </script> | |
17 <script src="resources/constKey.js"> </script> | |
18 <script src="resources/keybord.js"> </script> | |
19 <script src="resources/boss.js"> </script> | |
20 <script src="resources/parse.js"> </script> | |
21 <script src="resources/bom.js"> </script> | |
22 <script src="resources/pause.js"> </script> | |
23 <script src="resources/tama.js"> </script> | |
24 <script src="resources/sankaku.js"> </script> | |
25 <script src="resources/syokika.js"> </script> | |
26 <script src="resources/sound.js"> </script> | |
27 <script src="resources/const.js"> </script> | |
28 <script src="resources/charaTable.js"> </script> | |
29 | |
30 <script id="vshader" type="x-shader/x-vertex"> | |
31 uniform mat4 u_modelViewProjMatrix; | |
32 uniform mat4 u_normalMatrix; | |
33 uniform vec3 lightDir; | |
34 | |
35 attribute vec3 vNormal; | |
36 attribute vec4 vTexCoord; | |
37 attribute vec4 vPosition; | |
38 | |
39 varying float v_Dot; | |
40 varying vec2 v_texCoord; | |
41 | |
42 void main() | |
43 { | |
44 gl_Position = u_modelViewProjMatrix * vPosition; | |
45 v_texCoord = vTexCoord.st; | |
46 vec4 transNormal = u_normalMatrix * vec4(vNormal,1); | |
47 v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); | |
48 } | |
49 </script> | |
50 | |
51 | |
52 <script id="fshader" type="x-shader/x-fragment"> | |
53 #ifdef GL_ES | |
54 precision mediump float; | |
55 #endif | |
56 | |
57 uniform sampler2D sampler2d; | |
58 | |
59 varying float v_Dot; | |
60 varying vec2 v_texCoord; | |
61 | |
62 void main() | |
63 { | |
64 vec4 color = texture2D(sampler2d,v_texCoord); | |
65 // color += vec4(0.1,0.1,0.1,1); | |
66 // if(color.a == 1)color=vec4(1,0,0,1); | |
67 // else color=vec4(0,1,1,1); | |
68 gl_FragColor = vec4(color.xyz * v_Dot, color.a); | |
69 // gl_FragColor = vec4(color.xyz * v_Dot, 0.5); | |
70 } | |
71 </script> | |
72 | |
73 <script> | |
74 | |
75 //画面(canvas)の大きさ | |
76 var w = 1024; | |
77 var h = 640; | |
78 function init() | |
79 { | |
80 var gl = initWebGL("example", "vshader", "fshader", | |
81 [ "vNormal", "vTexCoord", "vPosition"], | |
82 [ 0, 0, 0, 1 ], 10000); | |
83 | |
84 gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1); | |
85 gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0); | |
86 | |
87 gl.enable(gl.TEXTURE_2D); | |
88 | |
89 sankakuf();//mycos,mysinの作成 sankaku.js | |
90 parseXml(gl);//parse.js | |
91 initEnemyTable(gl);//parseXmlの後に呼ぶこと | |
92 | |
93 return gl; | |
94 } | |
95 | |
96 width = -1; | |
97 height = -1; | |
98 | |
99 function reshape(ctx, ortho) | |
100 { | |
101 var canvas = document.getElementById('example'); | |
102 if (canvas.width == width && canvas.width == height) | |
103 return; | |
104 | |
105 | |
106 width = canvas.width; | |
107 height = canvas.height; | |
108 | |
109 ctx.viewport(0, 0, width, height); | |
110 | |
111 ctx.perspectiveMatrix = new J3DIMatrix4(); | |
112 // ctx.perspectiveMatrix.ortho(50, -150, 0, -140, -1000, 10000); | |
113 ctx.perspectiveMatrix.ortho(ortho.left, -ortho.right, ortho.top, -ortho.bottom, 0, 10000); | |
114 | |
115 // ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000); | |
116 } | |
117 | |
118 | |
119 | |
120 function loop(ctx, ortho) | |
121 { | |
122 reshape(ctx, ortho); | |
123 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); | |
124 | |
125 Player(ctx, jiki, pad, ortho); | |
126 | |
127 obj_draw(ctx); | |
128 | |
129 PutBom(ctx); | |
130 pause(); | |
131 | |
132 | |
133 ctx.flush(); | |
134 | |
135 filpcount++; | |
136 schedule(); | |
137 | |
138 state_update(); | |
139 | |
140 collision_detect(); | |
141 delete_obj( ctx ) | |
142 | |
143 framerate.snapshot(); | |
144 } | |
145 | |
146 function opening(ctx, ortho) | |
147 { | |
148 reshape(ctx, ortho); | |
149 ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); | |
150 | |
151 PutSpriteF(ctx, 100, 70, 1, font[10]); | |
152 PutSpriteF(ctx, 170, 50, 1, font[11]); | |
153 PutSpriteF(ctx, 40, 120, 1, font[12]); | |
154 | |
155 ctx.flush(); | |
156 | |
157 if(pad.start == 0) {setTimeout(o, 100);} | |
158 if(pad.start != 0) { | |
159 jiki.bf = true; | |
160 pad.st = 1; | |
161 gameflage = 1; | |
162 SoundPlay(0); | |
163 setInterval(f, 10); | |
164 } | |
165 } | |
166 function start() | |
167 { | |
168 var ortho = makeOrthoPara(0,200,140,0); | |
169 | |
170 var c = document.getElementById("example"); | |
171 | |
172 | |
173 //画面の大きさ | |
174 c.width = w; | |
175 c.height = h; | |
176 | |
177 var ctx = init(); | |
178 | |
179 | |
180 currentAngle = 0; | |
181 incAngle = 10; | |
182 f = function() { loop(ctx, ortho) }; | |
183 o = function() {opening(ctx, ortho)} | |
184 setTimeout(o, 10); | |
185 framerate = new Framerate("framerate"); | |
186 } | |
187 </script> | |
188 <style type="text/css"> | |
189 canvas { | |
190 border: 2px solid black; | |
191 } | |
192 </style> | |
193 </head> | |
194 <body onload="start()" onkeydown="keybordDown()" onkeypress="keybordPress()" onkeyup="keybordUp()" style='overflow:hidden'> | |
195 <!--<body onload = "start()" style='overflow:hidden'> --> | |
196 <canvas id="example"> | |
197 There is supposed to be an example drawing here, but it's not important. | |
198 </canvas> | |
199 <div id="framerate"></div> | |
200 <div id="console"></div> | |
201 | |
202 <img id="test" style="border:1px solid red"> | |
203 | |
204 </body> | |
205 </html> |