Mercurial > hg > Game > WebGL

<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);

    modelMap = new XMLModelMap(gl);
    // modelMap.load("./xml/Cube.xml");
	modelMap.load("./xml/Musi.xml");
    object = modelMap["Musi"];

    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>
author	Syusaku Morita <e105716@ie.u-ryukyu.ac.jp>
date	Thu, 19 Apr 2012 16:02:19 +0900
parents	85896f291a95
children	ceaf668dd4b2