WebGL魔方小游戲 - www.web-tinker.com ...
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>WebGL魔方小游戲 - www.web-tinker.com</title> <style>* {padding:0px;margin:0px;overflow:hidden;background:#000;}</style> <canvas id="canvas" width="512" height="512"></canvas> <script type="text/x-glsl" id="svShader"> attribute vec3 position; attribute vec3 normal; attribute vec3 color; uniform mat4 mMatrix; uniform mat4 mvpMatrix; uniform mat4 mvpShadowerMatrix; uniform vec3 lVector; varying float diffuse; varying vec4 vPosition; varying vec3 vColor; void main(){ vec4 v4Position=vec4(position,1.0); vPosition=mvpShadowerMatrix*v4Position; gl_Position=mvpMatrix*v4Position; vec3 tNormal=(mMatrix*vec4(normalize(normal),0.0)).xyz; diffuse=max(-dot(tNormal,normalize(lVector)),0.4); vColor=color; } </script> <script type="text/x-glsl" id="sfShader"> precision lowp float; varying float diffuse; uniform sampler2D depthData; uniform vec2 size; varying vec4 vPosition; varying vec3 vColor; vec2 depthMap; float f(float i,float j){ float z=texture2D(depthData,depthMap+vec2(i,j)*2.0/size).z; return abs(z-vPosition.z)<0.01?diffuse:0.4; } void main(){ depthMap=(vPosition.xy/vPosition.w*0.5+0.5)/512.0*size; float vDiffuse=0.0; for(float i=-2.0;i<=2.0;i++)for(float j=-2.0;j<=2.0;j++)vDiffuse+=f(i,j); vDiffuse/=25.0; gl_FragColor=vec4(vec3(vDiffuse*vColor),1.0); } </script> <script type="text/x-glsl" id="pvShader"> attribute vec3 position; attribute vec3 normal; attribute vec3 color; uniform mat4 mvpMatrix; varying float xx; void main(){ gl_Position=mvpMatrix*vec4(position,1.0); normal;color; } </script> <script type="text/x-glsl" id="pfShader"> precision lowp float; uniform float index; void main(){ gl_FragColor=vec4(vec3(index),1.0); } </script> <script type="text/x-glsl" id="bvShader"> attribute vec3 position; uniform mat4 mvpShadowerMatrix; varying float depth; void main(){ gl_Position=mvpShadowerMatrix*vec4(position,1.0); depth=gl_Position.z; } </script> <script type="text/x-glsl" id="bfShader"> varying lowp float depth; void main(){ gl_FragColor=vec4(vec3(depth),1.0); } </script> <base href="http://www.web-tinker.com/files/" /> <script src="SimpleWebGL.2.0.js"></script> <script src="SimpleWebGL.Matrix.1.0.js"></script> <script> new SimpleWebGL(canvas).namespace(function( Program,VertexShader,FragmentShader,ArrayBuffer, Framebuffer,Renderbuffer,Texture2D,Matrix ){ //基本函數 var π=Math.PI,sin=Math.sin,cos=Math.cos,acos=Math.acos,pow=Math.pow,abs=Math.abs, round=Math.round,random=Math.random,updateMvpMatrix=function(){ this.data.mvpMatrix=new Matrix(this.data.mMatrix).multiply(vpMatrix); this.data.mvpShadowerMatrix=new Matrix(this.data.mMatrix).multiply(vpShadowerMatrix); }; //定義方塊 var Cube; (function(){ var i,j,k,p,n,position=[],normal=[],color=[],push=Array.prototype.push,a=1,b=0.9, ctab=[[1,1,0],[0,0,1],[1,0,0],[1,1,1],[0,1,0],[1,0.5,0]]; for(i=0;i<2;i++)for(j=0;j<3;j++){ //面 for(k=0;k<4;k++) p=[k>>1?b:-b,k&1?b:-b],p.splice(j,0,i?a:-a),push.apply(position,p), n=[0,0],n.splice(j,0,i?a:-a),push.apply(normal,n), push.apply(color,ctab[i*3+j]); push.apply(position,position.slice(-9,-3)); push.apply(normal,normal.slice(-9,-3)); push.apply(color,color.slice(-9,-3)); }; for(i=0;i<3;i++)for(j=0;j<4;j++){ //棱 for(k=0;k<4;k++) p=k<2?[a,b]:[b,a],p[0]*=j&2?1:-1,p[1]*=j&1?1:-1, p.splice(i,0,(k&1?1:-1)*b),push.apply(position,p), n=[a*(j&2?1:-1),a*(j&1?1:-1)],n.splice(i,0,0),push.apply(normal,n); push.apply(position,position.slice(-9,-3)); push.apply(normal,normal.slice(-9,-3)); for(k=0;k<6;k++)color.push(0.5,0.5,0.5); }; for(i=0;i<8;i++)for(j=0;j<3;j++){ //角 for(k=0;k<3;k++) position.push((k==j?a:b)*(i&1<<k?1:-1)), normal.push(a*(i&1<<k?1:-1)); color.push(0.5,0.5,0.5); }; var count=position.length/3,buffers={ position:new ArrayBuffer(position), normal:new ArrayBuffer(normal), color:new ArrayBuffer(color) }; Cube=function(){this.data=Object.create(buffers);}; Cube.prototype={update:updateMvpMatrix,valueOf:function(){return count;}}; })(); //生成操作對象 var cubes=[],ground; cubes.dimension=3, cubes.translation=Matrix.model([0,2,0]); cubes.rotation=Matrix.model([]).pitch(60).yaw(40).pitch(10); cubes.wMatrix=new Matrix(cubes.rotation).multiply(cubes.translation); (function(d){ var i,j,k,o,e=(cubes.dimension-1)/2; for(i=0;i<d;i++)for(j=0;j<d;j++)for(k=0;k<d;k++) cubes.push(o=new Cube()), o.location=[i,j,k],o.rotation=new Matrix(4), o.translation=[i*2-d+1,j*2-d+1,k*2-d+1], o.m=Matrix.model(o.translation), o.data.mMatrix=new Matrix(o.m).multiply(cubes.wMatrix), o.rotate=function(m,r){ this.location=Matrix.model(this.location).move(-e,-e,-e)[m](r*90).move(e,e,e).slice(-4,-1).map(round); this.m=Matrix.model(this.translation).multiply(this.rotation[m](r*90)); }; })(cubes.dimension); (function(i,j,k){ ground={update:updateMvpMatrix,data:{ position:new ArrayBuffer([-i,0,-j, -i,0,j, i,0,-j, i,0,j, -i,0,j, i,0,-j]), normal:new ArrayBuffer([0,1,0, 0,1,0, 0,1,0, 0,1,0, 0,1,0, 0,1,0]), color:new ArrayBuffer([].concat(k,k,k,k,k,k)),mMatrix:Matrix.model([0,-7,-9]) },valueOf:function(){return 6;}}; })(7,12,[0.5,0.5,0.5]); //打亂 (function shuffle(c){ var d=cubes.dimension,dir=random()*d|0,m=["pitch","yaw","roll"][dir], r=random()*3+1|0,cur=random()*d|0,offset=(d-1)/2,group=[],i,o; for(i=0;o=cubes[i];i++)
