多視点 3D リアルな HTML5 水波アニメーション _html5 チュートリアルスキル-H5 チュートリアル-php.cn

多視点 3D リアルな HTML5 水波アニメーション _html5 チュートリアルスキル

WBOY

リリース： 2016-05-16 15:45:38

オリジナル

2072 人が閲覧しました

これは HTML5 に基づいた 3D 水の波のアニメーション特殊効果で、「G」キーを押すとプール内の石が上下に浮かび上がり、「L」キーを押すと非常にリアルになります。照明効果を追加すると、デザインが非常に完璧になります。同時に、この 3D 水の波のアニメーションは WebGL レンダリング技術に基づいていることに注意してください。WebGL について学ぶことができます。

オンラインプレビュー ソースコードのダウンロード

HTML コード

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 コード

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);
};