Mercurial > hg > Members > e085737 > sample
view vacuum/vacuum.html @ 6:ca8540cab316
viewer
author | <e085737> |
---|---|
date | Fri, 26 Nov 2010 15:45:27 +0900 |
parents | 5deafb6f7d59 |
children |
line wrap: on
line source
<html> <head> <title>Earth and Mars</title> <script src="resources/keybord.js"></script> <script src="resources/vacuum.js"></script> <script src="resources/jkl-parsexml.js"></script> <script src="resources/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) * 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); 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, "./xml/earth.xml"); loadObjXml(gl, "./xml/moon.xml"); loadObjXml(gl, "./xml/cube.xml"); loadObjXml(gl, "./xml/gameover.xml"); //loadObjXml(gl, "./xml/touhu.xml"); return gl; } width = -1000; height = -1000; 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,100, 0, 0, 0, 0, 1, 0); } function drawBall(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,y,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); ctx.bindTexture(ctx.TEXTURE_2D, glObj.texture); ctx.drawElements(ctx.TRIANGLES, glObj.numIndices, ctx.UNSIGNED_SHORT, 0); } function drawPicture(ctx) { reshape(ctx); ctx.clear(ctx.COLOR_BUFFER_BIT | ctx.DEPTH_BUFFER_BIT); handleKeys(); update(ctx); ctx.flush(); framerate.snapshot(); currentAngle += incAngle; if (currentAngle > 360){ var rand = Math.random(); add_ball(Math.random()*3000, Math.random()*1000, Math.random()*1000,ctx.obj.Earth.h,ctx.obj.Earth.w); if(rand < 0.7){ add_bomb(Math.random()*3000, Math.random()*1000, Math.random()*1000,ctx.obj.Moon.h,ctx.obj.Moon.w); } currentAngle -= 360; } } 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; var N = 1; // ボールの数 var ctx = init(); var balls = [];// ball = new Array(); // 初期ボール作成 for(i=0; i<N ; i++){ balls.push(new Ball(Math.random()*3000, Math.random()*1000, Math.random()*1000, ctx.obj.Earth.h, ctx.obj.Earth.w, 100.0)); } my = Myball(balls,ctx.obj.Moon.h,ctx.obj.Moon.w, ctx.obj.Earth.w); //my = Myball(balls,ctx.obj.Cube.h,ctx.obj.Cube.w, ctx.obj.Cube.w); ball_in(); document.onkeydown = handleKeyDown; document.onkeyup = handleKeyUp; currentAngle = 0; incAngle = 5.0; var f = function() { drawPicture(ctx) }; setInterval(f, 10); framerate = new Framerate("framerate"); } </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>