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.c.........完整代码请登录后点击上方下载按钮下载查看