Mercurial > hg > Members > e105711

<!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>
  </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>

    var WIDTH = 1024;
    var HEIGHT = 640;
    var MODE = TITLE;
    notesArray = [];
    var Interval = 20;
    function main(){
    var c = document.getElementById("example");
    c.width = WIDTH;
    c.height = HEIGHT;
    var ctx = init();
    l = function(){loop(ctx)};
    loadNotes();
    loadSounds();
    }

    function gameStart(){
      setInterval(l,Interval);
    }

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

    function loop(ctx){ //main loop
      gameRender(ctx,MODE);
    }

    width = -1;
    height = -1;

    function reshape(ctx)
    {
    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(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:scroll'>
    <font size="4">
      TITLE) SPACE:Go to MAIN MODE<br>
      MAIN MODE)S:High-hat &nbsp;&nbsp; D:Snare  &nbsp;&nbsp; F:Kick  &nbsp;&nbsp; J:Tom  &nbsp;&nbsp; K:Cymbal  &nbsp;&nbsp; SPACE:Play/Stop &nbsp;&nbsp; <!--A:AUTO PLAY<br>-->
      <!--  	AUTO PLAY)Q:Quit(Back to MAIN MODE)-->
    </font>
    <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>
  </body>
</html>
author	e105711 <yomitan.ie.u-ryukyu.ac.jp>
date	Thu, 03 May 2012 00:52:06 +0900
parents
children	4bcac064db6c