webgl实现canvas无限循环动画效果代码-html代码-BFW代码库

代码语言：html

所属分类：动画

代码描述：webgl实现canvas无限循环动画效果代码

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

<html lang="en"><head>

  <meta charset="UTF-8">

  
  
  
<style>
body {
  background: #666;
  margin: 0;
  overflow: hidden;
}
canvas {
  height: 100vh;
  width: 100vw;
  object-fit: contain;
  touch-action: none;
}
.osc {
  left: 0px;
  position: fixed;
  top: 0px;
}

.button {
  position: fixed;
  z-index: 10;
  right: 0;
  bottom: 0;
}
.controls {
  position: fixed;
  z-index: 10;
  left: 0;
  bottom: 0;
}
.playpause {
  background: #AAB;
  padding: 10px;
}
.playpause label {
  display: block;
  box-sizing: border-box;

  width: 0;
  height: 20px;

  cursor: pointer;

  border-color: transparent transparent transparent #202020;
  transition: 100ms all ease;
  will-change: border-width;

  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause input[type='checkbox'] {
  visibility: hidden;
}
.playpause.checked label {
  border-style: double;
  border-width: 0px 0 0px 20px;
}
.playpause label {
  border-style: solid;
  border-width: 10px 0 10px 20px;
}
/* } */


#container {
  display: grid;
  justify-content: center;
  align-content: center;
}
</style>



</head>

<body translate="no">
  <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_buffer" type="x-shader/x-vertex">
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform float u_time;
  uniform vec2 u_mouse;
  uniform sampler2D u_noise;
  
  uniform sampler2D b_loop;
  
  vec2 getScreenSpace() {
    vec2 uv = (gl_FragCoord.xy - 0.5 * u_resolution.xy) / min(u_resolution.y, u_resolution.x);
    
    return uv;
  }
  float hash21(vec2 p) {
    p = fract(p * vec2(233.34, 851.74));
    p += dot(p, p + 23.45);
    p = fract(p);
    return texture2D(u_noise, p).x;
  }
  void main() {
    vec2 uv = abs(getScreenSpace());
    float t = u_time * .5;
    float s = sin(t);
    float c = cos(t);
    mat2 m = mat2(c, s, -s, c-s*.1);
    vec2 u = abs(uv-.5);
    
    vec2 samp = gl_FragCoord.xy / u_resolution;
    float n = hash21(samp+u_time);
    
    vec4 a = texture2D(b_loop, (fract(samp)*1.05*(m)-.5)) * (.99 - n*.05);
    float cl = smoothstep(0.0, 0.005, max(uv.x, uv.y) - .485);
    float al = clamp(cl + (smoothstep(.03, .0, min(u.y, u.x)) * (1.+n*.5)), 0., 1.);
    vec4 b = vec4(vec3(cl), al);
    
    gl_FragColor = mix(a,b,b.w);
  }
</script>
<script id="fragmentShader_under" type="x-shader/x-vertex">
  precision highp float;
  
  uniform vec2 u_resolution;
  uniform float u_time;
  uniform vec2 u_mouse;
  uniform sampler2D u_noise;
  
  uniform sampler2D b_loop;
  
  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 = abs(getScreenSpace());
    
    gl_FragColor = vec4(
      mix(
        texture2D(b_loop, gl_FragCoord.xy / u_resolution.xy).rgb,
        vec3(abs(sin(u_time*5.))),
        0. //smoothstep(0.0, 0.002, max(uv.x,uv.y) - .47)
    ), 1.);
  }
</script>

  
      <script  type="module">
function _defineProperty(obj, key, value) {if (key in obj) {Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true });} else {obj[key] = value;}return obj;}function _classPrivateFieldSet(receiver, privateMap, value) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to set private field on non-instance");}if (descriptor.set) {descriptor.set.call(receiver, value);} else {if (!descriptor.writable) {throw new TypeError("attempted to set read only private field");}descriptor.value = value;}return value;}function _classPrivateFieldGet(receiver, privateMap) {var descriptor = privateMap.get(receiver);if (!descriptor) {throw new TypeError("attempted to get private field on non-instance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}function _classStaticPrivateFieldSpecGet(receiver, classConstructor, descriptor) {if (receiver !== classConstructor) {throw new TypeError("Private static access of wrong provenance");}if (descriptor.get) {return descriptor.get.call(receiver);}return descriptor.value;}import { Vec2, Vec3, Mat2, Mat3, Mat4, Quat } from 'https://cdn.skypack.dev/wtc-math';

import gifJs from 'https://cdn.skypack.dev/gif.js';

console.clear();

const setup = function () {
  const px = 1;
  const dimensions = [1024, 1024];

  const canvas = document.createElement('canvas');
  const c = document.createElement('div');
  c.id = 'container';
  document.body.appendChild(c);
  c.appendChild(canvas);

  const renderer = new Renderer(canvas, { width: dimensions[0], height: dimensions[1], alpha: false, premultipliedAlpha: true, preserveDrawingBuffer: true, pxRatio: 1 });
  const ctx = renderer.ctx;

  let drawing = new Float32Array([-1.0, 1.0, 1.0, 1.0, -1.0, -1.0, 1.0, -1.0]);

  const drawBuffer = new Buffer(ctx, drawing);

  const vertexShader_buffer = document.getElementById('vertexShader_buffer').innerText;

  const programMain = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_under').innerText, {
    clearColour: [.15, .15, 0.25, 1.],
    renderType: Program.RENDER_STRIP });

  const programBuffer = new Program(ctx, vertexShader_buffer, document.getElementById('fragmentShader_buffer').innerText, {
    clearColour: [.15, .15, 0.25, 1.],
    renderType: Program.RENDER_STRIP });


  const loopBuffer = new FrameBuffer(renderer, 'loop', {
    width: dimensions[0],
    height: dimensions[1],
    tiling: Texture.IMAGETYPE_TILE,
    texdepth: FrameBuffer.TEXTYPE_FLOAT,
    pxRatio: 1 });

  window.loopBuffer = loopBuffer;
  console.log(loopBuffer.texture, renderer.width);

  const time = new Uniform(ctx, 'time', Uniform.TYPE_FLOAT, 100);
  const uDelta = new Uniform(ctx, 'delta', Uniform.TYPE_FLOAT, 100);
  const mouse = new Uniform(ctx, 'mouse', Uniform.TYPE_V2, [0., 0.]);

  const noise = new Texture(ctx, 'noise', {
    textureType: Texture.IMAGETYPE_TILE,
    url: '//repo.bfw.wiki/bfwrepo/image/5dfd8574f13f0.png' });


  noise.preload().then(n => {
    requestAnimationFrame(run);
  });

  let pointerdown = false;
  let lastPos = new Vec2();
  window.addEventListener('pointerdown', e => {
    pointerdown = true;
    lastPos = new Vec2(e.x, e.y);
  });
  window.addEventListener('pointerup', e => {
    pointerdown = false;
  });
  window.addEventListener('pointermove', e => {
    if (pointerdown) {
      let newPos = new Vec2(e.x, e.y);
      mouse.value = newPos.array;
    }
  });

  let playing = true;
  const setPlaying = value => {
    playing = value;
  };

  let autoTransitionTimer = 0;
  let timeToTransition = 0;
  const setupValues = i => {
    dimensions[0] = window.innerWidth;
    dimensions[1] = window.innerHeight;

    time.value = -100;
  };

  setupValues(0);

  let timeout;

  const opx = renderer.pxRatio;
  let then = 0;
  // let framenum = 0;
  //.........完整代码请登录后点击上方下载按钮下载查看