これは HTML5 に基づいた 3D 水の波のアニメーション特殊効果で、「G」キーを押すとプール内の石が上下に浮かび上がり、「L」キーを押すと非常にリアルになります。照明効果を追加すると、デザインが非常に完璧になります。同時に、この 3D 水の波のアニメーションは WebGL レンダリング技術に基づいていることに注意してください。WebGL について学ぶことができます。
XML/HTML コードコンテンツをクリップボードにコピー
-
<img id="タイル" 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 コードコンテンツをクリップボードにコピーします
-
関数 Water() {
-
var vertexShader = '
-
さまざまな vec2 座標;
-
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('このデモには OES_texture_float 拡張機能が必要です');
-
}
-
var filter = GL.Texture.canUseFloatingPointLinearFiltering() ? gl.LINEAR : gl.NEAREST;
-
this.textureA = new GL.Texture(256, 256, { type: gl.FLOAT,フィルター: フィルター });
-
this.textureB = 新しい GL.Texture(256, 256, { type: gl.FLOAT,フィルター: フィルター });
-
this.dropShader = new GL.Shader(vertexShader, '
-
const float PI = 3.141592653589793;
-
均一なサンプラー 2D テクスチャ。
-
ユニフォーム vec2 センター;
-
均一なフロート半径。
-
均一なフロート強度。
-
さまざまな vec2 座標;
-
void main() {
-
/* 頂点情報を取得 */
-
vec4 info = texture2D(テクスチャ, 座標);
-
-
/* ドロップを 高さ に追加します */
-
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 = ドロップ * 強度;
-
-
gl_FragColor = 情報;
-
}
-
');
-
this.updateShader = new GL.Shader(vertexShader, '
-
均一なサンプラー 2D テクスチャ。
-
uniform vec2 delta;
-
さまざまな vec2 座標;
-
void main() {
-
/* 頂点情報を取得 */
-
vec4 info = texture2D(テクスチャ, 座標);
-
-
/* 平均近隣身長を計算する */
-
vec2 dx = vec2(delta.x, 0.0);
-
vec2 dy = vec2(0.0, delta.y);
-
浮動小数点平均 = (
-
texture2D(texture, coord - dx).r
-
texture2D(texture, coord - dy).r
-
texture2D(texture, coord dx).r
-
texture2D(texture, coord dy).r
-
) * 0.25;
-
-
/* 速度を変更して 平均に向けて移動します */
-
info.g = (平均 - info.r) * 2.0;
-
-
/* 波が永久に続かないように速度を少し減衰させます */
-
info.g *= 0.995;
-
-
/* 速度に沿って頂点を移動します */
-
info.r = info.g;
-
-
gl_FragColor = 情報;
-
}
-
');
-
this.normalShader = new GL.Shader(vertexShader, '
-
均一なサンプラー 2D テクスチャ。
-
uniform vec2 delta;
-
さまざまな vec2 座標;
-
void main() {
-
/* 頂点情報を取得 */
-
vec4 info = texture2D(テクスチャ, 座標);
-
-
/* 通常の更新 */
-
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 = 情報;
-
}
-
');
-
this.sphereShader = 新しい GL.Shader(vertexShader, '
-
均一なサンプラー 2D テクスチャ。
-
uniform vec3 oldCenter;
-
uniform vec3 newCenter;
-
均一なフロート半径。
-
さまざまな vec2 座標;
-
-
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() {
-
/* 頂点情報を取得 */
-
vec4 info = texture2D(テクスチャ, 座標);
-
-
/* 古いボリュームを追加 */
-
info.r = volumeInSphere(oldCenter);
-
-
/* 新しい ボリュームを減算 */
-
info.r -= volumeInSphere(newCenter);
-
-
gl_FragColor = 情報;
-
}
-
');
-
}
-
-
Water.prototype.addDrop = 関数(x, y, 半径, 強度) {
-
var this_ = this;
-
this.textureB.drawTo(function() {
-
this_.textureA.bind();
-
this_.dropShader.uniforms({
-
センター: [x, y],
-
半径: 半径、
-
強度: 強度
-
}).draw(this_.plane);
-
});
-
this.textureB.swapWith(this.textureA);
-
};
-
-
Water.prototype.moveSphere = 関数(oldCenter, newCenter, radius) {
-
var this_ = this;
-
this.textureB.drawTo(function() {
-
this_.textureA.bind();
-
this_.sphereShader.uniforms({
-
oldCenter: oldCenter,
-
newCenter: newCenter,
-
半径: 半径
-
}).draw(this_.plane);
-
});
-
this.textureB.swapWith(this.textureA);
-
};
-
-
Water.prototype.stepSimulation = 関数() {
-
var this_ = this;
-
this.textureB.drawTo(function() {
-
this_.textureA.bind();
-
this_.updateShader.uniforms({
-
デルタ: [1 / this_.textureA.width, 1 / this_.textureA.height]
-
}).draw(this_.plane);
-
});
-
this.textureB.swapWith(this.textureA);
-
};
-
-
Water.prototype.updateNormals = 関数() {
-
var this_ = this;
-
this.textureB.drawTo(function() {
-
this_.textureA.bind();
-
this_.normalShader.uniforms({
-
デルタ: [1 / this_.textureA.width, 1 / this_.textureA.height]
-
}).draw(this_.plane);
-
});
-
this.textureB.swapWith(this.textureA);
-
};