如何制作多视角3D逼真HTML5水波动画

如何制作多视角3D逼真HTML5水波动画 ，针对这个问题，这篇文章详细介绍了相对应的分析和解答，希望可以帮助更多想解决这个问题的小伙伴找到更简单易行的方法。

这是一款基于html5的3D水波动画特效，它的效果非常逼真，我们可以按“G”键来让水池中的石头上下浮动，按“L”键添加灯光效果，设计相当完美。同时说明一下，这款3D水波动画是基于webGL渲染技术的，大家可以了解一下WEBGL。

HTML代码

XML/HTML Code复制内容到剪贴板

1. <img id="tiles" src="tiles.jpg">  
   <img id="xneg" src="xneg.jpg">  
   <img id="xpos" src="xpos.jpg">  
   <img id="ypos" src="ypos.jpg">  
   <img id="zneg" src="zneg.jpg">  
   <img id="zpos" src="zpos.jpg">

javascript代码

JavaScript Code复制内容到剪贴板

1. function Water() {   
     var vertexShader = '\  
       varying vec2 coord;\  
       void main() {\  
         coord = gl_Vertex.xy * 0.5 + 0.5;\  
         gl_Position = vec4(gl_Vertex.xyz, 1.0);\  
       }\  
     ';   
     this.plane = GL.Mesh.plane();   
     if (!GL.Texture.canUseFloatingPointTextures()) {   
       throw new Error('This demo requires the OES_texture_float extension');   
     }   
     var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST;   
     this.textureA = new GL.Texture(256, 256, { type: gl.FLOAT, filter: filter });   
     this.textureB = new GL.Texture(256, 256, { type: gl.FLOAT, filter: filter });   
     this.dropShader = new GL.Shader(vertexShader, '\  
       const float PI = 3.141592653589793;\  
       unifORM sampler2D texture;\  
       uniform vec2 center;\  
       uniform float radius;\  
       uniform float strength;\  
       varying vec2 coord;\  
       void main() {\  
         \  
         vec4 info = texture2D(texture, coord);\  
         \  
         \  
         float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);\  
         drop = 0.5 - cos(drop * PI) * 0.5;\  
         info.r += drop * strength;\  
         \  
         gl_FraGColor = info;\  
       }\  
     ');   
     this.updateShader = new GL.Shader(vertexShader, '\  
       uniform sampler2D texture;\  
       uniform vec2 delta;\  
       varying vec2 coord;\  
       void main() {\  
         \  
         vec4 info = texture2D(texture, coord);\  
         \  
         \  
         vec2 dx = vec2(delta.x, 0.0);\  
         vec2 dy = vec2(0.0, delta.y);\  
         float average = (\  
           texture2D(texture, coord - dx).r +\  
           texture2D(texture, coord - dy).r +\  
           texture2D(texture, coord + dx).r +\  
           texture2D(texture, coord + dy).r\  
         ) * 0.25;\  
         \  
         \  
         info.g += (average - info.r) * 2.0;\  
         \  
         \  
         info.g *= 0.995;\  
         \  
         \  
         info.r += info.g;\  
         \  
         gl_FragColor = info;\  
       }\  
     ');   
     this.normalShader = new GL.Shader(vertexShader, '\  
       uniform sampler2D texture;\  
       uniform vec2 delta;\  
       varying vec2 coord;\  
       void main() {\  
         \  
         vec4 info = texture2D(texture, coord);\  
         \  
         \  
         vec3 dx = vec3(delta.x, texture2D(texture, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0);\  
         vec3 dy = vec3(0.0, texture2D(texture, vec2(coord.x, coord.y + delta.y)).r - info.r, delta.y);\  
         info.ba = normalize(cross(dy, dx)).xz;\  
         \  
         gl_FragColor = info;\  
       }\  
     ');   
     this.sphereShader = new GL.Shader(vertexShader, '\  
       uniform sampler2D texture;\  
       uniform vec3 oldCenter;\  
       uniform vec3 newCenter;\  
       uniform float radius;\  
       varying vec2 coord;\  
       \  
       float volumeInSphere(vec3 center) {\  
         vec3 toCenter = vec3(coord.x * 2.0 - 1.0, 0.0, coord.y * 2.0 - 1.0) - center;\  
         float t = length(toCenter) / radius;\  
         float dy = exp(-pow(t * 1.5, 6.0));\  
         float ymin = min(0.0, center.y - dy);\  
         float ymax = min(max(0.0, center.y + dy), ymin + 2.0 * dy);\  
         return (ymax - ymin) * 0.1;\  
       }\  
       \  
       void main() {\  
         \  
         vec4 info = texture2D(texture, coord);\  
         \  
         \  
         info.r += volumeInSphere(oldCenter);\  
         \  
         \  
         info.r -= volumeInSphere(newCenter);\  
         \  
         gl_FragColor = info;\  
       }\  
     ');   
   }   
     
   Water.prototype.aDDDrop = function(x, y, radius, strength) {   
     var this_ = this;   
     this.textureB.drawTo(function() {   
       this_.textureA.bind();   
       this_.dropShader.uniforms({   
         center: [x, y],   
         radius: radius,   
         strength: strength   
       }).draw(this_.plane);   
     });   
     this.textureB.swapWith(this.textureA);   
   };   
     
   Water.prototype.moveSphere = function(oldCenter, newCenter, radius) {   
     var this_ = this;   
     this.textureB.drawTo(function() {   
       this_.textureA.bind();   
       this_.sphereShader.uniforms({   
         oldCenter: oldCenter,   
         newCenter: newCenter,   
         radius: radius   
       }).draw(this_.plane);   
     });   
     this.textureB.swapWith(this.textureA);   
   };   
     
   Water.prototype.stepSimulation = function() {   
     var this_ = this;   
     this.textureB.drawTo(function() {   
       this_.textureA.bind();   
       this_.updateShader.uniforms({   
         delta: [1 / this_.textureA.width, 1 / this_.textureA.height]   
       }).draw(this_.plane);   
     });   
     this.textureB.swapWith(this.textureA);   
   };   
    Water.prototype.updateNormals = function() {   
     var this_ = this;   
     this.textureB.drawTo(function() {   
       this_.textureA.bind();   
       this_.normalShader.uniforms({   
         delta: [1 / this_.textureA.width, 1 / this_.textureA.height]   
       }).draw(this_.plane);   
     });   
     this.textureB.swapWith(this.textureA);   
   };

关于如何制作多视角3D逼真HTML5水波动画 问题的解答就分享到这里了，希望以上内容可以对大家有一定的帮助，如果你还有很多疑惑没有解开，可以关注编程网VUE频道了解更多相关知识。