wtc实现粒子粉末烟雾流动动画效果代码-html代码-BFW代码库

wtc实现粒子粉末烟雾流动动画效果代码

代码语言：html

所属分类：粒子

代码描述：wtc实现粒子粉末烟雾流动动画效果代码

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

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

<head>

  <meta charset="UTF-8">
  

  
  
  
<style>
body {
  background: #666;
  margin: 0;
  overflow: hidden;
}
canvas {
  height: 100vh;
  width: 100vw;
  touch-action: none;
}
.osc {
  left: 0px;
  position: fixed;
  top: 0px;
}

.button {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
}
.controls {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
}
.playpause {
  background: #AAB;
  padding: 10px;
}
.playpause label {
  display: block;
  box-sizing: border-box;

  width: 0;
  height: 20px;

  cursor: pointer;

  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;

  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause input[type='checkbox'] {
  visibility: hidden;
}
.playpause.checked label {
  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause label {
  border-style: solid;
  border-width: 10px 0 10px 20px;
}
/* } */
</style>




</head>

<body>
  <script id="vertexShader_particle" type="x-shader/x-vertex">
  precision highp float;
  attribute vec2 reference;
  attribute vec2 position;
  
  uniform vec2 u_resolution;
  uniform vec2 u_screen;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  
  varying vec3 v_colour;
  varying float v_fogDepth;
  
  void main() {
    vec2 position = texture2D(b_position, reference).xy;
    gl_PointSize = 2.;
    vec2 p = position/u_resolution;
    v_colour = vec3(1,1,1);
    vec4 pos = vec4(position / u_resolution * 2. - 1., 0., 1.);
    gl_Position = vec4(pos.xy, 0., 1.);
  }
</script>
<script id="fragmentShader_particle" type="x-shader/x-fragment">
  #extension GL_OES_standard_derivatives : enable
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  
  varying vec3 v_colour;

  void main() {
    vec2 uv = gl_PointCoord.xy - .5;
    
    gl_FragColor = vec4(0, 0, 0, 1);
    
    float l = length(uv);
    float c = smoothstep(.5, 0., l);
    float opacity = c;
    
    gl_FragColor = vec4(v_colour, opacity);
  }
</script>
<script id="fragmentShader_velocity" type="x-shader/x-fragment">
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform vec2 u_mouse;
  uniform float u_time;
  uniform sampler2D s_noise;
  uniform vec2 u_screen;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  
  
  //    Simplex 3D Noise 
  //    by Ian McEwan, Ashima Arts
  //
  vec4 permute(vec4 x){return mod(((x*34.0)+1.0)*x, 289.0);}
  vec4 taylorInvSqrt(vec4 r){return 1.79284291400159 - 0.85373472095314 * r;}
  
  float rand(float n){return fract(sin(n) * 43758.5453123);}
  float rand(vec2 n) { 
    return fract(sin(dot(n, vec2(12.9898, 4.1414))) * 43758.5453);
  }
  float snoise(vec3 v){ 
    const vec2  C = vec2(1.0/6.0, 1.0/3.0) ;
    const vec4  D = vec4(0.0, 0.5, 1.0, 2.0);

  // First corner
    vec3 i  = floor(v + dot(v, C.yyy) );
    vec3 x0 =   v - i + dot(i, C.xxx) ;

  // Other corners
    vec3 g = step(x0.yzx, x0.xyz);
    vec3 l = 1.0 - g;
    vec3 i1 = min( g.xyz, l.zxy );
    vec3 i2 = max( g.xyz, l.zxy );

    //  x0 = x0 - 0. + 0.0 * C 
    vec3 x1 = x0 - i1 + 1.0 * C.xxx;
    vec3 x2 = x0 - i2 + 2.0 * C.xxx;
    vec3 x3 = x0 - 1. + 3.0 * C.xxx;

  // Permutations
    i = mod(i, 289.0 ); 
    vec4 p = permute( permute( permute( 
               i.z + vec4(0.0, i1.z, i2.z, 1.0 ))
             + i.y + vec4(0.0, i1.y, i2.y, 1.0 )) 
 .........完整代码请登录后点击上方下载按钮下载查看