Mercurial > hg > Game > WebGL

diff drawObj/drawObj.html~ @ 6:a6215e33597a

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
add Musi.xml
author Syusaku Morita <e105716@ie.u-ryukyu.ac.jp>
date Thu, 19 Apr 2012 16:02:19 +0900
parents d17004426a74
children
line wrap: on
line diff
--- a/drawObj/drawObj.html~	Mon Apr 16 01:02:54 2012 +0900
+++ b/drawObj/drawObj.html~	Thu Apr 19 16:02:19 2012 +0900
@@ -1,7 +1,196 @@
 <html>
-<head>
+  <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;
 
-</head>
+    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);
+    
+    modelMap = new XMLModelMap(gl);
+    modelMap.load("./xml/Cube.xml");
+    object = modelMap["Cube"];
+
+    return gl;
+    }
+    
+    function XMLModelMap(gl) {
+    this.gl = gl;
+    }
+
+    XMLModelMap.prototype.load = function(file) {
+    var data = parseObj(file);
+    if(!data) return;
+    for(var name in data) {
+    this[name] = makeXmlObj(gl,data[name]);
+    this[name].texture = loadImageTexture(this.gl, data[name].image);
+    }
+    }
+
+    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, X, Y, Z, 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
+    X = 0; 
+    Y = 0;
+    Z = -10;
+
+//    var c = document.getElementById("game");
+//    c.width = W;
+//    c.height = H;
+
+    var ctx = init();
+
+    o = function() {opening(ctx, ortho);};
+    setTimeout(o, 10);
+    framerate = new Framerate("framerate");
+    }
+
+
+    function loadFile(objectname)
+    {
+    var filename = "./xml/"+objectname+".xml";
+    modelMap.load(filename);
+//    console.log(filename);
+    object = modelMap[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>