Mercurial > hg > Members > e085711
diff webGL/dandy/dandy.html @ 26:933062d8e917
update library J3DI.js J3DMath.js
| author | NOBUYASU Oshiro |
|---|---|
| date | Tue, 09 Nov 2010 00:03:42 +0900 |
| parents | |
| children |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/webGL/dandy/dandy.html Tue Nov 09 00:03:42 2010 +0900 @@ -0,0 +1,206 @@ +<!DOCTYPE html> + +<html> + <head> + <meta http-equiv="Content-Type" content="text/html;charset=UTF-8"> + <title>WebGL dandy</title> + <script src="resources/J3DI.js"> </script> + <script src="resources/J3DIMath.js"> </script> + <script src="resources/jkl-parsexml.js"> </script> + <script src="resources/makePanel.js"> </script> + <script src="resources/Character_state.js"> </script> + <script src="resources/Character.js"> </script> + <script src="resources/schedule.js"> </script> + <script src="resources/Player.js"> </script> + <script src="resources/enemy.js"> </script> + <script src="resources/bullet.js"> </script> + <script src="resources/collision.js"> </script> + <script src="resources/constKey.js"> </script> + <script src="resources/keybord.js"> </script> + <script src="resources/boss.js"> </script> + <script src="resources/parse.js"> </script> + <script src="resources/bom.js"> </script> + <script src="resources/pause.js"> </script> + <script src="resources/tama.js"> </script> + <script src="resources/sankaku.js"> </script> + <script src="resources/syokika.js"> </script> + <script src="resources/sound.js"> </script> + <script src="resources/const.js"> </script> + <script src="resources/charaTable.js"> </script> + + <script id="vshader" type="x-shader/x-vertex"> + uniform mat4 u_modelViewProjMatrix; + uniform mat4 u_normalMatrix; + uniform vec3 lightDir; + + attribute vec3 vNormal; + attribute vec4 vTexCoord; + attribute vec4 vPosition; + + varying float v_Dot; + varying vec2 v_texCoord; + + void main() + { + gl_Position = u_modelViewProjMatrix * vPosition; + v_texCoord = vTexCoord.st; + vec4 transNormal = u_normalMatrix * vec4(vNormal,1); + v_Dot = max(dot(transNormal.xyz, lightDir), 0.0); + } + </script> + + + <script id="fshader" type="x-shader/x-fragment"> +#ifdef GL_ES + precision mediump float; +#endif + + uniform sampler2D sampler2d; + + varying float v_Dot; + varying vec2 v_texCoord; + + void main() + { + vec4 color = texture2D(sampler2d,v_texCoord); + // color += vec4(0.1,0.1,0.1,1); + // if(color.a == 1)color=vec4(1,0,0,1); + // else color=vec4(0,1,1,1); + gl_FragColor = vec4(color.xyz * v_Dot, color.a); + // gl_FragColor = vec4(color.xyz * v_Dot, 0.5); + } + </script> + + <script> + + //画面(canvas)の大きさ + var w = 1024; + var h = 640; + function init() + { + var gl = initWebGL("example", "vshader", "fshader", + [ "vNormal", "vTexCoord", "vPosition"], + [ 0, 0, 0, 1 ], 10000); + + gl.uniform3f(gl.getUniformLocation(gl.program, "lightDir"), 0, 0, 1); + gl.uniform1i(gl.getUniformLocation(gl.program, "sampler2d"), 0); + + gl.enable(gl.TEXTURE_2D); + + sankakuf();//mycos,mysinの作成 sankaku.js + parseXml(gl);//parse.js + initEnemyTable(gl);//parseXmlの後に呼ぶこと + + return gl; + } + + width = -1; + height = -1; + + function reshape(ctx, ortho) + { + var canvas = document.getElementById('example'); + if (canvas.width == width && canvas.width == height) + return; + + + width = canvas.width; + height = canvas.height; + + ctx.viewport(0, 0, width, height); + + ctx.perspectiveMatrix = new J3DIMatrix4(); +// ctx.perspectiveMatrix.ortho(50, -150, 0, -140, -1000, 10000); + ctx.perspectiveMatrix.ortho(ortho.left, -ortho.right, ortho.top, -ortho.bottom, 0, 10000); + +// ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000); + } + + + + function loop(ctx, ortho) + { + reshape(ctx, ortho); + ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); + + Player(ctx, jiki, pad, ortho); + + obj_draw(ctx); + + PutBom(ctx); + pause(); + + + ctx.flush(); + + filpcount++; + schedule(); + + state_update(); + + collision_detect(); + delete_obj( ctx ) + + framerate.snapshot(); + } + + function opening(ctx, ortho) + { + reshape(ctx, ortho); + ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); + + PutSpriteF(ctx, 100, 70, 1, font[10]); + PutSpriteF(ctx, 170, 50, 1, font[11]); + PutSpriteF(ctx, 40, 120, 1, font[12]); + + ctx.flush(); + + if(pad.start == 0) {setTimeout(o, 100);} + if(pad.start != 0) { + jiki.bf = true; + pad.st = 1; + gameflage = 1; + SoundPlay(0); + setInterval(f, 10); + } + } + function start() + { + var ortho = makeOrthoPara(0,200,140,0); + + var c = document.getElementById("example"); + + + //画面の大きさ + c.width = w; + c.height = h; + + var ctx = init(); + + + currentAngle = 0; + incAngle = 10; + f = function() { loop(ctx, ortho) }; + o = function() {opening(ctx, ortho)} + setTimeout(o, 10); + framerate = new Framerate("framerate"); + } + </script> + <style type="text/css"> + canvas { + border: 2px solid black; + } + </style> + </head> + <body onload="start()" onkeydown="keybordDown()" onkeypress="keybordPress()" onkeyup="keybordUp()" style='overflow:hidden'> + <!--<body onload = "start()" style='overflow:hidden'> --> + <canvas id="example"> + There is supposed to be an example drawing here, but it's not important. + </canvas> + <div id="framerate"></div> + <div id="console"></div> + + <img id="test" style="border:1px solid red"> + + </body> +</html>