多視点 3D リアルな HTML5 水波アニメーション _html5 チュートリアル スキル

これは HTML5 に基づいた 3D 水の波のアニメーション特殊効果で、「G」キーを押すとプール内の石が上下に浮かび上がり、「L」キーを押すと非常にリアルになります。照明効果を追加すると、デザインが非常に完璧になります。同時に、この 3D 水の波のアニメーションは WebGL レンダリング技術に基づいていることに注意してください。WebGL について学ぶことができます。

オンライン プレビュー ソース コードのダウンロード

HTML コード

XML/HTML コードコンテンツをクリップボードにコピー

1. img id="タイル" 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 コードコンテンツをクリップボードにコピーします

1. 関数 Water() {
2. var vertexShader = '
3. さまざまな vec2 座標;
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('このデモには OES_texture_float 拡張機能が必要です');   
12. }
13. var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST;   
14. this.textureA = new GL.Texture(256, 256, { type: gl.FLOAT,フィルター: フィルター });   
15. this.textureB = 新しい GL.Texture(256, 256, { type: gl.FLOAT,フィルター: フィルター });   
16. this.dropShader = new GL.Shader(vertexShader, '
17. const float PI = 3.141592653589793;
18. 均一なサンプラー 2D テクスチャ。
19. ユニフォーム vec2 センター;
20. 均一なフロート半径。
21. 均一なフロート強度。
22. さまざまな vec2 座標;
23. void main() {
24. /* 頂点情報を取得 */
25. vec4 info = texture2D(テクスチャ, 座標);
27. /* ドロップを 高さ に追加します */
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 = ドロップ * 強度;
32. gl_FragColor = 情報;
33. }
34. ');   
35. this.updateShader = new GL.Shader(vertexShader, '
36. 均一なサンプラー 2D テクスチャ。
37. uniform vec2 delta;
38. さまざまな vec2 座標;
39. void main() {
40. /* 頂点情報を取得 */
41. vec4 info = texture2D(テクスチャ, 座標);
43. /* 平均近隣身長を計算する */
44. vec2 dx = vec2(delta.x, 0.0);
45. vec2 dy = vec2(0.0, delta.y);
46. 浮動小数点平均 = (
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. /* 速度を変更して 平均に向けて移動します */
54. info.g = (平均 - info.r) * 2.0;
56. /* 波が永久に続かないように速度を少し減衰させます */
57. info.g *= 0.995;
59. /* 速度に沿って頂点を移動します */
60. info.r = info.g;
62. gl_FragColor = 情報;
63. }
64. ');   
65. this.normalShader = new GL.Shader(vertexShader, '
66. 均一なサンプラー 2D テクスチャ。
67. uniform vec2 delta;
68. さまざまな vec2 座標;
69. void main() {
70. /* 頂点情報を取得 */
71. vec4 info = texture2D(テクスチャ, 座標);
73. /* 通常の更新 */
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 = 情報;
79. }
80. ');   
81. this.sphereShader = 新しい GL.Shader(vertexShader, '
82. 均一なサンプラー 2D テクスチャ。
83. uniform vec3 oldCenter;
84. uniform vec3 newCenter;
85. 均一なフロート半径。
86. さまざまな vec2 座標;
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. /* 頂点情報を取得 */
99. vec4 info = texture2D(テクスチャ, 座標);
101. /* 古いボリュームを追加 */
102. info.r = volumeInSphere(oldCenter);
104. /* 新しい ボリュームを減算 */
105. info.r -= volumeInSphere(newCenter);
107. gl_FragColor = 情報;
108. }
109. ');   
110. }
112. Water.prototype.addDrop = 関数(x, y, 半径, 強度) {
113. var this_ = this;   
114. this.textureB.drawTo(function() {
115. this_.textureA.bind();   
116. this_.dropShader.uniforms({
117. センター: [x, y],
118. 半径: 半径、
119. 強度: 強度
120. }).draw(this_.plane);   
121. });   
122. this.textureB.swapWith(this.textureA);   
123. };   
125. Water.prototype.moveSphere = 関数(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. 半径: 半径
133. }).draw(this_.plane);   
134. });   
135. this.textureB.swapWith(this.textureA);   
136. };   
138. Water.prototype.stepSimulation = 関数() {
139. var this_ = this;   
140. this.textureB.drawTo(function() {
141. this_.textureA.bind();   
142. this_.updateShader.uniforms({
143. デルタ: [1 / this_.textureA.width, 1 / this_.textureA.height]
144. }).draw(this_.plane);   
145. });   
146. this.textureB.swapWith(this.textureA);   
147. };   
149. Water.prototype.updateNormals = 関数() {
150. var this_ = this;   
151. this.textureB.drawTo(function() {
152. this_.textureA.bind();   
153. this_.normalShader.uniforms({
154. デルタ: [1 / this_.textureA.width, 1 / this_.textureA.height]
155. }).draw(this_.plane);   
156. });   
157. this.textureB.swapWith(this.textureA);   
158. };   

以上が本書のすべての内容であり、広く学術的に役立つことが期待されます。