다중 관점 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 코드클립보드에 콘텐츠 복사

1. 기능 물() {   
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.   이것.plane = GL.Mesh.plane();   
10.   if (!GL.Texture.canUseFloatingPointTextures()) {   
11.     throw new 오류('이 데모에는 OES_texture_float 확장 프로그램이 필요합니다');   
12.   }   
13.   var 필터 = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST;   
14.   이.textureA = new GL.Texture(256, 256, { 유형: gl.FLOAT, 필터: 필터 });   
15.   이것.textureB = new GL.Texture(256, 256, { 유형: gl.FLOAT, 필터: 필터 });   
16.   이.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 정보 = texture2D(texture, coord);  
26.         
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  = 드롭 * 강도;  
31.         
32.       gl_FragColor = 정보;  
33.     } 
34.   ');   
35.   이.updateShader = new GL.Shader(vertexShader, '  
36.     균일한 샘플러2D 텍스처;  
37.     균일한 vec2 델타;  
38.     다양한 vec2 좌표;  
39.     void main() {  
40.       /* 정점 정보 가져오기 */  
41.       vec4 정보 = texture2D(texture, coord);  
42.         
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;  
52.         
53.       /* 평균을 향해 이동하도록 속도를 변경합니다.*/  
54.       info.g  = (평균 - info.r) * 2.0;  
55.         
56.       /* 속도를 약간 약화시켜 파도가 영원히 지속되지 않도록 합니다.*/  
57.       info.g *= 0.995;  
58.         
59.       /* 속도에 따라 꼭지점 이동 */  
60.       info.r  = info.g;  
61.         
62.       gl_FragColor = 정보;  
63.     } 
64.   ');   
65.   이.normalShader = new GL.Shader(vertexShader, '  
66.     균일한 샘플러2D 텍스처;  
67.     균일한 vec2 델타;  
68.     다양한 vec2 좌표;  
69.     void main() {  
70.       /* 정점 정보 가져오기 */  
71.       vec4 정보 = texture2D(texture, coord);  
72.         
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;  
77.         
78.       gl_FragColor = 정보;  
79.     }  
80.   ');   
81.   이.sphereShader = new GL.Shader(vertexShader, '  
82.     균일한 샘플러2D 텍스처;  
83.     uniform vec3 oldCenter;  
84.     uniform vec3 newCenter;  
85.     균일한 플로트 반경;  
86.     다양한 vec2 좌표;  
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.       float t = 길이(중심까지) / 반경;  
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.       반품(ymax - ymin) * 0.1;  
95.     } 
96.       
97.     void main() {  
98.       /* 정점 정보 가져오기 */  
99.       vec4 정보 = texture2D(texture, coord);  
100.         
101.       /* 이전 볼륨 추가 */  
102.       info.r  = volumeInSphere(oldCenter);  
103.         
104.       /* 새 볼륨 빼기 */  
105.       info.r -= volumeInSphere(newCenter);  
106.         
107.       gl_FragColor = 정보;  
108.     }  
109.   ');   
110. }   
111.   
112. Water.prototype.addDrop = 함수(x, y, 반경, 강도) {   
113.   var this_ = this;   
114.   이.textureB.drawTo(함수() {   
115.     this_.textureA.bind();   
116.     this_.dropShader.uniforms({   
117.       중앙: [x, y],   
118.       반경: 반경,   
119.       강도: 강도   
120.     }).draw(this_.plane);   
121.   });   
122.   이것.textureB.swapWith(이것.textureA);   
123. };   
124.   
125. Water.prototype.moveSphere = 함수(oldCenter, newCenter, radius) {   
126.   var this_ = this;   
127.   이.textureB.drawTo(함수() {   
128.     this_.textureA.bind();   
129.     this_.sphereShader.uniforms({   
130.       oldCenter: oldCenter,   
131.       newCenter: newCenter,   
132.       반경: 반경   
133.     }).draw(this_.plane);   
134.   });   
135.   이것.textureB.swapWith(이것.textureA);   
136. };   
137.   
138. Water.prototype.stepSimulation = 함수() {   
139.   var this_ = this;   
140.   이.textureB.drawTo(함수() {   
141.     this_.textureA.bind();   
142.     this_.updateShader.uniforms({   
143.       델타: [1 / this_.textureA.width, 1 / this_.textureA.height]   
144.     }).draw(this_.plane);   
145.   });   
146.   이것.textureB.swapWith(이것.textureA);   
147. };   
148.   
149. Water.prototype.updateNormals = 함수() {   
150.   var this_ = this;   
151.   이.textureB.drawTo(함수() {   
152.     this_.textureA.bind();   
153.     this_.normalShader.uniforms({   
154.       델타: [1 / this_.textureA.width, 1 / this_.textureA.height]   
155.     }).draw(this_.plane);   
156.   });   
157.   이것.textureB.swapWith(이것.textureA);   
158. };   

以上就是本文의 전체 부서는 内容, 希望对大家의 학교입니다.