Mercurial > hg > Members > e085737 > sample

<html>
  <head>
    <title>Earth and Mars</title>
    <script src="jkl-parsexml.js"></script>
    <script src="exml.js"></script>
    <script src="resources/J3DI.js"> </script>
    <script src="resources/J3DIMath.js" type="text/javascript"> </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/1000.0) * vec4(vNormal,1);
            v_Dot = max(dot(transNormal.xyz, lightDir), 1.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);
            gl_FragColor = vec4(color.xyz * v_Dot, color.a);
        }
    </script>

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

            // get the images
            loadObjXml(gl, "./earth.xml");

            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 J3DIMatrix4();
            ctx.perspectiveMatrix.perspective(30, width/height, 1, 10000);
            ctx.perspectiveMatrix.lookat(0,0,6, 0, 0, 0, 0, 1, 0);
        }

        function drawOne(ctx, angle, x, y, z, scale, glObj)
        {
            // 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 J3DIMatrix4();
            mvMatrix.translate(x,-1,0);
            mvMatrix.scale(scale, scale, scale);

            // construct the normal matrix from the model-view matrix
            var normalMatrix = new J3DIMatrix4(mvMatrix);
            normalMatrix.invert();
            normalMatrix.transpose();
            normalMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_normalMatrix"), false);

            // construct the model-view * projection matrix
            var mvpMatrix = new J3DIMatrix4(ctx.perspectiveMatrix);
            mvpMatrix.multiply(mvMatrix);
            mvpMatrix.setUniform(ctx, ctx.getUniformLocation(ctx.program, "u_modelViewProjMatrix"), false);
            hei = glObj.w;
            ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture);
            ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0);
        }

	flag = 0;
        function drawPicture(ctx)
        {
            reshape(ctx);
            ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT);

            collision();
            collision_ball();
            update();
            drawBall(ctx);

            ctx.flush();

            framerate.snapshot();

            currentAngle += incAngle;
            if (currentAngle > 360)
                currentAngle -= 360;
        }

	balls = [];// ball = new Array();
	const N = 2; // ボールの数
	const g = 0.01; //重力
	const a = 0.0005; // 空気抵抗
	const e = 0.88;  // 反発係数

        function start()
        {
            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;

	    for(i=0; i<N ; i++){
		balls.push(new Ball(Math.random()*3, Math.random()*3, Math.random()*3,parseInt(i)));
	    }

            var ctx = init();
            currentAngle = 0;
            incAngle = 0.2;
            var f = function() { drawPicture(ctx) };
            setInterval(f, 10);
            framerate = new Framerate("framerate");

	  }
	function update(){
	    for(num in balls){
		balls[num].update(balls[num]);
	   }
	}
        function collision(){
	    for(num in balls){
		 balls[num].collision(balls[num]);
           }
        }
	function collision_ball(){
	    for(num in balls){
                 balls[num].collision_ball(balls[num]);
	     }
	}
        function drawBall(ctx){
	     for(num in balls){
	        var siman = balls[num];
		drawOne(ctx, currentAngle, siman.x, siman.y, siman.z, siman.scale, ctx.obj.Earth);
           }
        }

	function Ball(x,y,z,i){
	     this.num=i;
	     this.x=x;
	     this.y=y;
	     this.z=z;
	     this.scale = 0.005; // 大きさ
	     this.dx=0.1;        // 初速度
	     this.dy=0;
	     this.update=ballupdate;
             this.collision = ballcollision;
             this.collision_ball = ballcollision_other;
	     this.radius = 0.1;
	     return this;
	}

	ballupdate = function Bupdate(ball){
	    if(ball.dx > a){
	        ball.dx -= a;
	    }else if(ball.dx < -a){
	        ball.dx += a;
	    }else{
	        ball.dx = 0;
	    }
	    ball.x += ball.dx;
	    ball.dy -= g;
	    ball.y += ball.dy;
	}
	ballcollision = function Bcollision(ball){
	    if(ball.y <= -1){
	        ball.y = -1;
		ball.dy = -ball.dy * e;
	    }
	    if(ball.x <= -2.7){
		ball.x = -2.7;
		ball.dx = -ball.dx * e;
	    }
	    if(ball.x >= 2.7){
		ball.x = 2.7;
		ball.dx = -ball.dx * e;
	    }

        }
        ballcollision_other = function Bcollision_ball(ball){
	   // for(i=0; i<1; i++){
	//	if(ball.num != i){
                    collision_check(ball,balls[1]);
	//	}
          //  }
        }

	function collision_check(ball,other){
	    a = ball.x - other.x;
            b = ball.y - other.y;
	    d = Math.sqrt(Math.pow(a,2) + Math.pow(b,2));

	    if(d <= ball.radius * 2){
		if(ball.dx <= 0){
		    ball.x += (d-ball.radius);
		    ball.dx = -ball.dx;
		}else{
		    ball.x -= (d-ball.radius);
                    ball.dx = -ball.dx;
	        }
		//other.x -= ((other.radius*2) - d);
		/*ball.y -= (other.radius - d)/2.0;
		ball.dy = -ball.dy;
		other.y -= (other.radius - d)/2.0;
		other.dy = -other.dy;
		*/
	    }
        }


    </script>
    <style type="text/css">
        canvas {
            border: 2px solid black;
        }
    </style>
  </head>
  <body onload="start()">
    <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	<e085737>
date	Thu, 24 Feb 2011 22:16:46 +0900
parents	fccccbcc94be
children