水面倒影波动效果-html代码-BFW代码库

水面倒影波动效果

代码语言：html

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
<head>

<title>Image Distort</title>
<style>
  .show {
  position: absolute;
  width: 100vw;
  height: 100vh;
  top: 50%;
  left: 50%;
  transform: translate(-50%,-50%);
}
</style>

</head>
<body translate="no">
<canvas id="glslCanvas" data-textures='http://repo.bfw.wiki/bfwrepo/image/5d6539613d08b.png' data-fragment="
#ifdef GL_ES
precision lowp float;
#endif

#define TAU 6.28318530718

uniform vec2 u_resolution;
uniform vec2 u_mouse;
uniform float u_time;
uniform sampler2D u_tex0;

vec2 aspect = vec2(u_resolution.x / u_resolution.y, u_resolution.y / u_resolution.x);

float noise(vec2 pos, float a) {
    return (fract(sin(dot(pos.xy, vec2(12.9898,78.233))) * 43758.5453123) * a) - (a * 0.5) ;
}

float noiseMod(vec2 pos, float n, float a) {
    return clamp(n + noise(pos, a), 0.0, 1.0);
}

float normalSin(float t, float min, float max) {
    float s = (1.0 + sin(t)) * 0.5;
    return min + (s * (max - min));
}

mat2 rotate2d(float _angle){
    return mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle));
}

float sinPulse(float t) {
    return clamp(sin(t), 0.0, 1.0);
}

vec2 distort(vec2 pos, float angle) {
    pos = vec2((pos.x - 0.5) * aspect.x, (pos.y - 0.5));
    pos *= rotate2d(angle);
    pos += 0.5;
    return pos;
}

float box(vec2 pos, vec2 origin, vec2 size, bool square) {
    float aa = 0.........完整代码请登录后点击上方下载按钮下载查看