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

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

网友评论0