将摄像头视频实时渲染成多彩沙尘滤镜效果-html代码-BFW代码库

代码语言：html

代码描述：将摄像头视频实时渲染成多彩沙尘滤镜效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">

<style>
body {
  margin:0;
}

canvas {
  position: fixed;
}
</style>

</head>
<body translate="no">
<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;
  
  uniform int u_frame;
  
  uniform sampler2D u_buffer;
  uniform bool u_bufferpass;
  
  uniform vec2 u_video_size;
  uniform float u_video_ratio;
  uniform sampler2D u_video;
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  float rand(vec2 co) {
    return fract(sin(dot(co.xy ,vec2(12.9898,78.233))) * 43758.5453);
  }
  
  vec2 rotate(float a, vec2 v) {
      float c = cos(a);
      float s = sin(a);
      return mat2(c, -s, s, c) * v;
  }
  
  vec3 rgb2hsv(vec3 rgb) {
    float Cmax = max(rgb.r, max(rgb.g, rgb.b));
    float Cmin = min(rgb.r, min(rgb.g, rgb.b));
    float delta = Cmax - Cmin;

    vec3 hsv = vec3(0., 0., Cmax);

    if (Cmax > Cmin) {
      hsv.y = delta / Cmax;

      if (rgb.r == Cmax)
        hsv.x = (rgb.g - rgb.b) / delta;
      else {
        if (rgb.g == Cmax)
          hsv.x = 2. + (rgb.b - rgb.r) / delta;
        else
          hsv.x = 4. + (rgb.r - rgb.g) / delta;
      }
      hsv.x = fract(hsv.x / 6.);
    }
    return hsv;
  }
  
  vec4 render_effect() {
    if (u_frame < 1) {
      return vec4(0.);
    }
    
    vec2 uv = getScreenSpace();
    vec2 s = gl_FragCoord.xy/u_resolution.xy;
    float t = u_resolution.x / u_resolution.y;
    
    float video_ratio = u_video_size.x/u_video_size.y;
    float diff = t / video_ratio;
    vec2 sample = (uv) * vec2(1., video_ratio)+.5;
    if(t < video_ratio) {
      sample = (s) * vec2(diff, 1.);
      sample.x += (video_ratio - t) * .5;
    } else {
      sample = (s) / vec2(1., diff);
    }
    
    vec3 old_col = texture2D(u_video, sample).rgb;
    
    
    
    
    
    
    
    
      
      #define PI 3.141592653589793
      #define TAU 6.283185307179586
      #define pow2(x) (x * x)
      #define OCTAVES 8
      
      const vec3 blue = vec3(0./255., 230./255., 300./255.);
      const vec3 green = vec3(0./255., 200./255., 0./255.);
      const vec3 pink = vec3(243./255., 98./255., 121./255.);
      const vec3 yellow = vec3(249./255., 234./255., 53./255.);
      
      const float aMult = 2.293;
      const float bMult = 4.15;
      const float cMult = 2.2;
      
      vec2 _uv = uv;
      _uv *= 8.;
      _uv.x += u_time;
      _uv.y += sin(u_time)*5.;
      
      float a=1.0;
      float b=1.0;
      float c=1.0;
      float d=0.0;
      for(int s=0;s<OCTAVES;s++) {
        vec2 r;
        r=vec2(cos(_uv.y*a-d+u_time/b),sin(_uv.x*a-d+u_time/b))/c;
            r+=vec2(-r.y,r.x)*0.3;
        _uv.xy+=r;
        _uv = rotate(sin(length(r))*.05, _uv);

        a *= aMult;
        b *= bMult;
        c *= cMult;
        d += 0.05+0.1*u_time*b;
      }


      vec3 oldcamcol = old_col;
      old_col = mix(
        old_col,
        blue*blue*.5,
        smoothstep(0.5, 1., sin(_uv.x+_uv.y*2.) * (1.-old_col))
      );
      old_col *= mix(
        pink*pink*2.,
        blue*blue*.9,
        smoothstep(-.8, .8, sin(_uv.x))
      );
      float mixer = sin((_uv.y+u_time))*0.5+0.5;
      old_col = mix(old_col,
                mix(
                  green,
                  yellow,
                  smoothstep(1.1, .9, mixer)
                ),
                mixer*oldcamcol
               );
    
    
    
    
    
    
    
    
    
    
    // old_col = blur(u_video, sample);
    vec2 dsp = rgb2hsv(old_col).xy;
    float e = 1e-4;
    vec2 sc = s * 2.;
    dsp = normalize(_uv);
    
    vec2 buffer_sample = s + (rotate(atan(old_col.x, old_col.y), dsp)) / u_resolution.y;
    vec3 new_col = texture2D(u_buffer, buffer_sample).rgb;
    
    vec3 col = mix(old_col, new_col, float(rand(uv + u_time) < .98));
    // vec3 col = (old_col + new_col * .95)*.5;
    
    return vec4(col, 1.);
  }

  void main() {
    if(u_bufferpass) {
      gl_FragColor = render_effect();
    } else {
      vec4 tex = texture2D(u_buffer, gl_FragCoord.xy/u_resolution.xy);
      gl_FragColor = vec4(tex.rgb, 1.);
    }
  }
  
</script>

<script >
/**
 * A basic Web GL class. This provides a very basic setup for GLSL shader code.
 * Currently it doesn't support anything except for clip-space 3d, but this was
 * done so that we could start writing fragments right out of the gate. My
 * Intention is to update it with particle and polygonal 3d support later on.
 *
 * @class WTCGL
 * @author Liam Egan <liam@wethecollective.com>
 * @version 0.0.8
 * @created Jan 16, 2019
 */
class WTCGL {

  /**
              * The WTCGL Class constructor. If construction of the webGL context fails 
               * for any reason this will return null.
               * 
               * @TODO make the dimension properties properly optional
               * @TODO provide the ability to allow for programmable buffers
              *
              * @constructor
              * @param {HTMLElement} el The canvas element to use as the root
              * @param {string} vertexShaderSource The vertex shader source
              * @param {string} fragmentShaderSource .........完整代码请登录后点击上方下载按钮下载查看