HTML5를 기반으로 한 3D 물결 애니메이션 특수 효과입니다. 수영장의 돌이 물에 가라앉고 떠다니면서 물결의 레이어를 만들어내는 효과가 매우 현실적입니다. 동시에 마우스를 드래그하여 다양한 관점에서 수영장을 탐색할 수 있으며 3D 효과가 매우 좋습니다. 또한 "G" 키를 눌러 수영장의 돌을 위아래로 띄우고 "L" 키를 눌러 조명 효과를 추가할 수 있습니다. 디자인은 매우 완벽합니다. 동시에 이 3D 물결 애니메이션은 WebGL 렌더링 기술을 기반으로 하므로 WebGL에 대해 배울 수 있습니다.
온라인 데모 소스코드 다운로드
HTML 코드
<img id="tiles" src="tiles.jpg"> <img id="xneg" src="xneg.jpg"> <img id="xpos" src="xpos.jpg"> <img id="ypos" src="ypos.jpg"> <img id="zneg" src="zneg.jpg"> <img id="zpos" src="zpos.jpg">
JavaScript 코드
function Water() { var vertexShader = '\ varying vec2 coord;\ void main() {\ coord = gl_Vertex.xy * 0.5 + 0.5;\ gl_Position = vec4(gl_Vertex.xyz, 1.0);\ }\ '; this.plane = GL.Mesh.plane(); if (!GL.Texture.canUseFloatingPointTextures()) { throw new Error('This demo requires the OES_texture_float extension'); } var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST; this.textureA = new GL.Texture(256, 256, { type: gl.FLOAT, filter: filter }); this.textureB = new GL.Texture(256, 256, { type: gl.FLOAT, filter: filter }); this.dropShader = new GL.Shader(vertexShader, '\ const float PI = 3.141592653589793;\ uniform sampler2D texture;\ uniform vec2 center;\ uniform float radius;\ uniform float strength;\ varying vec2 coord;\ void main() {\ /* get vertex info */\ vec4 info = texture2D(texture, coord);\ \ /* add the drop to the height */\ float drop = max(0.0, 1.0 - length(center * 0.5 + 0.5 - coord) / radius);\ drop = 0.5 - cos(drop * PI) * 0.5;\ info.r += drop * strength;\ \ gl_FragColor = info;\ }\ '); this.updateShader = new GL.Shader(vertexShader, '\ uniform sampler2D texture;\ uniform vec2 delta;\ varying vec2 coord;\ void main() {\ /* get vertex info */\ vec4 info = texture2D(texture, coord);\ \ /* calculate average neighbor height */\ vec2 dx = vec2(delta.x, 0.0);\ vec2 dy = vec2(0.0, delta.y);\ float average = (\ texture2D(texture, coord - dx).r +\ texture2D(texture, coord - dy).r +\ texture2D(texture, coord + dx).r +\ texture2D(texture, coord + dy).r\ ) * 0.25;\ \ /* change the velocity to move toward the average */\ info.g += (average - info.r) * 2.0;\ \ /* attenuate the velocity a little so waves do not last forever */\ info.g *= 0.995;\ \ /* move the vertex along the velocity */\ info.r += info.g;\ \ gl_FragColor = info;\ }\ '); this.normalShader = new GL.Shader(vertexShader, '\ uniform sampler2D texture;\ uniform vec2 delta;\ varying vec2 coord;\ void main() {\ /* get vertex info */\ vec4 info = texture2D(texture, coord);\ \ /* update the normal */\ vec3 dx = vec3(delta.x, texture2D(texture, vec2(coord.x + delta.x, coord.y)).r - info.r, 0.0);\ vec3 dy = vec3(0.0, texture2D(texture, vec2(coord.x, coord.y + delta.y)).r - info.r, delta.y);\ info.ba = normalize(cross(dy, dx)).xz;\ \ gl_FragColor = info;\ }\ '); this.sphereShader = new GL.Shader(vertexShader, '\ uniform sampler2D texture;\ uniform vec3 oldCenter;\ uniform vec3 newCenter;\ uniform float radius;\ varying vec2 coord;\ \ float volumeInSphere(vec3 center) {\ vec3 toCenter = vec3(coord.x * 2.0 - 1.0, 0.0, coord.y * 2.0 - 1.0) - center;\ float t = length(toCenter) / radius;\ float dy = exp(-pow(t * 1.5, 6.0));\ float ymin = min(0.0, center.y - dy);\ float ymax = min(max(0.0, center.y + dy), ymin + 2.0 * dy);\ return (ymax - ymin) * 0.1;\ }\ \ void main() {\ /* get vertex info */\ vec4 info = texture2D(texture, coord);\ \ /* add the old volume */\ info.r += volumeInSphere(oldCenter);\ \ /* subtract the new volume */\ info.r -= volumeInSphere(newCenter);\ \ gl_FragColor = info;\ }\ '); } Water.prototype.addDrop = function(x, y, radius, strength) { var this_ = this; this.textureB.drawTo(function() { this_.textureA.bind(); this_.dropShader.uniforms({ center: [x, y], radius: radius, strength: strength }).draw(this_.plane); }); this.textureB.swapWith(this.textureA); }; Water.prototype.moveSphere = function(oldCenter, newCenter, radius) { var this_ = this; this.textureB.drawTo(function() { this_.textureA.bind(); this_.sphereShader.uniforms({ oldCenter: oldCenter, newCenter: newCenter, radius: radius }).draw(this_.plane); }); this.textureB.swapWith(this.textureA); }; Water.prototype.stepSimulation = function() { var this_ = this; this.textureB.drawTo(function() { this_.textureA.bind(); this_.updateShader.uniforms({ delta: [1 / this_.textureA.width, 1 / this_.textureA.height] }).draw(this_.plane); }); this.textureB.swapWith(this.textureA); }; Water.prototype.updateNormals = function() { var this_ = this; this.textureB.drawTo(function() { this_.textureA.bind(); this_.normalShader.uniforms({ delta: [1 / this_.textureA.width, 1 / this_.textureA.height] }).draw(this_.plane); }); this.textureB.swapWith(this.textureA); };
위 내용은 사실적인 HTML5 3D 물결 애니메이션을 사용하면 다양한 관점에서 코드의 그래픽과 텍스트 소개를 탐색할 수 있습니다. 더 많은 관련 콘텐츠를 보려면 PHP 중국어 웹사이트(www.php.cn)를 주목하세요!