多彩飓风旋涡状彩带灯带变幻canvas特效动

代码语言:html

所属分类:其他

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

<!D<<<YPEOCTYPE html>
<html lang="en" >
<head>
 
<meta charset="UTF-8">
 
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0,user-scalable=no,minimal-ui">
 
<title>多彩飓风旋涡状彩带灯带变幻canvas特效动画</title>
     
<style >
     body
{
 
margin:0;
}

canvas
{
 
position: fixed;
}
     
</style>

</head>
<body>

<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_buffer
;
  uniform bool u_bufferpass
;
 
 
#define PI 3.14159265359
 
#define TAU 6.28318530718
 
 
// These awesome complex Math functions curtesy of
 
// https://github.com/mkovacs/reim/blob/master/reim.glsl
  vec2 cCis
(float r);
  vec2 cLog
(vec2 c); // principal value
  vec2 cInv
(vec2 c);
 
float cArg(vec2 c);
 
float cAbs(vec2 c);
 
  vec2 cMul
(vec2 a, vec2 b);
  vec2 cDiv
(vec2 a, vec2 b);

  vec2 cCis
(float r)
 
{
   
return vec2( cos(r), sin(r) );
 
}
  vec2 cExp
(vec2 c)
 
{
   
return exp(c.x) * cCis(c.y);
 
}
  vec2 cConj
(vec2 c)
 
{
   
return vec2(c.x, -c.y);
 
}
  vec2 cInv
(vec2 c)
 
{
   
return cConj(c) / dot(c, c);
 
}
  vec2 cLog
(vec2 c)
 
{
   
return vec2( log( cAbs(c) ), cArg(c) );
 
}
 
float cArg(vec2 c)
 
{
   
return atan(c.y, c.x);
 
}
 
float cAbs(vec2 c)
 
{
   
return length(c);
 
}
  vec2 cMul
(vec2 a, vec2 b)
 
{
   
return vec2(a.x*b.x - a.y*b.y, a.x*b.y + a.y*b.x);
 
}
  vec2 cDiv
(vec2 a, vec2 b)
 
{
   
return cMul(a, cInv(b));
 
}
 
 
float r1 = 0.1;
 
float r2 = 0.3;
 
  vec2
Droste(vec2 uv) {
   
   
// r1 = .1 + u_mouse.x;
    r2
= .15 + max(u_mouse.y + .5, -.0);
   
   
// float c = cos(u_time);
   
// float s = sin(u_time);
   
// uv *= mat2(c, -s, s, c);
   
   
// 5. Take the tiled strips back to ordinary space.
    uv
= cLog(uv);
   
// 4. Scale and rotate the strips
   
float scale = log(r2/r1);
   
float angle = atan(scale/PI);
    uv
= cDiv(uv, cExp(vec2(0,angle))*cos(angle));
   
// 3. this simulates zooming in the tile
   
// uv -= u_time;
   
// 2. Tile the strips
    uv
.x = mod(uv.x,log(r2/r1));
   
// 1. Take the annulus to a strip
    uv
= cExp(uv)*r1;
   
   
return uv;
 
}
 
  vec3 hash3
( vec2 p ) {
      vec3 q
= vec3( dot(p,vec2(127.1,311.7)),
             dot
(p,vec2(269.5,183.3)),
             dot
(p,vec2(419.2,371.9)) );
   
return fract(sin(q)*43758.5453);
 
}
 
  vec2 getScreenSpace
() {
    vec2 uv
= (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
   
   
return uv;
 
}
 
 
const float colours = 3.;
 
const vec4 colour1 = vec4(.1,.2,.8, 1.);
 
const vec4 colour2 = vec4(.8,.3,.2, 1.);
 
const vec4 colour3 = vec4(.1,.7,.2, 1.);
 
  vec4 getColour
(float r) {
   
float or = r;
    r
= floor(r*(colours+1.));
   
if(r == 0.) {
     
return colour1;
   
} else if(r == 1.) {
     
return colour2+vec4(0, (sin(u_time*3. + or*10.) * or + or), 0., 0.);
   
} else if(r == 2.) {
     
return colour3;
   
}
 
}
 
  vec4 render
(vec2 uv) {
   
// uv *= 10.;
   
   
// uv.x += u_time;
   
   
float row = floor(uv.y);
   
   
if(mod(row, 2.) == 0.) return vec4(0,0,0,1);
   
    vec4 rowval
= texture2D(u_noise, vec2(.5, row/110.));
   
float nf = rowval.r;
    nf
*= nf;
    nf
*= 5.;
   
    uv
.x += u_time * nf * 3.;
   
   
float noiseloopval = sin(uv.x*PI*.1)*floor(uv.y);
    noiseloopval
= mod(uv.x*row, row*2.);
   
    vec2 uvid
= floor(vec2( floor(noiseloopval), uv.y ));
    vec3 uvseed
= hash3(uvid/PI);
   
   
float shapefield = sin(fract(uv.y)*3.) * sin(fract(uv.x)*10.);
    vec4 colour
= getColour(rowval.g*(1.-rowval.g*(sin(u_time*3.)*.5+.5))) * smoothstep(.2,.6,shapefield);
    colour
+= smoothstep(.9,1.,shapefield);
    colour
+= smoothstep(.99,1.,shapefield)*5.;
   
   
// colour *= uvseed.x;
   
   
return mix(vec4(0,0,0,1), colour, colour.a);
 
}
 
  vec4 render_effect
(vec2 uv, vec4 prev) {
    vec2 polar
= vec2(atan(uv.x, uv.y)/PI, length(uv));

    vec4 c
= render(polar);
    c
+= render(polar * vec2(2., .6) + vec2(0.,1./.6));
    c
+= render(polar * vec2(1., 1.2) + vec2(0.,1./1.2));

    uv
= Droste(getScreenSpace())*20.;
    polar
= vec2(atan(uv.x, uv.y)/PI, length(uv));

    c
+= render(polar * vec2(1., 2.2) + vec2(0.,2./2.2));
   
   
return c;
 
}

 
void main() {
    vec4 prev
= texture2D(u_buffer, gl_FragCoord.xy/u_resolution);
   
if(u_bufferpass) {
      vec2 uv
= Droste(getScreenSpace())*10.;
     
// uv = mix(uv, getScreenSpace()*10., sin(u_time*2.)*.5+.5);
     
// uv = getScreenSpace()*10.;

      gl_FragColor
= prev * .94 + render_effect(uv, prev) * .05;
   
} else {
      vec2 uv
= Droste(getScreenSpace())*50.;
     
      gl_FragColor
= prev;
   
}
 
}
 
</script>
<!-- partial -->
 
<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 either webgl2, webgl or experimental-webgl
    if (webgl2 === true) {
      this.isWebgl2 = true;
      this._ctx = this._el.getContext("webgl2", this.webgl_params) || this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
    } else {
      this.isWebgl2 = false;
      this._ctx = this._el.getContext("webgl", this.webgl_params) || this._el.getContext("experimental-webgl", this.webgl_params);
    }

    // Set up the extensions
    this._ctx.getExtension('OES_standard_derivatives');
    this._ctx.getExtension('EXT_shader_texture_lod');
    this._ctx.getExtension('OES_texture_float');
    this._ctx.getExtension('WEBGL_color_buffer_float');
    this._ctx.getExtension('OES_texture_float_linear');
    this._ctx.getExtension('EXT_color_buffer_float');

    // We can't make the context so return an error
    if (!this._ctx) {
      console.log('Browser doesn\'t support WebGL ');
      return null;
    }

    // Create the shaders
    this._vertexShader = WTCGL.createShaderOfType(this._ctx, this._ctx.VERTEX_SHADER, vertexShaderSource);
    this._fragmentShader = WTCGL.createShaderOfType(this._ctx, this._ctx.FRAGMENT_SHADER, fragmentShaderSource);

    // Create the program and link the shaders
    this._program = this._ctx.createProgram();
    this._ctx.attachShader(this._program, this._vertexShader);
    this._ctx.attachShader(this._program, this._fragmentShader);
    this._ctx.linkProgram(this._program);

    // If we can't set up the params, this means the shaders have failed for some reason
    if (!this._ctx.getProgramParameter(this._program, this._ctx.LINK_STATUS)) {
      console.log('Unable to initialize the shader program: ' + this._ctx.getProgramInfoLog(this._program));
      return null;
    }

    // Initialise the vertex buffers
    this.initBuffers([
    -1.0, 1.0, -1.,
    1.0, 1.0, -1.,
    -1.0, -1.0, -1.,
    1.0, -1.0, -1.]);


    // Initialise the frame buffers
    this.frameBuffers = [];

    // The program information object. This is essentially a state machine for the webGL instance
    this._programInfo = {
      attribs: {
        vertexPosition: this._ctx.getAttribLocation(this._program, 'a_position') },

      uniforms: {
        projectionMatrix: this._ctx.getUniformLocation(this._program, 'u_projectionMatrix'),
        modelViewMatrix: this._ctx.getUniformLocation(this._program, 'u_modelViewMatrix'),
        resolution: this._ctx.getUniformLocation(this._program, 'u_resolution'),
        time: this._ctx.getUniformLocation(this._program, 'u_time') } };



    // Tell WebGL to use our program when drawing
    this._ctx.useProgram(this._program);

    this.pxratio = pxratio;

    this.styleElement = styleElement !== true;

    this.resize(width, height);
  }


  /**
     * Public methods
     */

  addFrameBuffer(w, h, tiling = 0, buffertype = 0) {
    // create to render to
    const gl = this._ctx;
    const targetTextureWidth = w * this.pxratio;
    const targetTextureHeight = h * this.pxratio;
    const targetTexture = gl.createTexture();
    gl.bindTexture(gl.TEXTURE_2D, targetTexture);
    {
      // define size and format of level 0
      const level = 0;
      let internalFormat = gl.RGBA;
      const border = 0;
      let forma.........完整代码请登录后点击上方下载按钮下载查看

网友评论0