Kemahiran tutorial _html5 animasi gelombang air HTML5 realistik 3D berbilang perspektif

Ini ialah kesan khas animasi gelombang air 3D berdasarkan HTML5 Kesannya sangat realistik. Kita boleh menekan kekunci "G" untuk membuat batu dalam kolam terapung ke atas dan ke bawah, dan tekan kekunci "L" untuk. tambah kesan pencahayaan Reka bentuknya cukup sempurna. Pada masa yang sama, sila ambil perhatian bahawa animasi gelombang air 3D ini adalah berdasarkan teknologi pemaparan WebGL Anda boleh belajar tentang WebGL.

Pratonton dalam talian Muat turun kod sumber

Kod HTML

Kod XML/HTMLSalin kandungan ke papan keratan

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

Kod JavaScript

Kod JavaScriptSalin kandungan ke papan keratan

1. fungsi Air() {   
2.   var vertexShader = '  
3.     pelbagai vec2 coord;  
4.     kosong utama() {  
5.       coord = gl_Vertex.xy * 0.5   0.5;  
6.       gl_Position = vec4(gl_Vertex.xyz, 1.0);  
7.     }  
8.   ';   
9.   ini.plane = GL.Mesh.plane();   
10.   jika (!GL.Texture.canUseFloatingPointTextures()) {   
11.     buang baharu Ralat('Demo ini memerlukan tegangan_baharu >);   
12.   }   
13.   var penapis = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST;   
14.   ini.textureA = baharu GL.Tekstur(256, 256, { jenis: gl.FLOAT, penapis: penapis });   
15.   ini.textureB = baharu GL.Tekstur(256, 256, { jenis: gl.FLOAT, penapis: penapis });   
16.   ini.dropShader = baharu GL.Shader(vertexShader, ' ' > 
17.     const float PI = 3.141592653589793;  
18.     tekstur sampler2D seragam;  
19.     pusat seragam vec2;  
20.     jejari apungan seragam;  
21.     kekuatan apungan seragam;  
22.     pelbagai vec2 coord;  
23.     kosong utama() {  
24.       /* dapatkan maklumat puncak */  
25.       vec4 info = texture2D(texture, coord);  
26.         
27.       /* tambahkan kejatuhan ke ketinggian */  
28.       float drop = maks(0.0, 1.0 - panjang(tengah * 0.5   0.5 - coord) / radius);  
29.       turun = 0.5 - kos(turun * PI) * 0.5;  
30.       info.r  = jatuhkan * kekuatan;  
31.         
32.       gl_FragColor = maklumat;  
33.     } 
34.   ');   
35.   ini.updateShader = baharu GL.Shader(vertexShader, ' ' > 
36.     tekstur sampler2D seragam;  
37.     seragam vec2 delta;  
38.     pelbagai vec2 coord;  
39.     kosong utama() {  
40.       /* dapatkan maklumat puncak */  
41.       vec4 info = texture2D(texture, coord);  
42.         
43.       /* kira purata tinggi jiran */  
44.       vec2 dx = vec2(delta.x, 0.0);  
45.       vec2 dy = vec2(0.0, delta.y);  
46.       purata terapung = (  
47.         tekstur2D(tekstur, coord - dx).r   
48.         texture2D(tekstur, coord - dy).r   
49.         tekstur2D(tekstur, coord   dx).r   
50.         texture2D(tekstur, coord   dy).r  
51.       ) * 0.25;  
52.         
53.       /* tukar halaju untuk bergerak ke arah purata */  
54.       info.g  = (purata - info.r) * 2.0;  
55.         
56.       /* melemahkan halaju sedikit sehingga gelombang tidak berkekalan selama-lamanya */  
57.       info.g *= 0.995;  
58.         
59.       /* gerakkan pucuk sepanjang halaju */  
60.       info.r  = info.g;  
61.         
62.       gl_FragColor = maklumat;  
63.     } 
64.   ');   
65.   ini.normalShader = baharu GL.Shader(vertexShader, ' ' > 
66.     tekstur sampler2D seragam;  
67.     seragam vec2 delta;  
68.     pelbagai vec2 coord;  
69.     kosong utama() {  
70.       /* dapatkan maklumat puncak */  
71.       vec4 info = texture2D(texture, coord);  
72.         
73.       /* kemas kini biasa */  
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 = maklumat;  
79.     }  
80.   ');   
81.   ini.sphereShader = baharu GL.Shader(vertexShader, ' ' > 
82.     tekstur sampler2D seragam;  
83.     seragam vec3 oldCenter;  
84.     uniform vec3 newCenter;  
85.     jejari apungan seragam;  
86.     pelbagai 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.       terapung t = panjang(kePusat) / jejari;  
91.       float dy = exp(-pow(t * 1.5, 6.0));  
92.       terapung ymin = min(0.0, center.y - dy);  
93.       float ymax = min(maks(0.0, center.y   dy), ymin   2.0 * dy);  
94.       pulangan (ymax - ymin) * 0.1;  
95.     } 
96.       
97.     kosong utama() {  
98.       /* dapatkan maklumat puncak */  
99.       vec4 info = texture2D(texture, coord);  
100.         
101.       /* tambah volum lama */  
102.       info.r  = volumeInSphere(oldCenter);  
103.         
104.       /* tolak jumlah baharu */  
105.       info.r -= volumeInSphere(newCenter);  
106.         
107.       gl_FragColor = maklumat;  
108.     }  
109.   ');   
110. }   
111.   
112. Water.prototype.addDrop = fungsi(x, y, jejari, kekuatan) {   
113.   var ini_ = ini;   
114.   ini.textureB.drawTo(fungsi() {   
115.     this_.textureA.bind();   
116.     this_.dropShader.uniforms({   
117.       pusat: [x, y],   
118.       jejari: jejari,   
119.       kekuatan: kekuatan   
120.     }).draw(this_.plane);   
121.   });   
122.   ini.textureB.swapWith(ini.textureA);   
123. };   
124.   
125. Water.prototype.moveSphere = fungsi(oldCenter, newCenter, radius) {   
126.   var ini_ = ini;   
127.   ini.textureB.drawTo(fungsi() {   
128.     this_.textureA.bind();   
129.     this_.sphereShader.uniforms({   
130.       oldCenter: oldCenter,   
131.       Pusat baharu: Pusat baharu,   
132.       jejari: jejari   
133.     }).draw(this_.plane);   
134.   });   
135.   ini.textureB.swapWith(ini.textureA);   
136. };   
137.   
138. Water.prototype.stepSimulation = fungsi() {   
139.   var ini_ = ini;   
140.   ini.textureB.drawTo(fungsi() {   
141.     this_.textureA.bind();   
142.     this_.updateShader.uniforms({   
143.       delta: [1 / this_.textureA.width, 1 / this_.textureA.height]   
144.     }).draw(this_.plane);   
145.   });   
146.   ini.textureB.swapWith(ini.textureA);   
147. };   
148.   
149. Water.prototype.updateNormals = fungsi() {   
150.   var ini_ = ini;   
151.   ini.textureB.drawTo(fungsi() {   
152.     this_.textureA.bind();   
153.     ini_.normalShader.uniforms({   
154.       delta: [1 / this_.textureA.width, 1 / this_.textureA.height]   
155.     }).draw(this_.plane);   
156.   });   
157.   ini.textureB.swapWith(ini.textureA);   
158. };   

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