流动粒子（flow01001）

更多有趣示例 尽在知屋安砖社区

示例

HTML

<script id="vertexShader_particle" type="x-shader/x-vertex">
  attribute vec3 a_position;
  attribute vec3 a_particle;
  attribute vec2 a_reference;
  
  uniform float u_time;
  uniform mat4 u_m_model;
  uniform mat4 u_m_view;
  uniform mat4 u_m_MVP;
  uniform mat4 u_m_proj;
  
  uniform sampler2D b_position;
  uniform sampler2D b_velocity;
  
  varying vec3 v_colour;
  varying float v_fogDepth;
  varying float v_opacity;
  
  float random(vec2 st) {
    
    
    return fract(sin(dot(st,
                         vec2(12.9898,78.233)))*
        43758.5453123);
  }
  
  vec3 hsv2rgb(vec3 c) {
    
    
    vec4 K = vec4(1.0, 2.0 / 3.0, 1.0 / 3.0, 3.0);
    vec3 p = abs(fract(c.xxx + K.xyz) * 6.0 - K.www);
    return c.z * mix(K.xxx, clamp(p - K.xxx, 0.0, 1.0), c.y);
  }
  float hash21(vec2 p) {
    
    
    p = fract(p * vec2(233.34, 851.74));
    p += dot(p, p + 23.45);
    return fract(p.x * p.y);
  }
  
  mat3 fromQuat(vec4 q) {
    
    
    float x = q.x;
    float y = q.y;
    float z = q.z;
    float w = q.w;
    float x2 = q.x*2.;
    float y2 = q.y*2.;
    float z2 = q.z*2.;
    
    float xx = x * x2;
    float yx = y * x2;
    float yy = y * y2;
    float zx = z * x2;
    float zy = z * y2;
    float zz = z * z2;
    float wx = w * x2;
    float wy = w * y2;
    float wz = w * z2;
      
    return mat3(
      1. - yy -zz, yx -wz, zx + wy,
      yx + wz, 1. - xx - zz, zy - wx,
      zx - wy, zy + wx, 1. - xx - yy
    );
  }
  
  /**
   * Generates a look-at matrix with the given eye position, focal point, and up axis.
   * If you want a matrix that actually makes an object look at another object, you should use targetTo instead.
   *
   * @param {mat4} out mat4 frustum matrix will be written into
   * @param {vec3} eye Position of the viewer
   * @param {vec3} center Point the viewer is looking at
   * @param {vec3} up vec3 pointing up
   * @returns {mat4} out
   */
  mat4 lookAt(vec3 e, vec3 c, vec3 u) {
    
    
    
      // if (Math.abs(e.x - c.x) < EPSILON &&
      //     Math.abs(e.y - c.y) < EPSILON &&
      //     Math.abs(e.z - c.z) < EPSILON) {
    
    
      //   return new Mat4();
      // }
      
      vec3 off = normalize(e - c);
      
      vec3 or = vec3(
        u.y * off.z - u.z * off.y,
        u.z * off.x - u.x * off.z,
        u.x * off.y - u.y * off.x
      );
      or = normalize(or);
      
      vec3 tn = vec3(
        off.y * or.z - off.z * or.y,
        off.z * or.x - off.x * or.z,
        off.x * or.y - off.y * or.x
      );
      tn = normalize(tn);
      
      return mat4(
        or.x,
        tn.x,
        off.x,
        0,
        
        or.y,
        tn.y,
        off.y,
        0,
        
        or.z,
        tn.z,
        off.z,
        0,
        
        -(or.x * e.x + or.y * e.y + or.z * e.z),
        -(tn.x * e.x + tn.y * e.y + tn.z * e.z),
        -(off.x * e.x + off.y * e.y + off.z * e.z),
        1
      );
  }
  vec3 palette( in float t, in vec3 a, in vec3 b, in vec3 c, in vec3 d ) {
    
    
    return a + b*cos( 6.28318*(c*t+d) );
  }
  
  void main() {
    
    
    // vec4 pos = vec4(a_particle, 1.);
    // vec4 mvPos = u_m_view * u_m_model * pos;
    // gl_Position = u_m_proj * mvPos;
    // float isq = ( 1. / -mvPos.z );
    // gl_PointSize = (100.) * isq;
    
    vec3 position = texture2D(b_position, a_reference).xyz;
    vec3 velocity = texture2D(b_velocity, a_reference).xyz;
    
    // vec4 quat = vec4(normalize(velocity), 0.);
    // mat3 mat = fromQuat(quat);
    // vec3 particle = a_particle * vec3(1, 1.+length(velocity*velocity*.05), 1) * .1 * mat;
    
    float vl = min(length(velocity*velocity)*.01, 5.);
    vec3 p = a_particle * vec3(1.-vl*.2,1,1.+vl);
    float vl1 = smoothstep(0., 20., length(velocity));
    p *= (.3 + vl1);
    
    mat4 look = lookAt(
      (vec3(0,0,0)), 
      normalize(velocity), 
      (vec3(0,1,0))
    );
    vec3 particle = (vec4(p  * .2, 1) * look).xyz;
    // vec3 particle = (vec4(a_particle.yzx*vec3(1,1,1.+length(velocity*velocity)*.01), 1) * .2 * look).xyz;
    
    position += particle;
    
    vec4 pos = vec4(position, 1.);
    float l = length(pos);
    
    vec4 mvPos = u_m_view * u_m_model * pos;
    
    v_fogDepth = mvPos.z;
    
    float isq = ( 1. / -mvPos.z );
    
    float b = smoothstep(0., 80., l);
    float s = clamp(b*6., 0.1, 1.);
    v_opacity = b;
    
    gl_Position = u_m_proj * mvPos;
    float hash = hash21(a_reference);
    v_colour = palette(
      hash*.5+.3, 
      vec3(0.5,0.5,0.5),
      vec3(0.5,0.5,0.5),
      vec3(1.0,1.0,1.0),
      vec3(0.5,0.3,0.2)
    );
    // v_colour = hsv2rgb(vec3(.6 + hash * .3 + vl1 * .1, 1., hash * .5 + .3));
    // if(length(a_reference) == 0.) v_colour = vec3(1,0,0);
  }
</script>
<script id="vertexShader_buffer" 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_velocity" 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;
  uniform sampler2D s_noise;
  uniform int u_frame;
  uniform float u_nsize;
  uniform float u_seed;
  
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  
  #define PI 3.141592653589793
  #define HPI 1.5707963267948966
  #define TAU 6.283185307179586
  #define G 0.67408
  mat4 rotationMatrix(vec3 axis, float angle)
  {
    
    
      axis = normalize(axis);
      float s = sin(angle);
      float c = cos(angle);
      float oc = 1.0 - c;

      return mat4(oc * axis.x * axis.x + c,           oc * axis.x * axis.y - axis.z * s,  oc * axis.z * axis.x + axis.y * s,  0.0,
                  oc * axis.x * axis.y + axis.z * s,  oc * axis.y * axis.y + c,           oc * axis.y * axis.z - axis.x * s,  0.0,
                  oc * axis.z * axis.x - axis.y * s,  oc * axis.y * axis.z + axis.x * s,  oc * axis.z * axis.z + c,           0.0,
                  0.0,                                0.0,                                0.0,                                1.0);
  }
  
  vec3 hash33(vec3 p) {
    
    
    return fract(vec3(
      sin(p.x) * 43543.454354,
      sin(p.y) * 7531.154354,
      sin(p.z) * 10053.75315
    ));
  }

  void main() {
    
    
    vec2 uv = gl_FragCoord.xy / u_resolution.xy;
    vec3 position = texture2D(b_position, uv).xyz;
    vec3 velocity = texture2D(b_velocity, uv).xyz;
    vec3 acceleration = vec3(position);
    vec3 f = position;
    
    float tm = u_time;
    
    float l = length(position);
    position = ( vec4(position, 1.) * rotationMatrix(vec3(sin(tm * 25.), cos(tm * 10.), sin(tm) * cos(tm * 5.)), .5 + 10. / l) ).xyz;
    
    vec3 spherical = vec3(1./max(l, .1), atan(position.y, position.x), acos(position.z / l));
    
    float a = sin(length(spherical.yz) * 5. + tm) * 5.;
    
    acceleration.x = spherical.x * sin(spherical.z) * cos(spherical.y) * a;
    acceleration.y = spherical.x * sin(spherical.z) * sin(spherical.y) * a;
    acceleration.z = spherical.x * cos(spherical.z) * a;
    
    f = normalize(f - acceleration) * -1.;
    f *= smoothstep(10., 40., l) * 2.;
    
    vec3 vel = velocity * .99 + (acceleration + f) * .5;
    
    gl_FragColor = vec4(vel, 1.0);
  }
</script>
<script id="fragmentShader_position" 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;
  uniform float u_delta;
  uniform sampler2D s_noise;
  uniform bool u_nreset;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_velocity;
  uniform sampler2D b_position;
  uniform sampler2D b_origin;
  
  vec2 getScreenSpace() {
    
    
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  vec3 hash33(vec3 p) {
    
    
    return fract(vec3(
      sin(p.x) * 43543.454354,
      sin(p.y) * 7531.154354,
      sin(p.z) * 10053.75315
    ));
  }

  void main() {
    
    
    vec2 uv = getScreenSpace();
    vec2 s = gl_FragCoord.xy / u_resolution.xy;
    
    vec3 position = texture2D(b_position, s).xyz;
    vec3 velocity = texture2D(b_velocity, s).xyz;
    
    vec3 pos = position + velocity * u_delta * .5;
    
    if(length(pos) > 100.) {
    
    
      pos = pos / length(pos) * 2.;
    }

    gl_FragColor = vec4(pos, 1.0);
  }
</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;
  uniform sampler2D s_noise;
  uniform bool u_transition;
  uniform float u_transition_val;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_position;
  
  varying vec3 v_colour;
  varying float v_fogDepth;
  varying float v_opacity;
  
  vec2 getScreenSpace() {
    
    
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }

  void main() {
    
    
    float fade = smoothstep(1., 0., u_transition_val);
    gl_FragColor = vec4(mix(vec3(1), v_colour, fade), 1.);
//     vec2 uv = gl_PointCoord.xy - .5;
//     vec2 s = gl_FragCoord.xy / u_resolution.xy;
    
//     float l = length(uv);
//     float c = smoothstep(.5, 0., l);
//     float fog = smoothstep(-200., -1., v_fogDepth);
//     float opacity = c*fog;
//     if(c < .1) discard;
    
//     float fade = smoothstep(1., 0., u_transition_val);
    
//     gl_FragColor = vec4(
//       mix(
//         vec4(1.),
//         mix(
//           vec4(1), 
//           vec4(v_colour, opacity), 
//           c),
//         fade
//       )
//     );
  }
  
</script>
<script id="fragmentShader_blur" 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;
  uniform sampler2D s_noise;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_blur;
  
  varying vec3 v_colour;
  
  vec2 getScreenSpace() {
    
    
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }

  void main() {
    
    
    vec2 uv = getScreenSpace();
    
    vec2 s = gl_FragCoord.xy / u_resolution.xy;
    
    vec4 n1 = texture2D(b_blur, s);
    vec4 n = clamp(texture2D(b_prime, s), 0., 1.);
    
    vec4 c = n1*.5 + n*.5;

    gl_FragColor = clamp(c, 0., 1.);
  }
  
</script>
<script id="fragmentShader_bloom" 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;
  uniform sampler2D s_noise;
  uniform int u_bloomstep;
  
  uniform sampler2D b_prime;
  uniform sampler2D b_blur;
  uniform sampler2D b_bloom;
  
  varying vec3 v_colour;
  
  vec2 getScreenSpace() {
    
    
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  vec4 tex(sampler2D tex, vec2 co) {
    
    
    return clamp(texture2D(tex, co), 0., 1.);
  }

  void main() {
    
    
    vec2 uv = getScreenSpace();
    
    vec2 s = gl_FragCoord.xy / u_resolution.xy;
    vec2 p = 1./u_resolution.xy;
    
    
    // vec4 n1 = texture2D(b_blur, s);
    // vec4 n = texture2D(b_prime, s);
    
    vec4 n1;
    vec4 c;
    vec4 n = texture2D(b_prime, s);
    vec4 n2 = n;
    if(u_bloomstep == 0) {
    
    
      n1 = tex(b_blur, s);
      n1 += tex(b_blur, s + vec2(0, p.y));
      n1 += tex(b_blur, s + vec2(0, p.y*2.));
      n1 += tex(b_blur, s + vec2(0, p.y*3.));
      n1 += tex(b_blur, s + vec2(0, p.y*-1.));
      n1 += tex(b_blur, s + vec2(0, p.y*-2.));
      n1 += tex(b_blur, s + vec2(0, p.y*-3.));
      n1/=7.;
      c = n1;
    } else if(u_bloomstep == 1) {
    
    
      n1 = tex(b_bloom, s);
      n1 += tex(b_bloom, s + vec2(p.x, 0.));
      n1 += tex(b_bloom, s + vec2(p.x*2., 0));
      n1 += tex(b_bloom, s + vec2(p.x*3., <