将摄像头视频实时渲染成多彩沙尘滤镜效果-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.........完整代码请登录后点击上方下载按钮下载查看