js打造的一款舞台波浪背景效果代码-html代码-BFW代码库

代码语言：html

所属分类：背景

代码描述：js打造的一款舞台波浪背景效果代码

下面为部分代码预览，完整代码请点击下载或在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 sampler2D u_bricks;
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  
  vec3 randcol(float i) {
    i = fract(i/4.);
    if(i < .25) {
      return vec3(0,0,.5);
    } else if(i < .5) {
      return vec3(0,.5,.5);
    } else if(i < .75) {
      return vec3(0,0,.2);
    } else if(i < 1.) {
      return vec3(0,.3,.6);
    }
  }
  
  vec2 hash12(float i) {
    return texture2D(u_noise, vec2(i/255.)).xy;
  }
  
  #define PI 3.14159265359

  void main() {
    vec2 uv = getScreenSpace();
    
    uv.y += sin(u_time*.2);
    
    uv *= 10.;
    
    vec2 guv = vec2(uv.x, fract(uv.y));
    float id = floor(uv.y);
    
    vec3 col = vec3(0);
    
    for(float i = -2.; i < 1.; i++) {
      vec2 suv = guv + vec2(0., i);
      vec2 suv1 = guv + vec2(0., i-1.);
      
      float sid = id - i;
      float sid1 = id - i - 1.;
      
      vec2 hash = hash12(sid);
      vec2 hash1 = hash12(sid1);
      
      vec2 p = suv - vec2(u_time*hash1.x, 0);
      
      suv.x += u_time*10.*(hash.x*hash.x);
      suv1.x += u_time*10.*(hash1.x*hash1.x);
      
      float wave = sin(suv.x + sid) + cos(suv.x * hash.y) * (hash.y*10.);
      float wave1 = sin(suv1.x + sid1) + cos(suv1.x * hash1.y) * (hash1.y*10.);
      
      p = vec2(length(p*.02), ((p.y) + wave * .1))*.25;
      
      float sfield = (suv.y + wave * .1);
      float sfield1 = (suv.y + wave1 * .1);
      
      float mask = smoothstep(.05, .0, sfield);
      
      vec4 tex = texture2D(u_bricks, p);
      
      col = mix(col, (randcol(sid)+.2) * tex.gbr * (suv.y * .5 + .3 + smoothstep(-1.5, -.3, sfield1)), mask);
    }

    gl_FragColor = vec4(col,1.0);
  }
  
</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 The fragment shader source
               * @param {number} [width] The width of the webGL context. This will default to the canvas dimensions
               * @param {number} [height] The height of the webGL context. This will default to the canvas dimensions
               * @param {number} [pxratio=1] The pixel aspect ratio of the canvas
               * @param {boolean} [styleElement] A boolean indicating whether to apply a style property to the canvas (resizing the canvas by the inverse of the pixel ratio)
               * @param {boolean} [webgl2] A boolean indicating whether to try to create a webgl2 context instead of a regulart context
              */
  constructor(el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, styleElement, webgl2) {
    this.run = this.run.bind(this);

    this._onRun = () => {};

    // Destructure if an object is aprovided instead a series of parameters
    if (el instanceof Object && el.el) {
      ({ el, vertexShaderSource, fragmentShaderSource, width, height, pxratio, webgl2, styleElement } = el);
    }

    // If the HTML element isn't a canvas, return null
    if (!el instanceof HTMLElement || el.nodeName.toLowerCase() !== 'canvas') {
      console.log('Provided element should be a canvas element');
      return null;
    }

    this._el = el;
    // The context should be ei.........完整代码请登录后点击上方下载按钮下载查看