多视角3D逼真HTML5水波动画

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

在线预览 源码下载

HTML代码

1. img id="tiles" src="tiles.jpg">   
2. img id="xneg" src="xneg.jpg">   
3. img id="xpos" src="xpos.jpg">   
4. img id="ypos" src="ypos.jpg">   
5. img id="zneg" src="zneg.jpg">   
6. img id="zpos" src="zpos.jpg">   
7.   

JavaScript代码

1. function Water() {   
2.   VAR vertexShader = '\  
3.     varying vec2 coord; \  
4.     void main() { \  
5.       coord = gl_Vertex.xy * 0.5 + 0.5; \  
6.       gl_PosITion = vec4(gl_Vertex.xyz, 1.0); \  
7.     } \  
8.   ';   
9.   this.plane = GL.Mesh.plane();   
10.   if (!GL.Texture.canUseFloatingPointTextures()) {   
11.     throw new Error('This demo requires the OES_texture_float extension');   
12.   }   
13.   var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST;   
14.   this.textureA = new GL.Texture(256, 256, {  tyPE: gl.FLOAT, filter: filter } );   
15.   this.textureB = new GL.Texture(256, 256, {  type: gl.FLOAT, filter: filter } );   
16.   this.dropShader = new GL.Shader(vertexShader, '\  
17.     const float PI = 3.141592653589793; \  
18.     uniform sampler2D texture; \  
19.     uniform vec2 center; \  
20.     uniform float radius; \  
21.     uniform float strength; \  
22.     varying vec2 coord; \  
23.     void main() { \  
24.       /* get vertex info */\  
25.       vec4 info = texture2D(texture, coord); \  
26.       \  
27.       /* add the drop to the height */\  
28.       float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius); \  
29.       drop = 0.5 - cos(drop * PI) * 0.5; \  
30.       info.r += drop * strength; \  
31.       \  
32.       gl_FragColor = info; \  
33.     } \  
34.   ');   
35.   this.updateShader = new GL.Shader(vertexShader, '\  
36.     uniform sampler2D texture; \  
37.     uniform vec2 delta; \  
38.     varying vec2 coord; \  
39.     void main() { \  
40.       /* get vertex info */\  
41.       vec4 info = texture2D(texture, coord); \  
42.       \  
43.       /* calculate average neighbor height */\  
44.       vec2 dx = vec2(delta.x, 0.0); \  
45.       vec2 dy = vec2(0.0, delta.y); \  
46.       float average = (\  
47.         texture2D(texture, coord - dx).r +\  
48.         texture2D(texture, coord - dy).r +\  
49.         texture2D(texture, coord + dx).r +\  
50.         texture2D(texture, coord + dy).r\  
51.       ) * 0.25; \  
52.       \  
53.       /* change the velocity to move toward the average */\  
54.       info.g += (average - info.r) * 2.0; \  
55.       \  
56.       /* attenuate the velocity a liTTLe so waves do not last forever */\  
57.       info.g *= 0.995; \  
58.       \  
59.       /* move the vertex along the velocity */\  
60.       info.r += info.g; \  
61.       \  
62.       gl_FragColor = info; \  
63.     } \  
64.   ');   
65.   this.normalShader = new GL.Shader(vertexShader, '\  
66.     uniform sampler2D texture; \  
67.     uniform vec2 delta; \  
68.     varying vec2 coord; \  
69.     void main() { \  
70.       /* get vertex info */\  
71.       vec4 info = texture2D(texture, coord); \  
72.       \  
73.       /* update the normal */\  
74.       vec3 dx = vec3(delta.x, texture2D(texture, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0); \  
75.       vec3 dy = vec3(0.0, texture2D(texture, vec2(coord.x, coord.y + delta.y)).r - info.r, delta.y); \  
76.       info.ba = normalize(cross(dy, dx)).xz; \  
77.       \  
78.       gl_FragColor = info; \  
79.     } \  
80.   ');   
81.   this.sphereShader = new GL.Shader(vertexShader, '\  
82.     uniform sampler2D texture; \  
83.     uniform vec3 oldCenter; \  
84.     uniform vec3 newCenter; \  
85.     uniform float radius; \  
86.     varying vec2 coord; \  
87.     \  
88.     float volumeInSphere(vec3 center) { \  
89.       vec3 toCenter = vec3(coord.x * 2.0 - 1.0, 0.0, coord.y * 2.0 - 1.0) - center; \  
90.       float t = length(toCenter) / radius; \  
91.       float dy = exp(-pow(t * 1.5, 6.0)); \  
92.       float ymin = min(0.0, center.y - dy); \  
93.       float ymax = min(max(0.0, center.y + dy), ymin + 2.0 * dy); \  
94.       return (ymax - ymin) * 0.1; \  
95.     } \  
96.     \  
97.     void main() { \  
98.       /* get vertex info */\  
99.       vec4 info = texture2D(texture, coord); \  
100.       \  
101.       /* add the old volume */\  
102.       info.r += volumeInSphere(oldCenter); \  
103.       \  
104.       /* suBTract the new volume */\  
105.       info.r -= volumeInSphere(newCenter); \  
106.       \  
107.       gl_FragColor = info; \  
108.     } \  
109.   ');   
110. }   
111.   
112. Water.PRototype.addDrop = function(x, y, radius, strength) {   
113.   var this_ = this;   
114.   this.textureB.drawTo(function() {   
115.     this_.textureA.bind();   
116.     this_.dropShader.uniforms({   
117.       center: [x, y],   
118.       radius: radius,   
119.       strength: strength   
120.     } ).draw(this_.plane);   
121.   } );   
122.   this.textureB.swapWith(this.textureA);   
123. } ;   
124.   
125. Water.prototype.moveSphere = function(oldCenter, newCenter, radius) {   
126.   var this_ = this;   
127.   this.textureB.drawTo(function() {   
128.     this_.textureA.bind();   
129.     this_.sphereShader.uniforms({   
130.       oldCenter: oldCenter,   
131.       newCenter: newCenter,   
132.       radius: radius   
133.     } ).draw(this_.plane);   
134.   } );   
135.   this.textureB.swapWith(this.textureA);   
136. } ;   
137.   
138. Water.prototype.stepSimulation = function() {   
139.   var this_ = this;   
140.   this.textureB.drawTo(function() {   
141.     this_.textureA.bind();   
142.     this_.updateShader.uniforms({   
143.       delta: [1 / this_.textureA.width, 1 / this_.textureA.height]   
144.     } ).draw(this_.plane);   
145.   } );   
146.   this.textureB.swapWith(this.textureA);   
147. } ;   
148.   
149. Water.prototype.updateNormals = function() {   
150.   var this_ = this;   
151.   this.textureB.drawTo(function() {   
152.     this_.textureA.bind();   
153.     this_.normalShader.uniforms({   
154.       delta: [1 / this_.textureA.width, 1 / this_.textureA.height]   
155.     } ).draw(this_.plane);   
156.   } );   
157.   this.textureB.swapWith(this.textureA);   
158. } ;   

以上就是本文的全部内容，希望对大家的学习有所帮助。

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！