多视角3D逼真HTML5水波动画 _html5教程技巧-H5教程

在线预览 源码下载

HTML代码

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

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">

JavaScript代码

JavaScript Code复制内容到剪贴板

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);
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;
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);
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;
53. /* change the velocity to move toward the average */
54. info.g += (average - info.r) * 2.0;
56. /* attenuate the velocity a little so waves do not last forever */
57. info.g *= 0.995;
59. /* move the vertex along the velocity */
60. info.r += info.g;
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);
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;
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;
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. }
97. void main() {
98. /* get vertex info */
99. vec4 info = texture2D(texture, coord);
101. /* add the old volume */
102. info.r += volumeInSphere(oldCenter);
104. /* subtract the new volume */
105. info.r -= volumeInSphere(newCenter);
107. gl_FragColor = info;
108. }
109. ');
110. }
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. };
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. };
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. };
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. };

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