Mercurial > hg > Members > e085711

view webGL/dandy/dandy1.html @ 4:7f615f5f5220

Find changesets by keywords (author, files, the commit message), revision number or hash, or revset expression.
upload javascript file
author NOBUYASU Oshiro
date Mon, 14 Jun 2010 15:01:02 +0900
parents 10344afb38a6
children
line wrap: on
line source

<!DOCTYPE html> 
<!--
 /*
 * Copyright (C) 2009 Apple Inc. All Rights Reserved.
 *
 * Redistribution and use in source and binary forms, with or without
 * modification, are permitted provided that the following conditions
 * are met:
 * 1. Redistributions of source code must retain the above copyright
 *    notice, this list of conditions and the following disclaimer.
 * 2. Redistributions in binary form must reproduce the above copyright
 *    notice, this list of conditions and the following disclaimer in the
 *    documentation and/or other materials provided with the distribution.
 *
 * THIS SOFTWARE IS PROVIDED BY APPLE INC. ``AS IS'' AND ANY
 * EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
 * IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR
 * PURPOSE ARE DISCLAIMED.  IN NO EVENT SHALL APPLE INC. OR
 * CONTRIBUTORS BE LIABLE FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL,
 * EXEMPLARY, OR CONSEQUENTIAL DAMAGES (INCLUDING, BUT NOT LIMITED TO,
 * PROCUREMENT OF SUBSTITUTE GOODS OR SERVICES; LOSS OF USE, DATA, OR
 * PROFITS; OR BUSINESS INTERRUPTION) HOWEVER CAUSED AND ON ANY THEORY
 * OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY, OR TORT
 * (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
 * OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE. 
 */
 --> 
<html> 
	<head> 
		<title>WebGL dandy</title> 
		<script src="resources/CanvasMatrix.js"> </script> 
		<script src="resources/utils3d.js"> </script> 
		<script src="resources/jkl-parsexml.js"> </script>    
<!--		<script src="resources/makeXmlObj.js"> </script>  -->
		<script src="resources/makePanel.js"> </script> 
		<script src="resources/Character_state.js"> </script> 
		<script src="resources/Character.js"> </script> 
		<script src="resources/schedule.js"> </script> 
		<script src="resources/Player.js"> </script> 
		<script src="resources/enemy.js"> </script> 
        
		<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);
//				v_Dot = min(dot(transNormal.xyz, lightDir), 1.0);
			}
			</script> 
		
		<script id="fshader" type="x-shader/x-fragment"> 
			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);
				gl_FragColor = vec4(color.xyz * v_Dot, color.a);
			}
			</script> 
		
		<script> 
		        pad = new Pad();
		        const KEY_D = 65;
		        const KEY_A = 68;
		        const KEY_W = 87;
		        const KEY_S = 83;
			const KEY_Z = 90;
			var audio = window.Audio && new Audio("sound/sample.wav");
			var audioShoot = window.Audio && new Audio("sound/shotc.wav");

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

/*
				gl.obj = new Object();
				gl.fontObj = new Object();
				for (var name in xmlObj) {
					gl.obj[name] = makeXmlObj(gl, xmlObj[name]);
					gl.obj[name].texture = loadImageTexture(gl, xmlObj[name].image);
                 		}
				for (var name in xmlFont) {
					gl.fontObj[name] = makeXmlObj(gl, xmlFont[name]);
					gl.fontObj[name].texture = loadImageTexture(gl, xmlFont[name].image);
                 		}
*/

			        loadXml( gl,"./xml/character.xml");
			        player = new Player(gl.chara);
			        enemy = new enemySelect(gl);

//			        Putenemy(0, 0, 0, 0, 0);

				return gl;
			}
			
			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 CanvasMatrix4();
//				ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0);
				ctx.perspectiveMatrix.ortho(-100, 100, -70, 70, 0, 10000);

			}
			
			function drawOne(ctx, glObj, angle, x, y, z, scale)
			{
				// setup VBOs
				ctx.enableVertexAttribArray(0);
				ctx.enableVertexAttribArray(1);
				ctx.enableVertexAttribArray(2);
				
				ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.vertexObject);
				ctx.vertexAttribPointer(2, 3, ctx.FLOAT, false, 0, 0);
				
				ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.normalObject);
				ctx.vertexAttribPointer(0, 3, ctx.FLOAT, false, 0, 0);
				
				ctx.bindBuffer(ctx.ARRAY_BUFFER, glObj.texCoordObject);
				ctx.vertexAttribPointer(1, 2, ctx.FLOAT, false, 0, 0);
				
				ctx.bindBuffer(ctx.ELEMENT_ARRAY_BUFFER, glObj.indexObject);
				
				// generate the model-view matrix
				var mvMatrix = new CanvasMatrix4();
				mvMatrix.scale(scale, scale, scale);
				mvMatrix.translate(0,0,0);
//				mvMatrix.rotate(30, 1,0,0);
				mvMatrix.rotate(180, 0,0,1);
				mvMatrix.translate(x,y,z);
/*
			        var mvNormalMatrix = new CanvasMatrix4();
				mvMatrix.rotate(angle, 0,1,0);
				mvMatrix.rotate(30, 1,0,0);
				mvMatrix.translate(x,y,z);
*/
				// construct the normal matrix from the model-view matrix
				var normalMatrix = new CanvasMatrix4(mvMatrix);
				normalMatrix.invert();
				normalMatrix.transpose();
				ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false, normalMatrix.getAsWebGLFloatArray());
				
				// construct the model-view * projection matrix
				var mvpMatrix = new CanvasMatrix4(mvMatrix);
				mvpMatrix.multRight(ctx.perspectiveMatrix);
				ctx.uniformMatrix4fv(ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false, mvpMatrix.getAsWebGLFloatArray());
				
//				ctx.bindTexture(ctx.TEXTURE_2D, texture);
				ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture);
				ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);
			}
			
			function loop(ctx)
			{
				reshape(ctx);
				ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);
				
/*
				for (var name in ctx.obj) {
				      drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, 0, 0.05);
				      drawOne(ctx, ctx.obj[name], currentAngle, 0, 0, 300, 0.8);
				}
*/
			              movePlayer(player, pad);

//				      drawOne(ctx, ctx.chara["missile"], currentAngle, 0, 0, 10, 1.2);
				      drawPlayer(ctx, player, 1.2);
			              obj_draw(ctx);


				ctx.flush();

				filpcount++;
			        schedule();
		                state_update();

				framerate.snapshot();

			}
			var t = function test(a)
			{
			    return 1;
			}
			
			function start()
			{
				//xmlファイル読み込み
				xmlObj = parsePanel("./xml/character.xml");
				xmlFont = parsePanel("./xml/font.xml");

			       audio && audio.play();//audio Test
			
			       


			        for (var name in xmlObj ){
			          document.getElementById("test").src=xmlObj[name].image;
			        }
				var c = document.getElementById("example");
				var w = Math.floor(window.innerWidth * 0.9);
				var h = Math.floor(window.innerHeight * 0.9);
				
				c.width = w;
				c.height = h;

				var ctx = init();

				currentAngle = 0;
				var f = function() { loop(ctx) };
				setInterval(f, 10);
				framerate = new Framerate("framerate");
			}
			function keybordDown()
			{
			        var code = event.keyCode;
			        if(code == KEY_D) pad.right+=1.5;
			        if(code == KEY_A) pad.left+=1.5;
			        if(code == KEY_W) pad.up+=2;
			        if(code == KEY_S) pad.down+=2;			
			        if(code == KEY_Z) audioShoot && audioShoot.play();
			}
			function keybordPress()
			{
			    pad.count++;
			}
			function keybordUp()
			{
			        var code = event.keyCode;
			        if(code == KEY_D) pad.right = 0;
			        if(code == KEY_A) pad.left = 0;
			        if(code == KEY_W) pad.up = 0;
			        if(code == KEY_S) pad.down = 0;			

			        pad.state=0;
			        pad.count=0;
			}
			</script> 
		<style type="text/css"> 
			canvas {
				border: 2px solid black;
			}
			</style> 
	</head> 
	<body onload="start()" onkeydown="keybordDown()" onkeypress="keybordPress()" onkeyup="keybordUp()"> 
		<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> 
		
		<img id="test" style="border:1px solid red">
			
			</body> 
</html>