H5蓝色液态雾状webgl特效代码下载


H5蓝色液态雾状webgl特效代码下载
H5蓝色液态雾状webgl特效代码下载以及蓝色液态雾状、webgl等js/jquery网页特效代码下载。

1. 引入CSS

<link rel="stylesheet" href="css/style.css">

2. 引入JS

<script src='js/apxlmx.js'></script>
<script src="js/script.js"></script>

3. HTML代码

<canvas id="webgl" width="500" height="1758"></canvas>
<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec4 a_position;
  uniform mat4 u_modelViewMatrix;
  uniform mat4 u_projectionMatrix;
  void main() {
    gl_Position = a_position;
  }
</script>
<script id="fragmentShader" type="x-shader/x-fragment">
  precision highp float;
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D u_noise;
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    return uv;
  }
  // Hash variation by Shane,
  // from https://www.shadertoy.com/view/4dSfzD
  vec2 hash2(vec2 p, float timeOffset) {
     float n = sin(dot(p, vec2(41, 289)));
     // Animated.
     p = fract(vec2(262144, 32768)*n);
     return sin( p*6.2831853 + timeOffset )*.5 + .5;
  }
  vec2 cellpoint(vec2 uv) {
      return uv + .5 + (hash2(uv, u_time) - .5)*.5;
  }
  vec2 fastVor(vec2 p) {
     vec2 h, pH = floor(p);
     vec2 mh = cellpoint(pH) - p;
     float md = 8.0;
     for (int j=-1; j<=1; ++j )
     for (int i=-1; i<=1; ++i ) {
        h = cellpoint(pH + vec2(i,j)) - p;
        float d = dot(h, h);
        if (d < md) {
           md = d;
           mh = h;
        }
     }
     const float eps = .0001;
     float ed = 8.0;
     for (int j=-1; j<=1; ++j )
     for (int i=-1; i<=1; ++i ) {
        h = cellpoint(pH + vec2(i,j)) - p;
        if (dot(h-mh, h-mh) > eps)
           ed = min( ed, dot( 0.5*(h+mh), normalize(h-mh) ) );
     }
     return vec2(sqrt(md),ed);
  }
  float noise(vec2 p) {
    vec2 v = fastVor(p);
    return smoothstep(0.1,.9,v.x+v.y);
    float n = length(fastVor(p));
    return n*n*n*4.;
  }
  const int numOctaves = 4;
  float fbm2( in vec2 x, in float H, inout float _a, inout float _b ) {
      float G = exp2(-H);
      float f = 1.0;
      float a = 1.0;
      float t = 0.0;
      float _t = u_time * .5;
      // for( int i=0;i<numOctaves;i++ ) {
      for( int i=numOctaves;i>=0;i-- ) {
          float m = a*noise(f*x);
          t += m;
          f *= 2.;
          a *= G;
          x.y += .3 * u_time;
          x += vec2(-m*.5, m*.8);
          if(i==2) {
            _a = m;
          }
          if(i==1) {
            _b = t;
          }
      }
      return t;
  }
  void main() {
    vec2 uv = getScreenSpace();
    float t = floor(mod(u_time*5., 2.));
    float n = 0.;
    float a, b;
    n = fbm2(uv * (sin(u_time) * 2. + 2.5) + vec2(u_time, sin(u_time)), 1., a, b)*.5;
    vec3 colour = vec3(sin(uv.x)*.5+.5, sin(uv.y)*.5+.5, 1.);
    gl_FragColor = vec4(vec3(n,n+a,n+b),1.0);
  }
</script>

相关推荐

发表评论

相关文章