Mercurial > hg > Game > WebGL
diff drawObj/drawObj.html @ 3:d17004426a74
add drawObj
| author | Nobuyasu Oshiro <dimolto@cr.ie.u-ryukyu.ac.jp> |
|---|---|
| date | Sun, 15 Apr 2012 19:03:54 +0900 |
| parents | |
| children | 86eb5933aeb9 |
line wrap: on
line diff
--- /dev/null Thu Jan 01 00:00:00 1970 +0000 +++ b/drawObj/drawObj.html Sun Apr 15 19:03:54 2012 +0900 @@ -0,0 +1,186 @@ +<html> + <head> + <title>WebGL dandy</title> + <script src="resources/J3DI.js"> </script> + <script src="resources/J3DIMath.js"> </script> + <script src="resources/parse.js"> </script> + <script src="resources/makePanel.js"> </script> + <script src="resources/jkl-parsexml.js"> </script> + <script src="resources/keyboard.js"> </script> + <script src="resources/mouse.js"> </script> + </head> + + <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.0)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() + { + gl = initWebGL("game", "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); + + parseXml(gl);//parse.js + + return gl; + } + + + function parseXml(gl) + { + loadObjXml(gl, "./xml/cube.xml"); + } + + + function reshape(ctx, ortho) + { + var canvas = document.getElementById('game'); + + width = canvas.width; + height = canvas.height; + + ctx.viewport(0, 0, width, height); + + var t = width/height; + + ctx.perspectiveMatrix = new J3DIMatrix4(); + ctx.perspectiveMatrix.frustum(-0.5, 0.5, -0.5 / t, 0.5 / t, 1, 100000); + + } + + + FILPCOUNT = 0; + function loop(ctx, ortho) + { + ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); + + PutSpriteV(ctx, 0, 0, -10, 2, matrix, object); + + ctx.flush(); + + FILPCOUNT++; + framerate.snapshot(); + } + + + + function opening(ctx, ortho) + { + reshape(ctx, ortho); + ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); + + ctx.flush(); + + var f = function() { loop(ctx, ortho); }; + setInterval(f, 10); + + } + + + // display size + var W = 1024; + var H = 640; + + function start() + { + var ortho = {left:0, right:200, bottom:140, top:0} + matrix = new J3DIMatrix4(); // global variable + +// var c = document.getElementById("game"); +// c.width = W; +// c.height = H; + + var ctx = init(); + object = gl.obj["Cube"]; // default object. + + o = function() {opening(ctx, ortho);}; + setTimeout(o, 10); + framerate = new Framerate("framerate"); + } + + + function loadFile(objectname) + { + var filename = "./xml/"+objectname+".xml"; + loadObjXml(gl, filename); + console.log(filename); + object = gl.obj[objectname]; + } + +function objToString(obj,map,indent){ + indent=indent?indent+"\t":"";if(!map)map={}; + if(map[obj])return; +map[obj]=true; + if(typeof obj=="string"||typeof obj=="number"||typeof obj=="boolena")return indent+obj; + if(typeof obj=="array"){ + + for(var i=0,s="";i < obj.length;i++ )s+=objToString(obj[i],map,indent)+","; + return indent+"["+s+"]"; + } + var s="";for(var i in obj)s+=indent+"\t"+i+":"+objToString(obj[i],map)+"\n";return indent+"{"+s+"}"; +} + + </script> + + <body onload="start()" onkeydown="keyboardDown()" onkeypress="keyboardPress()" onkeyup="keyboardUp()" + onmousedown="mouseDown();" onmouseup="mouseUp();" style='overflow:hidden; '> + <canvas id="game" width=1024 height=640 > + </canvas> + <form onsubmit="loadFile(document.getElementById('filename').value);return false;"> + <input type="text" id="filename" value="Cube"> + </form> + <div id="framerate"></div> + <div id="console"></div> + + + </body> + +</html>