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>
  </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;
	function start(){
	var c = document.getElementById("example");
	c.width = WIDTH;
	c.height = HEIGHT;
	var ctx = init();
	l = function(){loop(ctx)};
	setInterval(l,10);
	}

	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="start()" 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	Wed, 25 Apr 2012 23:45:59 +0900
parents
children	4fd71be3fb0b