Animation de vagues d'eau HTML5 réalistes 3D multi-perspectives _ compétences du didacticiel HTML5

Il s'agit d'un effet spécial d'animation de vagues d'eau 3D basé sur HTML5. Son effet est très réaliste. Nous pouvons appuyer sur la touche "G" pour faire flotter les pierres de la piscine, et appuyer sur la touche "L" pour. ajouter des effets de lumière. Le design est tout à fait parfait. Dans le même temps, veuillez noter que cette animation de vagues d'eau 3D est basée sur la technologie de rendu WebGL. Vous pouvez en apprendre davantage sur WebGL.

Aperçu en ligne Téléchargement du code source

Code HTML

Code XML/HTMLCopier le contenu dans le presse-papiers

1. <img id="tuiles" 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">

Code JavaScript

Code JavaScriptCopier le contenu dans le presse-papiers

1. fonction Eau() {   
2.   var vertexShader = '  
3.     coord vec2 variable ;  
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 nouveau Erreur('Cette démo nécessite l'extension OES_texture_float');   
12.   }   
13.   var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR  : gl.NEAREST ;   
14.   ce.textureA = nouveau GL.Texture(256, 256, { type : gl.FLOAT, filtre : filtre } );   
15.   ce.textureB = nouveau GL.Texture(256, 256, { type : gl.FLOAT, filtre : filtre });   
16.   this.dropShader = nouveau GL.Shader(vertexShader, '  
17.     const float PI = 3.141592653589793 ;  
18.     texture uniforme sampler2D ;  
19.     centre vec2 uniforme ;  
20.     rayon de flotteur uniforme ;  
21.     force de flottaison uniforme ;  
22.     coord vec2 variable ;  
23.     void main() {  
24.       /* obtenir des informations sur le sommet */  
25.       vec4 info = texture2D(texture, coord);  
26.         
27.       /* ajouter la goutte à la hauteur */  
28.       float drop = max(0.0, 1.0 - length(center * 0.5   0.5 - coord) / radius);  
29.       goutte = 0,5 - cos(goutte * PI) * 0,5 ;  
30.       info.r  = drop * force ;  
31.         
32.       gl_FragColor = info ;  
33.     } 
34.   ');   
35.   ce.updateShader = nouveau GL.Shader(vertexShader, '  
36.     texture uniforme sampler2D ;  
37.     uniforme vec2 delta ;  
38.     coord vec2 variable ;  
39.     void main() {  
40.       /* obtenir des informations sur le sommet */  
41.       vec4 info = texture2D(texture, coord);  
42.         
43.       /* calculer la taille moyenne des voisins */  
44.       vec2 dx = vec2(delta.x, 0.0);  
45.       vec2 dy = vec2(0.0, delta.y);  
46.       moyenne flottante = (  
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.       /* changer la vitesse pour se déplacer vers la moyenne */  
54.       info.g  = (moyenne - info.r) * 2,0 ;  
55.         
56.       /* atténuer la vitesse un petit pour que les vagues ne durent pas éternellement */  
57.       info.g *= 0,995 ;  
58.         
59.       /* déplacer le sommet le long de la vitesse */  
60.       info.r  = info.g;  
61.         
62.       gl_FragColor = info ;  
63.     } 
64.   ');   
65.   ce.normalShader = nouveau GL.Shader(vertexShader, '  
66.     texture uniforme sampler2D ;  
67.     uniforme vec2 delta ;  
68.     coord vec2 variable ;  
69.     void main() {  
70.       /* obtenir des informations sur le sommet */  
71.       vec4 info = texture2D(texture, coord);  
72.         
73.       /* mettre à jour la normale */  
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.   ce.sphereShader = nouveau GL.Shader(vertexShader, '  
82.     texture uniforme sampler2D ;  
83.     uniforme vec3 oldCenter ;  
84.     uniforme vec3 newCenter ;  
85.     rayon de flotteur uniforme ;  
86.     coord vec2 variable ;  
87.       
88.     float volumeInSphere(vec3 center) {  
89.       vec3 toCenter = vec3(coord.x * 2.0 - 1.0, 0.0, coord.y * 2.0 - 1.0) - centre ;  
90.       float t = longueur (vers le centre) / rayon ;  
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.       retour (ymax - ymin) * 0,1 ;  
95.     } 
96.       
97.     void main() {  
98.       /* obtenir des informations sur le sommet */  
99.       vec4 info = texture2D(texture, coord);  
100.         
101.       /* ajouter l'ancien volume */  
102.       info.r  = volumeInSphere(oldCenter);  
103.         
104.       /* soustraire le nouveau volume */  
105.       info.r -= volumeInSphere(newCenter);  
106.         
107.       gl_FragColor = info ;  
108.     }  
109.   ');   
110. }   
111.   
112. Water.prototype.addDrop = fonction(x, y, rayon, force) {   
113.   var this_ = this ;   
114.   ce.textureB.drawTo(fonction() {   
115.     this_.textureA.bind();   
116.     this_.dropShader.uniforms({   
117.       centre : [x, y],   
118.       rayon : rayon,   
119.       force : force   
120.     }).draw(this_.plane);   
121.   });   
122.   ce.textureB.swapWith(ce.textureA);   
123. } ;   
124.   
125. Water.prototype.moveSphere = fonction(oldCenter, newCenter, rayon) {   
126.   var this_ = this;   
127.   ce.textureB.drawTo(fonction() {   
128.     this_.textureA.bind();   
129.     this_.sphereShader.uniforms({   
130.       oldCenter : oldCenter,   
131.       nouveauCentre : nouveauCentre,   
132.       rayon : rayon   
133.     }).draw(this_.plane);   
134.   });   
135.   ce.textureB.swapWith(ce.textureA);   
136. };   
137.   
138. Water.prototype.stepSimulation = fonction() {   
139.   var this_ = this;   
140.   ce.textureB.drawTo(fonction() {   
141.     this_.textureA.bind();   
142.     this_.updateShader.uniforms({   
143.       delta : [1 / this_.textureA.width, 1 / this_.textureA.height]   
144.     }).draw(this_.plane);   
145.   });   
146.   ce.textureB.swapWith(ce.textureA);   
147. } ;   
148.   
149. Water.prototype.updateNormals = fonction() {   
150.   var this_ = this;   
151.   ce.textureB.drawTo(fonction() {   
152.     this_.textureA.bind();   
153.     this_.normalShader.uniforms({   
154.       delta : [1 / this_.textureA.width, 1 / this_.textureA.height]   
155.     }).draw(this_.plane);   
156.   });   
157.   ce.textureB.swapWith(ce.textureA);   
158. } ;   

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