多視角3D逼真HTML5水波動畫 _html5教學技巧

這是一款基於HTML5的3D水波動畫特效，它的效果非常逼真，我們可以按「G」鍵來讓水池中的石頭上下浮動，按「L」鍵添加燈光效果，設計相當完美。同時說明一下，這款3D水波動畫是基於WebGL渲染技術的，大家可以了解WebGL。

線上預覽 原始碼下載

HTML程式碼

XML/HTML Code複製內容到剪貼簿

1. img id=id=id=id=id=
2. ; 🎜> src="tiles.jpg"> 🎜>> > img 
id
3. =id=id=id src="xneg.jpg">
img id=id=id=" 🎜> src="xpos.jpg">
4. > img id=id=id=" 🎜> 
src
5. ="ypos.jpg">> img id=id
=
6. id
=

id

=

id

=id

=id src="zneg.jpg"> img id=id=id=" 🎜> src="zpos.jpg">    JavaScript程式碼 JavaScript Code複製內容到剪貼簿

1. 函數 水() {   
2.   var vertexShader = '  
3.     變化的 vec2 座標；  
4.     void main() {  
5.       座標 = gl_Vertex.xy * 0.5   0.5;  
6.       gl_Position = vec4(gl_Vertex.xyz, 1.0);  
7.     }  
8.   '；   
9.   這.plane = GL.Mesh.plane();   
10.   if (!GL.Texture.canUseFloatingPointTextures()) {   
11.     拋出 新 >);      }   
12.   
13. var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.線性：gl.最近；   這個
14. .textureA = 新 GL.Texture(256,Texture(256,I56,過濾器：過濾器}）；      這個
.textureB = 
15. 新 GL.Texture(256,Texture(256,I56,過濾器：過濾器}）；   
16.   這個.dropShader = 新 GL.Shader((Shader), cp > 
    const float PI = 3.141592653589793;
17.  
    統一取樣器二維紋理；
18.  
    均勻 vec2 中心；
19.  
    統一浮動半徑；
20.  
    均勻的漂浮強度；
21.  
    變化的 vec2 座標；
22.  
    void main() {
23.  
      /* 取得頂點資訊*/
24.  
      vec4 info = texture2D（紋理， 座標）;
25.  
      
26.  
      /* 將水滴加到高度*/
27.  
      浮點數 = max(0.0, 1.0 - 長度(中心 * 0.5 0.5 - 座標)/半徑);
28.  
      drop = 0.5 - cos(drop * PI) * 0.5;
29.  
      info.r  = 掉落 * 肌力；
30.  
      
31.  
      gl_FragColor = 資訊；
32.  
    } 
33.   '）；   
34.   這個.updateShader = 新 GL.Shader( > 
    統一取樣器二維紋理；
35.  
    統一 vec2 delta;
36.  
    變化的 vec2 座標；
37.  
    void main() {
38.  
      /* 取得頂點資訊*/
39.  
      vec4 info = texture2D（紋理， 座標）;
40.  
      
41.  
      /* 計算鄰居平均身高*/
42.  
      vec2 dx = vec2(delta.x, 0.0);
43.  
      vec2 dy = vec2(0.0, delta.y);
44.  
      浮動平均值= (
45.  
        texture2D(紋理, 座標 - dx).r 
46.  
        texture2D(紋理, 座標 - dy).r 
47.  
        texture2D(紋理, 座標   dx).r 
48.  
        texture2D(紋理, 座標   dy).r
49.  
      ) * 0.25；
50.  
      
51.  
      /* 改變速率以朝向平均值移動*/
52.  
      info.g  = （平均值 - info.r） * 2.0;
53.  
      
54.  
      /*稍微減弱速度，因此波浪不會永遠持續*/
55.  
      info.g *= 0.995；
56.  
      
57.  
      /* 沿速度移動頂點*/
58.  
      info.r  = info.g;
59.  
      
60.  
      gl_FragColor = 資訊；
61.  
    } 
62.   '）；   
63.   這個.normalShader = 新 GL.Shader((Shader) > 
    統一取樣器二維紋理；
64.  
    統一 vec2 delta;
65.  
    變化的 vec2 座標；
66.  
    void main() {
67.  
      /* 取得頂點資訊*/
68.  
      vec4 info = texture2D（紋理， 座標）;
69.  
      
70.  
      /* 更新正常*/
71.  
      vec3 dx = vec3(delta.x, texture2D(texture, vec2(coord.x dx delta.x, coord.y)).info 🎜>
72.       vec3 dy = vec3(0.0, texture2D(texture, vec2(coord.x, coord.y texture2D(texture, vec2(coord.x, coord.y ),
73.       info.ba = 歸一化(cross(dy, dx)).xz;  
74.         
75.       gl_FragColor = 資訊；  
76.     }  
77.   '）；   
78.   這個.sphereShader = 
79. 新 GL.Shader(vert( >      統一取樣器二維紋理；       統一 vec3 oldCenter;
 
80.     uniform vec3 newCenter;
 
81.     統一浮動半徑；
 
82.     變化的 vec2 座標；
 
83.     
 
84.     float volumeInSphere(vec3 center) {
 
85.       vec3 toCenter = vec3(coord.x * 2.0 - 1.0, 0.0, coord.y * 2.0 - 1.0) - center;
 
86.       float t = 長度（至中心）/ 半徑；
 
87.       float dy = exp(-pow(t * 1.5, 6.0));
 
88.       float ymin = min(0.0, center.y - dy);
 
89.       float ymax = min(max(0.0, center.y  dy), ymin  2.0 *作用
90.       返回（ymax - ymin）* 0.1；  
91.     } 
92.       
93.     void main() {  
94.       /* 取得頂點資訊*/  
95.       vec4 info = texture2D（紋理， 座標）;  
96.         
97.       /* 新增舊卷*/  
98.       info.r  = volumeInSphere(oldCenter);  
99.         
100.       /* 減去新卷*/  
101.       info.r -= volumeInSphere(newCenter);  
102.         
103.       gl_FragColor = 資訊；  
104.     }  
105.   '）；   
106. }   
107.   
108. Water.prototype.addDrop = 函數(x, y, 半徑, 強度) {   
109.   var 這個_ = 這個; 🎜>這個
110. ; 🎠  這個.textureB.drawTo(函數
().
111.     this_.textureA.bind();   
112.     this_.dropShader.uniforms({   
113.       中心：[x, y],   
114.       半徑：半徑，  
115.       強度： 強度   
116.     }).draw(this_.plane);   
117.   });   
118.   這個.textureB.swapWith(這個.textureA);  
}；   
  
Water.prototype.moveSphere = 
121. 函數(oldCenter, newCenter, 半徑) {   
122.   var 這個_ = 這個; 🎜>這個
; 🎠
123.   這個.textureB.drawTo(函數().
124.     this_.textureA.bind();   
125.     this_.sphereShader.uniforms({   
126.       oldCenter：oldCenter，  
127.       新中心：新中心，  
128.       半徑：半徑   
129.     }).draw(this_.plane);   
130.   });   
131.   這個.textureB.swapWith(這個.textureA);   };   
132.   
133. Water.prototype.stepSimulation = 函數() {   
134.   var 這個_ = 這個; 🎜>這個
135. ; 🎠  這個.textureB.drawTo(函數
().
136.     this_.textureA.bind();   
137.     this_.updateShader.uniforms({   
138.       增量：[1 / this_.textureA.width, 1 / this_.textureA.height]   
139.     }).draw(this_.plane);   
140.   });   
141.   這個.textureB.swapWith(這個.textureA);  
}；   
  
Water.prototype.updateNormals = 
144. 函數() {   
  
145. var 這個_ = 這個; 🎜>這個; 🎠
  這個.textureB.drawTo(函數().     this_.textureA.bind();   
    this_.normalShader.uniforms({   
      增量：[1 / this_.textureA.width, 1 / this_.textureA.height]   
    }).draw(this_.plane);   
  });   
  
151. 這個.textureB.swapWith(這個.textureA);   }；   
以上就是本文的全部內容，希望對大家的學習有所幫助。