Mercurial > hg > Members > e105711
view webGL/DrumSimulator.html @ 6:8c25fd3f9866 draft
7th,change a way of sounds play
author | e105711 <yomitan.ie.u-ryukyu.ac.jp> |
---|---|
date | Sat, 05 May 2012 01:49:16 +0900 |
parents | a730b51d59eb |
children | c5455ae6cd70 |
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> </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 WIDTH = 1024; var HEIGHT = 640; // var WIDTH = 800; // var HEIGHT = 500; var MODE = TITLE; notesArray = []; var FPS = 30; var Interval = 1000/FPS; function main(){ document.body.appendChild(renderStats.domElement); document.body.appendChild(updateStats.domElement); c = document.getElementById("example"); c.width = WIDTH; c.height = HEIGHT; var ctx = init(); framerate = new Framerate("framerate"); // l = function(){loop(ctx)}; loop = (function(){ nextGameTick = (new Date).getTime(); return function(){ while((new Date).getTime()>nextGameTick){ updateStats.update(); gameUpdate(MODE); nextGameTick += Interval; } renderStats.update(); gameRender(ctx,MODE); }; })(); loadNotes(); loadSounds(); ptime=0; time1=0 } function gameStart(){ setInterval(loop,0); } /* function loop(ctx){ //main loop d1 = new Date(); framerate.snapshot(); gameRender(ctx,MODE); d2 = new Date(); ptime = d2.getMilliseconds()-time1; ttime = d2.getMilliseconds() - d1.getMilliseconds(); if(ttime<0) ttime+=1000; if(ptime<0) ptime+=1000; console.log("ptime is "+ptime+", ttime is "+ttime); time1 = d2.getMilliseconds(); setTimeout(l,Interval-ttime); } */ 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:scroll'> <div id="framerate"></div> <canvas id="example"> There is supposed to be an example drawing here, but it's not important. </canvas> <div id="console"></div> </body> </html>