view webGL/DrumSimulator.html @ 25:6467074ad764 draft

add panel.pdf
author e105711 <yomitan.ie.u-ryukyu.ac.jp>
date Thu, 19 Jul 2012 16:48:15 +0900
parents 3f8305d62106
children
line wrap: on
line source

<!DOCTYPE html> 

<html> 
  <head> 
    <meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
    <title>WebGL test2</title> 
    <script src="src/keybord.js"></script>
    <script src="src/sound.js"></script>
    <script src="src/J3DI.js"></script>
    <script src="src/J3DIMath.js"></script>
    <script src="src/f4xml.js"></script>
    <script src="src/const.js"></script>
    <script src="src/mainfunc.js"></script>
    <script src="src/jkl-parsexml.js"></script>
    <script src="src/f4notes.js"></script>
    <script src="src/Note.js"></script>
    <script src="src/stats.js"></script>
    <script src="src/Obj.js"></script>
    <script src="src/jquery-1.7.2.min.js"></script>
    <script src="src/Cursor.js"></script>    
    <script src="src/loadMusicFiles.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> 
renderStats = new Stats();
updateStats = new Stats();

var MODE = TITLE;
var AUTO = true;
var notesArray = [[],[],[],[],[],[],[],[]];
var objsArray = [];
var musicsArray = [];
var cursor = new Cursor();

/* these variables are defined at const.js */
//    var WIDTH,HEIGHT,FPS,Interval



function main(){
    document.body.appendChild(renderStats.domElement);
    document.body.appendChild(updateStats.domElement);
    c = document.getElementById("example");
    canvas4text = document.getElementById("textCanvas");
    ctext = canvas4text.getContext("2d");
    c.width = WIDTH;
    c.height = HEIGHT;
    cursor.reset();
    ctx = init();

    loop = (function(){
        nextGameTick = (new Date).getTime();
        return function(){
	    while((new Date).getTime()>nextGameTick){
		updateStats.update();
		gameUpdate();
		nextGameTick += Interval;
	    }
	    renderStats.update();
	    gameRender(ctx);

        };
    })();

    toTitle();
    loadSounds();
    loadMusicFiles();
    dummyPlay();
}

function gameStart(){
    setInterval(loop,15);
}

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);
    parseXml(gl);
    
    return gl;
}


width = -1;
height = -1;

function reshape(ctx)
{
    width = c.width;
    height = c.height;
    
    ctx.viewport(0, 0, width, height);
    
    ctx.perspectiveMatrix = new J3DIMatrix4();
    ctx.perspectiveMatrix.ortho(0, -200, 0, -140, 0, 10000);
}

  </script> 
  <style type="text/css"> 
    canvas {
    border: 2px solid black;
    }
  </style> 
  <body onload="main()" onkeydown="keybordDown()" onkeypress="keybordPress()" onkeyup="keybordUp()" <!--style='overflow:hidden'-->>
    <div align="center">
    <canvas id="example"> 
      There is supposed to be an example drawing here, but it's not important.
    </canvas> 
    </div>
    <canvas id="textCanvas" style="display:none;">
    </canvas>
    <div id="console"></div> 
  </body> 
</html>