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