Mercurial > hg > Members > e085711

comparison webGL/dandy/dandy.html @ 26:933062d8e917

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