多彩飓风旋涡状彩带灯带变幻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 format = gl.RGBA;
let t;
if (buffertype & WTCGL.TEXTYPE_FLOAT) {
const e = gl.getExtension('OES_texture_float');
window.extension = e;
t = e.FLOAT;
// internalFormat = gl.RGBA32F;
} else if (buffertype & WTCGL.TEXTYPE_HALF_FLOAT_OES) {
// t = gl.renderer.isWebgl2 ? e.HALF_FLOAT : e.HALF_FLOAT_OES;
// gl.renderer.extensions['OES_texture_half_float'] ? gl.renderer.extensions['OES_texture_half_float'].HALF_FLOAT_OES :
// gl.UNSIGNED_BYTE;
const e = gl.getExtension('OES_texture_half_float');
t = this.isWebgl2 ? gl.HALF_FLOAT : e.HALF_FLOAT_OES;
// format = gl.RGBA;
// internalFormat = gl.RGB32F;
// format = gl.RGB32F;
// window.gl = gl
// t = e.HALF_FLOAT_OES;
} else {
t = gl.UNSIGNED_BYTE;
}
const type = t;
const data = null;
gl.texImage2D(gl.TEXTURE_2D, level, internalFormat,
targetTextureWidth, targetTextureHeight, border,
format, type, data);
// gl.generateMipmap(gl.TEXTURE_2D);
// set the filtering so we don't need mips
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.NEAREST);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.NEAREST);
// Set the parameters based on the passed type
if (tiling === WTCGL.IMAGETYPE_TILE) {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.REPEAT);
} else if (tiling === WTCGL.IMAGETYPE_MIRROR) {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.MIRRORED_REPEAT);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.MIRRORED_REPEAT);
} else if (tiling === WTCGL.IMAGETYPE_REGULAR) {
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);
}
}
// Create and bind the framebuffer
const fb = gl.createFramebuffer();
gl.bindFramebuffer(gl.FRAMEBUFFER, fb);
// attach the texture as the first color attachment
const attachmentPoint = gl.COLOR_ATTACHMENT0;
const level = 0;
gl.framebufferTexture2D(gl.FRAMEBUFFER, attachmentPoint, gl.TEXTURE_2D, targetTexture, level);
return {
w: w * this.pxratio,
h: h * this.pxratio,
fb: fb,
frameTexture: targetTexture };
}
/**
* Resizes the canvas to a specified width and height, respecting the pixel ratio
*
* @param {number} w The width of the canvas
* @param {number} h The height of the canvas
* @return {Void}
*/
resize(w, h) {
this._el.width = w * this.pxratio;
this._el.height = h * this.pxratio;
this._size = [w * this.pxratio, h * this.pxratio];
if (this.styleElement) {
this._el.style.width = w + 'px';
this._el.style.height = h + 'px';
}
this._ctx.viewportWidth = w * this.pxratio;
this._ctx.viewportHeight = h * this.pxratio;
this._ctx.uniform2fv(this._programInfo.uniforms.resolution, this._size);
this.initBuffers(this._positions);
}
/**
* Initialise a provided vertex buffer
*
* @param {array} positions The vertex positions to initialise
* @return {Void}
*/
initBuffers(positions) {
this._positions = positions;
this._positionBuffer = this._ctx.createBuffer();
this._ctx.bindBuffer(this._ctx.ARRAY_BUFFER, this._positionBuffer);
this._ctx.bufferData(this._ctx.ARRAY_BUFFER,
new Float32Array(positions),
this._ctx.STATIC_DRAW);
}
/**
* Add a uniform to the program. At this time the following types are supported:
* - Float - WTCGL.TYPE_FLOAT
* - Vector 2 - WTCGL.TYPE_V2
* - Vector 3 - WTCGL.TYPE_V3
* - Vector 4 - WTCGL.TYPE_V4
*
* @param {string} name The name of the uniform. N.B. your name will be prepended with a `u_` in your shaders. So providing a name of `foo` here will result in a uniform named `u_foo`
* @param {WTCGL.UNIFORM_TYPE} type The unfiform type
* @param {number|array} value The unfiform value. The type depends on the uniform type being created
* @return {WebGLUniformLocation} The uniform location for later reference
*/
addUniform(name, type, value) {
let uniform = this._programInfo.uniforms[name];
uniform = this._ctx.getUniformLocation(this._program, `u_${name}`);
switch (type) {
case WTCGL.TYPE_INT:
if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
break;
case WTCGL.TYPE_FLOAT:
if (!isNaN(value)) this._ctx.uniform1f(uniform, value);
break;
case WTCGL.TYPE_V2:
if (value instanceof Array && value.length === 2.) this._ctx.uniform2fv(uniform, value);
break;
case WTCGL.TYPE_V3:
if (value instanceof Array && value.length === 3.) this._ctx.uniform3fv(uniform, value);
break;
case WTCGL.TYPE_V4:
if (value instanceof Array && value.length === 4.) this._ctx.uniform4fv(uniform, value);
break;
case WTCGL.TYPE_BOOL:
if (!isNaN(value)) this._ctx.uniform1i(uniform, value);
break;}
this._programInfo.uniforms[name] = uniform;
return uniform;
}
/**
* Adds a texture to the program and links it to a named uniform. Providing the type changes the tiling properties of the texture. Possible values for type:
* - WTCGL.IMAGETYPE_REGULAR - No .........完整代码请登录后点击上方下载按钮下载查看
热门代码搜索
其他语言代码库
Html代码库
Python代码库
Java代码库
Php代码库
Phpcli代码库
Golang代码库
C#代码库
Nodejs代码库
C代码库
C++代码库
Sql代码库
R代码库
Rust代码库
Ruby代码库
Dart代码库
Vb代码库
D代码库
F#代码库
Typescript代码库
Coffeescript代码库
Julia代码库
Kotlin代码库
Perl代码库
Groovy代码库
Lua代码库
Vala代码库
Ocaml代码库
Assembly代码库
Objectc代码库
Scala代码库
Erlang代码库
Pascal代码库
Swift代码库
Fortran代码库
Bash代码库
Clojure代码库
Ada代码库
Elixir代码库
Cobol代码库
Haskell代码库
Nim代码库
Racket代码库
Lisp代码库
网友评论0