水底3D水母（http://chrysaora.com/）

最新推荐文章于 2021-01-30 14:20:50 发布
最新推荐文章于 2021-01-30 14:20:50 发布
阅读量1.3k 收藏
点赞数
分类专栏： WebGL 文章标签： float class input animation vector javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/devehe/article/details/6896158
版权
 <html><head><meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
 <title>Chrysaora - WebGL</title>
 <link href="css/style.css" rel="stylesheet" type="text/css">
 <script type="text/javascript" src="js/lib/jquery-1.4.2.min.js"></script>
 <script type="text/javascript" src="js/lib/mjs.js"></script>
  
 <script type="text/javascript" src="js/initWin.js"></script>
 <script type="text/javascript" src="js/initUI.js"></script>
 <script type="text/javascript" src="js/initUniforms.js"></script>
 <script type="text/javascript" src="js/initTextures.js"></script>
 <script type="text/javascript" src="js/initShaders.js"></script>
 <script type="text/javascript" src="js/initBuffers.js"></script>
  
 <script type="text/javascript" src="js/interact.js"></script>
 <script type="text/javascript" src="js/debug.js"></script>
  
 <script type="text/javascript" src="js/tick.js"></script>
 <script type="text/javascript" src="js/simulator.js"></script>
 <script type="text/javascript" src="js/drawSkybox.js"></script>
 <script type="text/javascript" src="js/drawJellyfish.js"></script>
 <script type="text/javascript" src="js/drawPlankton.js"></script>
 <script type="text/javascript" src="js/drawRays.js"></script>
 <script type="text/javascript" src="js/drawGrid.js"></script>
 <script type="text/javascript" src="js/drawScene.js"></script>
  
  
 <script type="text/javascript" src="js/imageCapture.js"></script>
 <script type="text/javascript" src="jsjpg/jpeg_encoder_basic.js"></script>
  
  
 <script id="skybox-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 attribute vec3 aVertexNormal;
 attribute vec3 aVertexColor;
 attribute vec3 aTextureCoord;
 uniform mat4 uWorld;
 uniform mat4 uView;
 uniform mat4 uViewInv;
 uniform mat4 uWorldView;
 uniform mat4 uWorldViewProj;
 uniform mat4 uWorldInvTranspose;
  
 uniform float uNear;
 uniform float uFar;
 uniform vec3 uLightPos;
 uniform float uLightRadius;
 uniform vec4 uLightCol;
 uniform vec4 uLightSpecCol;
 uniform float uSpecPower;
 uniform vec4 uAmbientCol;
 uniform vec4 uFresnelCol;
 uniform float uFresnelPower;
 uniform float uFogDist;
 uniform vec4 uFogTopCol;
 uniform vec4 uFogBottomCol;
  
 uniform float uCurrentTime;
 varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
  
 void main(void) {
   vec3 pos = aVertexPosition;
  
 //matrices
   vWorld =               uWorld * vec4(pos, 1.0);
   vWorldView =           uWorldView * vec4(pos, 1.0);
   vWorldViewProj =       uWorldViewProj * vec4(pos, 1.0);
   vWorldInvTranspose =   uWorldInvTranspose * vec4(pos, 1.0);
   vViewInv =             uViewInv * vec4(pos, 1.0);
  
   //vertex eye vector
   vWorldEyeVec = normalize(vWorld.xyz - uViewInv[3].xyz);
  
   //vertex fog
   vDepth = (vWorldViewProj.z+uNear)/uFar;
   float height = smoothstep(uFogBottomCol.a, uFogTopCol.a, (vWorldEyeVec.y+1.0)/2.0);
   vFogCol = uFogTopCol*height + uFogBottomCol*(1.0-height);
   vFogCol.a = min(max((uFar-uNear)*vDepth/uFogDist,0.0),1.0);
  
 gl_Position = vWorldViewProj;
  
 }
 </script>
  
 <script id="skybox-fs" type="x-shader/x-fragment">
 #ifdef GL_ES
 precision highp float;
 #endif
  
 uniform sampler2D uSampler0;
 uniform sampler2D uSampler1;
 uniform sampler2D uSampler2;
 uniform sampler2D uSampler3;
  
  
 uniform float uShaderDebug;
 uniform float uCurrentTime;
 uniform float uNear;
 uniform float uFar;
 uniform float uAlpha;varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
  
 void main(void) { 
   vec4 composit = vec4(vFogCol.rgb, 1.0);
  
 vec4 finalColor = composit;
   finalColor.a *= uAlpha;
  
   gl_FragColor = finalColor;
 }
 </script><script id="jellyfish-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 attribute vec3 aVertexNormal;
 attribute vec3 aVertexColor;
 attribute vec3 aTextureCoord;
 uniform mat4 uWorld;
 uniform mat4 uView;
 uniform mat4 uViewInv;
 uniform mat4 uWorldView;
 uniform mat4 uWorldViewProj;
 uniform mat4 uWorldInvTranspose;
  
 uniform float uNear;
 uniform float uFar;
 uniform vec3 uLightPos;
 uniform float uLightRadius;
 uniform vec4 uLightCol;
 uniform vec4 uLightSpecCol;
 uniform float uSpecPower;
 uniform vec4 uAmbientCol;
 uniform vec4 uFresnelCol;
 uniform float uFresnelPower;
 uniform float uFogDist;
 uniform vec4 uFogTopCol;
 uniform vec4 uFogBottomCol;
  
 uniform float uCurrentTime;
 uniform mat4 uJoint0;
 uniform mat4 uJoint1;
 uniform mat4 uJoint2;
 uniform mat4 uJoint3;
 uniform mat4 uJoint0InvTranspose;
 uniform mat4 uJoint1InvTranspose;
 uniform mat4 uJoint2InvTranspose;
 uniform mat4 uJoint3InvTranspose;
 uniform float uCurrentJellyfishTime;
 varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
  
 void main(void) {
  
   //Vertex Animation
   float dpi = 6.2831853;
   float pi = 3.14159265;
   float hpi = 1.570796325;
   float lenght = 1.50;
   float time = mod((uCurrentJellyfishTime+aVertexPosition.y*lenght), dpi);
   float time2 = mod((uCurrentJellyfishTime+aVertexPosition.y*lenght), dpi);
  
   if (time < hpi) time = time;
   else if (time < pi) time = hpi;
   else if (time < 3.0*hpi) time = (time*2.0-3.0*hpi);
  
   float offset = smoothstep(0.0,1.,max(0.,-aVertexPosition.y-0.8)/10.);
   vec3 anim = (vec3(aVertexColor.x,aVertexColor.y,aVertexColor.z)/8.0
   *sin((time+time2)/2.0) * (1.-offset));
   vec3 pos = aVertexPosition + anim;
   vec3 nrm = aVertexNormal + anim;
  
   //skinning
   float weight = -aVertexPosition.y/3.0;
   float w0 = max(min(-weight+1.0,1.0),0.0);
   float w1 = max(min(weight,-weight+2.0),0.0);
   float w2 = max(min(weight-1.0,-weight+3.0),0.0);
   float w3 = max(min(weight-2.0,1.0),0.0);
   pos = vec3(uJoint0 * vec4(pos, 1.0))*w0 +
 vec3(uJoint1 * vec4(pos, 1.0))*w1 +
 vec3(uJoint2 * vec4(pos, 1.0))*w2 +
 vec3(uJoint3 * vec4(pos, 1.0))*w3;
   nrm = vec3(uJoint0InvTranspose * vec4(nrm, 1.0))*w0 +
 vec3(uJoint1InvTranspose * vec4(nrm, 1.0))*w1 +
 vec3(uJoint2InvTranspose * vec4(nrm, 1.0))*w2 +
 vec3(uJoint3InvTranspose * vec4(nrm, 1.0))*w3;
  
   //matrices
   vWorld =               uWorld * vec4(pos, 1.0);
   vWorldView =           uWorldView * vec4(pos, 1.0);
   vWorldViewProj =       uWorldViewProj * vec4(pos, 1.0);
   vWorldInvTranspose =   uWorldInvTranspose * vec4(pos, 1.0);
   vViewInv =             uViewInv * vec4(pos, 1.0);
  
   //vertex normal
   vVertexNormal = normalize(nrm);
  
   //vertex eye vector
   vWorldEyeVec = normalize(vWorld.xyz - uViewInv[3].xyz);
  
   //diffuse
   vec3 lightDir = normalize(uLightPos - vWorld.xyz);
   float diffuseProduct = max(dot(normalize(vVertexNormal.xyz), lightDir), 0.0);
   float lightFalloff = pow(max(1.0-(distance(uLightPos, vWorld.xyz)/uLightRadius), 0.0),2.0);
   vDiffuse = uLightCol.rgb * vec3(diffuseProduct * lightFalloff * uLightCol.a);
  
   //specular
   vec3 lightReflectDir = reflect(lightDir, vVertexNormal);
   float specularProduct = pow(max(dot(lightReflectDir, vWorldEyeVec), 0.0), uSpecPower);
   vSpecular = uLightSpecCol.rgb * vec3(specularProduct * uLightSpecCol.a);
  
   //fresnel
   float fresnelProduct = pow(1.0-max(abs(dot(vVertexNormal, -vWorldEyeVec)), 0.0), uFresnelPower);
   vFresnel = uFresnelCol.rgb * vec3(uFresnelCol.a * fresnelProduct);
  
   //vertex fog
   vDepth = (vWorldViewProj.z+uNear)/uFar;
   float height = smoothstep(uFogBottomCol.a, uFogTopCol.a, (vWorldEyeVec.y+1.0)/2.0);
   vFogCol = uFogTopCol*height + uFogBottomCol*(1.0-height);
   vFogCol.a = min(max((uFar-uNear)*vDepth/uFogDist,0.0),1.0);
  
 //texture coords
   vTextureCoord = aTextureCoord;
  
   //ambient color
   vAmbient = uAmbientCol.rgb * uAmbientCol.a;
  
   gl_Position = vWorldViewProj;
 }
 </script>
  
 <script id="jellyfish-fs" type="x-shader/x-fragment">
 #ifdef GL_ES
 precision highp float;
 #endif
  
 uniform sampler2D uSampler0;
 uniform sampler2D uSampler1;
 uniform sampler2D uSampler2;
 uniform sampler2D uSampler3;
  
  
 uniform float uShaderDebug;
 uniform float uCurrentTime;
 uniform float uNear;
 uniform float uFar;
 uniform float uAlpha;uniform float uCurrentJellyfishTime;
 uniform vec4 uLightCol;
 varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
  
 void main(void) {
   vec3 caustics = texture2D(uSampler1, vec2((vWorld.x)/24., (vWorld.z-vWorld.y)/48.)).rgb;
   vec3 colorMap = texture2D(uSampler0, vec2(vTextureCoord.s, vTextureCoord.t)).rgb;
   float alphaMap = 1.0-texture2D(uSampler2, vec2(vTextureCoord.s, vTextureCoord.t)).r;
  
   caustics *= vDiffuse*2.0;
  
   vec4 composit = vec4(((vAmbient + vDiffuse + caustics)*colorMap.rgb) + vFresnel + vSpecular*alphaMap, alphaMap*0.9); 
  
   composit = vec4(composit.rgb, composit.a*0.8);//add bioluminescence
  
   composit.rgb = mix(composit.rgb, vFogCol.rgb, vFogCol.a);//mix with fog
  
   vec4 finalColor = composit;
  
   if (uShaderDebug == 0.0) {finalColor = vec4(composit); finalColor.a *= uAlpha;}//diffuse
   else if (uShaderDebug == 1.0) {finalColor = vec4(vDiffuse,1.0);}//diffuse
   else if (uShaderDebug == 2.0) {finalColor = vec4(vAmbient,1.0);}//ambient
   else if (uShaderDebug == 3.0) {finalColor = vec4(caustics.rgb,1.0);}//caustics
   else if (uShaderDebug == 4.0) {finalColor = vec4(colorMap.rgb,1.0);}//color
   else if (uShaderDebug == 5.0) {finalColor = vec4(vSpecular,1.0);}//specular
   else if (uShaderDebug == 6.0) {finalColor = vec4(vFresnel,1.0);}//fresnel
   else if (uShaderDebug == 7.0) {finalColor = vec4(vVertexNormal.xyz,1.0);}//normal
   else if (uShaderDebug == 8.0) {finalColor = vec4(vec3(alphaMap),1.0);}//transparency
   else if (uShaderDebug == 9.0) {finalColor = vec4(vec3(0.,1.,0.),1.0);}//chroma
 else if (uShaderDebug == 10.0) {finalColor = vec4(vec3(1.,1.,1.),alphaMap);}//wireframe
  
   gl_FragColor = finalColor;
 }
 </script><script id="vcolor-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 attribute vec3 aVertexNormal;
 attribute vec3 aVertexColor;
 attribute vec3 aTextureCoord;
 uniform mat4 uWorld;
 uniform mat4 uView;
 uniform mat4 uViewInv;
 uniform mat4 uWorldView;
 uniform mat4 uWorldViewProj;
 uniform mat4 uWorldInvTranspose;
  
 uniform float uNear;
 uniform float uFar;
 uniform vec3 uLightPos;
 uniform float uLightRadius;
 uniform vec4 uLightCol;
 uniform vec4 uLightSpecCol;
 uniform float uSpecPower;
 uniform vec4 uAmbientCol;
 uniform vec4 uFresnelCol;
 uniform float uFresnelPower;
 uniform float uFogDist;
 uniform vec4 uFogTopCol;
 uniform vec4 uFogBottomCol;
  
 uniform float uCurrentTime;
 varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
  
 void main(void) {
   vec3 pos = aVertexPosition;
  
 //matrices
   vWorld =               uWorld * vec4(pos, 1.0);
   vWorldView =           uWorldView * vec4(pos, 1.0);
   vWorldViewProj =       uWorldViewProj * vec4(pos, 1.0);
   vWorldInvTranspose =   uWorldInvTranspose * vec4(pos, 1.0);
   vViewInv =             uViewInv * vec4(pos, 1.0);
  
   //vertex eye vector
   vWorldEyeVec = normalize(vWorld.xyz - uViewInv[3].xyz);
  
   //vertex fog
   vDepth = (vWorldViewProj.z+uNear)/uFar;
   float height = smoothstep(uFogBottomCol.a, uFogTopCol.a, (vWorldEyeVec.y+1.0)/2.0);
   vFogCol = uFogTopCol*height + uFogBottomCol*(1.0-height);
   vFogCol.a = min(max((uFar-uNear)*vDepth/uFogDist,0.0),1.0);
  
   //vertex color
 vColor = aVertexColor;
  
 gl_Position = vWorldViewProj;
 }
 </script>
  
 <script id="vcolor-fs" type="x-shader/x-fragment">
 #ifdef GL_ES
 precision highp float;
 #endif
  
 uniform sampler2D uSampler0;
 uniform sampler2D uSampler1;
 uniform sampler2D uSampler2;
 uniform sampler2D uSampler3;
  
  
 uniform float uShaderDebug;
 uniform float uCurrentTime;
 uniform float uNear;
 uniform float uFar;
 uniform float uAlpha; 
 varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
  
 void main(void) {
   vec4 composit = vec4(vColor, 1.0);
  
 //mix with fog
 composit.rgb = mix(composit.rgb, vFogCol.rgb, vFogCol.a);
  
 vec4 finalColor = composit;
  
   gl_FragColor = finalColor;
 }
 </script><script id="wire-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 attribute vec3 aVertexNormal;
 attribute vec3 aVertexColor;
 attribute vec3 aTextureCoord;
 uniform mat4 uWorld;
 uniform mat4 uView;
 uniform mat4 uViewInv;
 uniform mat4 uWorldView;
 uniform mat4 uWorldViewProj;
 uniform mat4 uWorldInvTranspose;
  
 uniform float uNear;
 uniform float uFar;
 uniform vec3 uLightPos;
 uniform float uLightRadius;
 uniform vec4 uLightCol;
 uniform vec4 uLightSpecCol;
 uniform float uSpecPower;
 uniform vec4 uAmbientCol;
 uniform vec4 uFresnelCol;
 uniform float uFresnelPower;
 uniform float uFogDist;
 uniform vec4 uFogTopCol;
 uniform vec4 uFogBottomCol;
  
 uniform float uCurrentTime;
 varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
  
 void main(void) {
   vec3 pos = aVertexPosition;
  
 //matrices
   vWorld =               uWorld * vec4(pos, 1.0);
   vWorldView =           uWorldView * vec4(pos, 1.0);
   vWorldViewProj =       uWorldViewProj * vec4(pos, 1.0);
   vWorldInvTranspose =   uWorldInvTranspose * vec4(pos, 1.0);
   vViewInv =             uViewInv * vec4(pos, 1.0);
  
   //vertex eye vector
   vWorldEyeVec = normalize(vWorld.xyz - uViewInv[3].xyz);
  
   //vertex fog
   vDepth = (vWorldViewProj.z+uNear)/uFar;
   float height = smoothstep(uFogBottomCol.a, uFogTopCol.a, (vWorldEyeVec.y+1.0)/2.0);
   vFogCol = uFogTopCol*height + uFogBottomCol*(1.0-height);
   vFogCol.a = min(max((uFar-uNear)*vDepth/uFogDist,0.0),1.0);
  
 //vertex color
   vColor = aVertexColor;
  
 gl_Position = vWorldViewProj;
 }
 </script>
  
 <script id="wire-fs" type="x-shader/x-fragment">
 #ifdef GL_ES
 precision highp float;
 #endif
  
 uniform sampler2D uSampler0;
 uniform sampler2D uSampler1;
 uniform sampler2D uSampler2;
 uniform sampler2D uSampler3;
  
  
 uniform float uShaderDebug;
 uniform float uCurrentTime;
 uniform float uNear;
 uniform float uFar;
 uniform float uAlpha; 
 varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
  
 void main(void) {
   vec4 composit = vec4(vColor.rgb,1.0);
  
 //mix with fog
   composit.rgb = mix(composit.rgb, vFogCol.rgb, vFogCol.a);
  
 vec4 finalColor = composit;
  
   gl_FragColor = finalColor;
 }
 </script><script id="plankton-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 attribute vec3 aVertexNormal;
 attribute vec3 aVertexColor;
 attribute vec3 aTextureCoord;
 uniform mat4 uWorld;
 uniform mat4 uView;
 uniform mat4 uViewInv;
 uniform mat4 uWorldView;
 uniform mat4 uWorldViewProj;
 uniform mat4 uWorldInvTranspose;
  
 uniform float uNear;
 uniform float uFar;
 uniform vec3 uLightPos;
 uniform float uLightRadius;
 uniform vec4 uLightCol;
 uniform vec4 uLightSpecCol;
 uniform float uSpecPower;
 uniform vec4 uAmbientCol;
 uniform vec4 uFresnelCol;
 uniform float uFresnelPower;
 uniform float uFogDist;
 uniform vec4 uFogTopCol;
 uniform vec4 uFogBottomCol;
  
 uniform float uCurrentTime;
 uniform vec3 uParticlePosition;
 uniform vec3 uParticleScale;
 uniform vec3 uPBbox;
 uniform mat4 uParticleMatrix;
 uniform float uPID;
 uniform float uPAlpha;
 uniform float uRAlpha;varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
 varying float pFade;
  
 void main(void) {
   //Vertex Animation
   vec3 pos = aVertexPosition;
  
   float rotationSpeed = uCurrentTime*sin(uPID);
   mat4 rotation = mat4(
         vec4( cos(rotationSpeed),  sin(rotationSpeed),  0.0,  0.0),
         vec4(-sin(rotationSpeed),  cos(rotationSpeed),  0.0,  0.0),
         vec4(0.0,   0.0,  1.0,  0.0),
     vec4(0.0,   0.0,  0.0,  1.0)
   ); 
  
   pos = vec3(uParticleMatrix * rotation * vec4(aVertexPosition, 1.0)) * uParticleScale + uParticlePosition;
  
 //matrices
   vWorld =               uWorld * vec4(pos, 1.0);
   vWorldView =           uWorldView * vec4(pos, 1.0);
   vWorldViewProj =       uWorldViewProj * vec4(pos, 1.0);
   vWorldInvTranspose =   uWorldInvTranspose * vec4(pos, 1.0);
   vViewInv =             uViewInv * vec4(pos, 1.0);
  
   //vertex normal
   vVertexNormal = normalize((uWorldInvTranspose * vec4(aVertexNormal, 1.)).xyz);
  
   //vertex eye vector
   vWorldEyeVec = normalize(vWorld.xyz - uViewInv[3].xyz);
  
   //diffuse light
 vec3 lightDir = normalize(uLightPos - vWorld.xyz);
   float diffuseProduct = max(dot(normalize(vVertexNormal.xyz), lightDir), 0.0);
   float lightFalloff = pow(max(1.0-(distance(uLightPos, vWorld.xyz)/uLightRadius), 0.0),2.0);
   vDiffuse = uLightCol.rgb * vec3(diffuseProduct * lightFalloff * uLightCol.a);
  
   //particle fade to bounding box
   pFade = min(1.0,uPBbox[0]-abs(uParticlePosition[0]));
   pFade *= min(1.0,uPBbox[1]-abs(uParticlePosition[1]));
   pFade *= min(1.0,uPBbox[2]-abs(uParticlePosition[2]));
  
   //vertex fog
   vDepth = (vWorldViewProj.z+uNear)/uFar;
   float height = smoothstep(uFogBottomCol.a, uFogTopCol.a, (vWorldEyeVec.y+1.0)/2.0);
   vFogCol = uFogTopCol*height + uFogBottomCol*(1.0-height);
   vFogCol.a = min(max((uFar-uNear)*vDepth/uFogDist,0.0),1.0);
  
 //texture coords
   vTextureCoord = aTextureCoord;
  
   //vertex color
   vColor = aVertexColor;
  
   //ambient color
   vAmbient = uAmbientCol.rgb * uAmbientCol.a;
  
 gl_Position = vWorldViewProj;
 }
 </script>
  
 <script id="plankton-fs" type="x-shader/x-fragment">
 #ifdef GL_ES
 precision highp float;
 #endif
  
 uniform sampler2D uSampler0;
 uniform sampler2D uSampler1;
 uniform sampler2D uSampler2;
 uniform sampler2D uSampler3;
  
  
 uniform float uShaderDebug;
 uniform float uCurrentTime;
 uniform float uNear;
 uniform float uFar;
 uniform float uAlpha; 
 uniform vec3 uParticlePosition;
 uniform vec3 uParticleScale;
 uniform vec3 uPBbox;
 uniform mat4 uParticleMatrix;
 uniform float uPID;
 uniform float uPAlpha;
 uniform float uRAlpha;varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
 varying float pFade;
  
 void main(void) {
   vec4 composit = vec4(1.0,1.0,1.0,1.0);
  
 //color and transpatency
     vec3 caustics = texture2D(uSampler1, vec2((vWorld.x)/24.+uCurrentTime/20., (vWorld.z-vWorld.y)/48.+uCurrentTime/40.)).rgb;
     vec4 colorMap = texture2D(uSampler0, vec2((vTextureCoord.s+uPID)*.25, (vTextureCoord.t+floor(uPID*.25))*.25));
     float transparency = colorMap.r * caustics.r * pFade * uPAlpha;
  
 //mix with fog additive
 composit = vec4((vAmbient + vDiffuse + caustics)*colorMap.rgb, transparency*(1.0-vFogCol.a));
  
 vec4 finalColor = composit;
  
   finalColor.a *= uAlpha;
   if (uShaderDebug == 9.0) {finalColor = vec4(vec3(0.,1.,0.)*finalColor.a*100.,1.0);}//chroma
  
   gl_FragColor = finalColor;
 }
 </script><script id="ray-vs" type="x-shader/x-vertex">
 attribute vec3 aVertexPosition;
 attribute vec3 aVertexNormal;
 attribute vec3 aVertexColor;
 attribute vec3 aTextureCoord;
 uniform mat4 uWorld;
 uniform mat4 uView;
 uniform mat4 uViewInv;
 uniform mat4 uWorldView;
 uniform mat4 uWorldViewProj;
 uniform mat4 uWorldInvTranspose;
  
 uniform float uNear;
 uniform float uFar;
 uniform vec3 uLightPos;
 uniform float uLightRadius;
 uniform vec4 uLightCol;
 uniform vec4 uLightSpecCol;
 uniform float uSpecPower;
 uniform vec4 uAmbientCol;
 uniform vec4 uFresnelCol;
 uniform float uFresnelPower;
 uniform float uFogDist;
 uniform vec4 uFogTopCol;
 uniform vec4 uFogBottomCol;
  
 uniform float uCurrentTime;
 uniform vec3 uParticlePosition;
 uniform vec3 uParticleScale;
 uniform vec3 uPBbox;
 uniform mat4 uParticleMatrix;
 uniform float uPID;
 uniform float uPAlpha;
 uniform float uRAlpha;varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
 varying float pFade;
  
 void main(void) {
  
   //Vertex Animation
   vec3 pos = vec3(uParticleMatrix * vec4(aVertexPosition, 1.0)) + uParticlePosition;
  
 //matrices
   vWorld =               uWorld * vec4(pos, 1.0);
   vWorldView =           uWorldView * vec4(pos, 1.0);
   vWorldViewProj =       uWorldViewProj * vec4(pos, 1.0);
   vWorldInvTranspose =   uWorldInvTranspose * vec4(pos, 1.0);
   vViewInv =             uViewInv * vec4(pos, 1.0);
  
   //vertex eye vector
   vWorldEyeVec = normalize(vWorld.xyz - uViewInv[3].xyz);
  
   //particle fade to bounding box edges
   pFade = min(1.0,3.0*uPBbox[0]-abs(uParticlePosition[0]));
   pFade *= min(1.0,3.0*uPBbox[2]-abs(uParticlePosition[2]));
  
   //vertex fog
   vDepth = (vWorldViewProj.z+uNear)/uFar;
   float height = smoothstep(uFogBottomCol.a, uFogTopCol.a, (vWorldEyeVec.y+1.0)/2.0);
   vFogCol = uFogTopCol*height + uFogBottomCol*(1.0-height);
   vFogCol.a = min(max((uFar-uNear)*vDepth/uFogDist,0.0),1.0);
  
 //texture coords
   vTextureCoord = aTextureCoord;
  
   //vertex color
   vColor = aVertexColor;
  
 gl_Position = vWorldViewProj;
 }
 </script>
  
 <script id="ray-fs" type="x-shader/x-fragment">
 #ifdef GL_ES
 precision highp float;
 #endif
  
 uniform sampler2D uSampler0;
 uniform sampler2D uSampler1;
 uniform sampler2D uSampler2;
 uniform sampler2D uSampler3;
  
  
 uniform float uShaderDebug;
 uniform float uCurrentTime;
 uniform float uNear;
 uniform float uFar;
 uniform float uAlpha; 
 uniform vec3 uParticlePosition;
 uniform vec3 uParticleScale;
 uniform vec3 uPBbox;
 uniform mat4 uParticleMatrix;
 uniform float uPID;
 uniform float uPAlpha;
 uniform float uRAlpha;varying vec3 vWorldEyeVec;
 varying vec4 vWorld;
 varying vec4 vWorldView;
 varying vec4 vWorldViewProj;
 varying vec4 vWorldInvTranspose;
 varying vec4 vViewInv;
 varying vec3 vTextureCoord;
 varying vec3 vVertexNormal;
 varying vec3 vColor;
 varying vec3 vSpecular;
 varying vec3 vDiffuse;
 varying vec3 vAmbient;
 varying vec3 vFresnel;
 varying float vDepth;
 varying vec4 vFogCol;
  
 varying float pFade;
  
 void main(void) {
   vec4 composit = vec4(1.0,1.0,1.0,1.0);
  
 //color and transpatency
 float colorMap = texture2D(uSampler0, vec2(vTextureCoord.s, vTextureCoord.t)).r;
   float transparency = colorMap * pFade * uRAlpha *.05;
  
 //mix with fog additive
 composit = vec4(vec3(vFogCol.rgb)*2.0, transparency*(1.0-vFogCol.a));
  
 vec4 finalColor = composit;
   finalColor.a *= uAlpha;
  
   gl_FragColor = finalColor;
 }
 </script>
 <script type="text/javascript">
 $(document).ready(function(){
   webGLStart();
 });
 </script>
  
 </head>
 <body>
     <div id="statusBar">
         Time: <span id="current-time"></span> | Frame rate: <span id="frameRate">NaN</span> | debug console: <a href="javascript:toggleConsole()"><b>[+]</b> | stop: <a href="javascript:stop()"><b>[+]</b> | reset: <a href="javascript:resetCanvas()"><b>[+]</b></a>
     </div>
     <div id="console">
         <div class="console-field" id="debugCamera">
             <b>camera</b>
             near <input type="text" class="textboxDebug" id="near">
             far <input type="text" class="textboxDebug" id="far">
             fov <input type="text" class="textboxDebug" id="fov"><br />
        </div>
        <div class="console-field" id="debugShader">
           <b>shader debug</b>
             <input type="radio" name="shaderDebug" value="0"> composit <br/>
             <input type="radio" name="shaderDebug" value="1"> diffuse <br/>
             <input type="radio" name="shaderDebug" value="2"> ambient<br/>
             <input type="radio" name="shaderDebug" value="3"> caustics <br/>
             <input type="radio" name="shaderDebug" value="4"> color <br/>
             <input type="radio" name="shaderDebug" value="5"> specular <br/>
             <input type="radio" name="shaderDebug" value="6"> fresnel <br/>
             <input type="radio" name="shaderDebug" value="7"> normal <br/>
             <input type="radio" name="shaderDebug" value="8"> alpha <br/>
             <input type="radio" name="shaderDebug" value="9"> key <br/>
             <input type="radio" name="shaderDebug" value="10"> wireframe <br/>
         </div>
        <div class="console-field" id="debugModel">
           <b>model debug</b>
             <input type="checkbox" name="showJellyfish" value="1"> show jellyfish </br>
             <input type="checkbox" name="showSkeleton" value="1"> show skeleton </br>
             <input type="checkbox" name="showTargets" value="1"> show targets </br>
             <input type="checkbox" name="showParticles" value="1"> show particles </br>
             <input type="checkbox" name="showRays" value="1"> show rays </br>
             <input type="checkbox" name="showGrid" value="1"> show grid </br>
             <input type="checkbox" name="showSkybox" value="1"> show skybox </br>
         </div>
        <div class="console-field" id="debugJellyfish">
           <b>jellyfish debug</b>
             <span class="input-section">count</span>
             <input type="text" class="textboxDebug" id="jCount" /><br />
             <span class="input-section">size</span>
             <input type="text" class="textboxDebug" id="jScale" />
             <input type="text" class="textboxDebug" id="jScaleRandom"  /><br />
             <span class="input-section">Turbulence</span>
             <input type="text" class="textboxDebug" id="jTurb" /><br />
             <span class="input-section">speed</span>
             <input type="text" class="textboxDebug" id="jSpeed" /><br />
         </div>
        <div class="console-field"  id="debugParticle">
           <b>particle debug</b>
             <span class="input-section">count</span>
             <input type="text" class="textboxDebug" id="pCount" /><br />
             <span class="input-section">bbox</span>
             <input type="text" class="textboxDebug" id="pBboxX" />
             <input type="text" class="textboxDebug" id="pBboxY" />
             <input type="text" class="textboxDebug" id="pBboxZ" /><br />
             <span class="input-section">flow</span>
             <input type="text" class="textboxDebug" id="pFlowX" />
             <input type="text" class="textboxDebug" id="pFlowY" />
             <input type="text" class="textboxDebug" id="pFlowZ" /><br />
             <span class="input-section">turbulence</span>
             <input type="text" class="textboxDebug" id="pTurbAmp" />
             <input type="text" class="textboxDebug" id="pTurbFreq" /><br />
             <span class="input-section">size</span>
             <input type="text" class="textboxDebug" id="pScale" />
             <input type="text" class="textboxDebug" id="pScaleRandom" /><br />
             <span class="input-section">alpha</span>
             <input type="text" class="textboxDebug" id="pAlpha" />
         </div>
        <div class="console-field"  id="debugParticle">
           <b>ray debug</b>
             <span class="input-section">ray count</span>
             <input type="text" class="textboxDebug" id="rCount" /><br />
             <span class="input-section">ray speed</span>
             <input type="text" class="textboxDebug" id="rSpeed" /><br />
             <span class="input-section">alpha</span>
             <input type="text" class="textboxDebug" id="rAlpha" /><br />
         </div>
         <div class="console-field" id="debugLighting">
           <b>Directional light</b>
             <span class="input-section">position</span>
             <input type="text" class="textboxDebug" id="lightX" />
             <input type="text" class="textboxDebug" id="lightY" />
             <input type="text" class="textboxDebug" id="lightZ" /><br />
             <span class="input-section">color</span>
             <input type="text" class="textboxDebug" id="lightR" />
             <input type="text" class="textboxDebug" id="lightG" />
             <input type="text" class="textboxDebug" id="lightB" />
             <input type="text" class="textboxDebug" id="lightA" /><br />
             <span class="input-section">spec color</span>
             <input type="text" class="textboxDebug" id="lightSpecR" />
             <input type="text" class="textboxDebug" id="lightSpecG" />
             <input type="text" class="textboxDebug" id="lightSpecB" />
             <input type="text" class="textboxDebug" id="lightSpecA" /><br />
             <span class="input-section">radius</span>
             <input type="text" class="textboxDebug" id="lightRadius" /><br />
             <span class="input-section">spec power</span>
             <input type="text" class="textboxDebug" id="lightSpecPower" /><br />
           <b>Ambient light</b>
             <span class="input-section">color</span>
             <input type="text"  class="textboxDebug" id="ambientR" />
             <input type="text"  class="textboxDebug" id="ambientG" />
             <input type="text"  class="textboxDebug" id="ambientB" />
             <input type="text"  class="textboxDebug" id="ambientA" />
           <b>fog</b>
             <span class="input-section">fogTop</span>
             <input type="text"  class="textboxDebug" id="fogTopR" />
             <input type="text"  class="textboxDebug" id="fogTopG" />
             <input type="text"  class="textboxDebug" id="fogTopB" />
             <input type="text"  class="textboxDebug" id="fogTopA" /></br>
             <span class="input-section">fogBottom</span>
             <input type="text"  class="textboxDebug" id="fogBottomR" />
             <input type="text"  class="textboxDebug" id="fogBottomG" />
             <input type="text"  class="textboxDebug" id="fogBottomB" />
             <input type="text"  class="textboxDebug" id="fogBottomA" /></br>
             <span class="input-section">fogDistance</span>
             <input type="text"  class="textboxDebug" id="fogDist" />
           <b>fresnel</b>
             <span class="input-section">color</span>
             <input type="text"  class="textboxDebug" id="fresnelR" />
             <input type="text"  class="textboxDebug" id="fresnelG" />
             <input type="text"  class="textboxDebug" id="fresnelB" />
             <input type="text"  class="textboxDebug" id="fresnelA" /><br/>
             <span class="input-section">power</span>
             <input type="text"  class="textboxDebug" id="fresnelPower" />
           <b>animation</b>
             <span class="input-section">lightBlendVector</span>
             <input type="text"  class="textboxDebug" id="lightBlendX" />
             <input type="text"  class="textboxDebug" id="lightBlendY" />
         </div>
     </div>
     <canvas id="webgl-canvas"></canvas>
 <script type="text/javascript">
  
   var _gaq = _gaq || [];
   _gaq.push(['_setAccount', 'UA-258449-47']);
   _gaq.push(['_trackPageview']);
  
   (function() {
     var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
     ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
     var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
   })();
  
 </script>
 </body>
 </html>
devehe
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Cg Programming/Unity/Silhouette Enhancement轮廓增强
taishsoft的专栏
09-26 562
一个半透明的水母. 注意轮廓处逐渐增加的不透明度。 本章介绍了表面法线向量的变换。本章假设读者熟悉章节“透明度”中讨论的alpha混合以及章节“世界空间中的着色器编写”中讨论的着色器属性。本章的目标就是为了达到以上照片中的效果：半透明物体的轮廓往往比物体的其余部分更不透明。这样增加了即使没有光照的三维形状的印象。事实证明，转换法线是获得这种效果的关键。光滑表面的轮廓 在一小块表面上的表面法线向量
Unity Shader入门精要总结--光照衰减
派大星PatrickStar的博客
08-05 3292
通过纹理实现光照衰减Unity在内部使用一张名为_LightTexture0的纹理来计算光源衰减。我们通常只关心_LightTexture0对角线上的纹理颜色值，这些值表明了再光源空间中不同位置的点的衰减值。例如（0,0）点表明了与光源位置重合的点的衰减值，而（1,1）点表明了再光源空间中所关心的距离最远的点的衰减。具体应用float3 lightCoord = mul(_LightMatrix0,
谷歌浏览器webGL实验
喵弟的博客
06-06 1629
今天小编推荐几个好玩的谷歌webGL实验：声音转图像，水族馆鱼群测网速，3D水母（纯代码制作），Lights音乐会等。 在详细介绍这个实验之前我先向大家介绍一下webGL技术： WebGL是一项利用JavaScript API呈现3D电脑图形的技术，有别于过往需加装浏览器插件，通过WebGL的技术，只需要编写网页代码即可实现3D图像的展示。WebGL的规格尚在发展中，由非营利的Khronos Gr
Unity3d Shader （Cube两张材质逐渐转换
gaojinjingg的专栏
09-27 2358
存在：http://download.csdn.net/source/2863090 Shader "VrorangeShaders/MixTexture" {  Properties {   _Color ("Main Color", Color) = (1,1,1,1)   _Texture0 ("Texture0 (RGB)", 2D) = "white" {}   _Te
unity Shader总结
darksoulLing的博客
11-02 375
渲染管线==&gt;告诉GPU一堆数据==&gt;得到二维图像 应用程序阶段（CPU）==&gt;几何阶段(顶点着色器函数在这段)==&gt;光栅化阶段（GPU，片元着色器在这段） 应用程序阶段：CPU将顶点信息（顶点坐标，纹理坐标，法线）==&gt;组成一个图元==&gt;告诉GPU 几何阶段：主要工作==&gt;变化三位顶点坐标==&gt;到屏幕坐标中==&gt;传给光栅化阶段 几何阶...
幼儿园小班画画教案设计：水母娃娃的舞会.pdf
02-02
这篇文档是关于幼儿园小班的画画教案设计，主题为“水母娃娃的舞会”，旨在通过艺术活动让孩子们了解并表现水母的形态特征，同时培养他们的观察力、想象力和动手能力。 1. **绘画技巧教学**： - 学习用涂抹和勾画...
仿生机器人水母：海洋守护者.pdf
08-14
#资源达人分享计划#
cocos 游戏源码水母大作战 上海怡胜
07-14
【Cocos游戏开发详解——以“水母大作战”为例】 Cocos是一个广泛使用的开源游戏开发框架，尤其受到初学者的欢迎。在这个“水母大作战”游戏中，我们可以看到Cocos的强大功能和易用性。游戏源码是学习Cocos开发的...
YOLO 数据集：水下目标检测（7类）【包含划分好的数据集、类别class文件、数据可视化脚本】
最新发布
06-02
用于水下目标检测，数据场景丰富，总共7类别，鱼、水母、海星等，具体的查看classes.txt 文件 为了方便查看数据，提供了可视化py文件，随机传入一张图片即可绘制边界框，并且保存在当前目录。脚本无需更改，可以...
Scratch 操控游戏：水母逃生.sb3
01-29
你是一只脆弱的水母，和你的朋友一起旅行。有一天，你被卷入漩涡，现在被困在水下洞穴里。逃跑！ 操控说明书： -单击鼠标以移动/更改方向 -不要碰墙壁 -不要碰黑色的尖刺。紫色的可以 -避开钓鱼鱼和鲨鱼 -小心大...
html5+canvas酷炫水母动画特效
06-12
这是一款html5+canvas实现的酷炫水母运动动画特效，非常好看的网页背景动画效果。
3D制作水母
05-03
玛雅水母游动教程 3D教程，视频介绍并且具有详细的步骤介绍
html5 canvas水母动画特效
06-24
html5 canvas水母动画特效是一款酷炫的水母运动动画特效下载。
卡巴斯基杀毒软体屏保（黑客炫酷）
10-05
一款十分炫酷的屏保，自带黑客属性！换上这款屏保能瞬间让你的炫酷指数upupup!!!
8个惊艳的JavaScript 为 HTML5 Canvas 提供硬件3D加速渲染应用实验
weixin_33976072的博客
03-20 249
WebGL 是一项在网页浏览器呈现3D画面的技术，有别于过去需要安装浏览器插件，通过 WebGL 的技术，只需要编写网页代码即可实现3D图像的展示。WebGL可以为 HTML5 Canvas 提供硬件3D加速渲染，这样 Web 开发人员就可以借助系统显卡来在浏览器里更流畅地展示3D场景和模型了。今天，本文向大家展示8个惊艳的  WebGL 应用实验。 TankWorld 使用WebGL技术...
第五节 WebGL绘制、鼠标与键盘交互实例
Bruce_wjh的博客
11-16 9163
学习交流欢迎加群：789723098，博主会将一些demo整理共享 前几篇一直在讲一些基础性的内容，之前的介绍一直都是理论上的解释，理论总要与实际相结合，才能有所收获，知识也才能得到有效的应用。下面，就从一个实例开始讲解，这个实例绘制了一个彩色立方体，且实现了键盘与鼠标的交互，shift+鼠标左键或中建是旋转立方体，shift+鼠标右键是平移立方体，shift+鼠标滚轮缩放立方体，其效果图如下：...
three.js 学习笔记（一）-简介及环境安装
soraduo的博客
07-30 3082
前言 该笔记为日常记录，我只是简单的将学习过程中一些较为重要的学习心得，重要的知识点记录下来，有什么错误的地方 请在评论区指出，谢谢，个人原创，请勿转载 一，three.js是three+js的总和，three字面意思3，既是3D的意思，js表示javascript的意思。three.js就是用javascipt，写出能在 浏览器上运行的3D程序。 二.现在浏览器基本都支持3D，并且能写出很好的3...
unity 代码修改粒子_新手如何用Maya+Unity制作烟花秀？
weixin_33469623的博客
01-30 750
序不久前，蓝叔开始学习简单的unity特效制作。热播剧《三十而已》里的“许放炮”烟花秀片段，蓝叔看完后觉得有点“秀”啊，所以打算用unity来制作一场的线上烟花秀。下面是蓝叔将制作好的烟花秀，大家记得用小jio指点开呦！【后附蓝叔的水母烟花简单制作方法和思路】看完蓝叔的无声烟花秀，有没有一丢丢“秀”的感觉。接下来，看看蓝叔如何制作“水母烟花”。【】一、模型制作篇在unity中，制作“水母...
webgl 游戏_30个令人惊叹的WebGL示例和演示
weixin_39765869的博客
12-04 3359
WebGl仍在增长，尽管大多数现代浏览器都支持它，但它也可能需要在旧的浏览器上工作。在本文中，我遇到了很多WebGL的示例和演示，它们可以增进您对这项新技术的理解。因此，请坐下来放松身心，使用最新的浏览器，并查看这些令人惊叹的WebGL演示。水族馆由Greggman和Human Engines创建。水族馆几乎完全基于时钟运行。这意味着，如果它们的时钟同步，则摄像机和每条鱼的位置在机器上都相同。在联...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值