时空穿梭效果
代码语言:html
所属分类:动画
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title> A LONG WAY</title> <style> body { background-color: #000; margin: 0; overflow: hidden; background-repeat: no-repeat; } </style> </head> <body translate="no"> <canvas id="canvas" width="1400" height="600"></canvas> <script> var canvas = document.getElementById("canvas"); canvas.width = window.innerWidth; canvas.height = window.innerHeight; // Initialize the GL context var gl = canvas.getContext('webgl'); if (!gl) { console.error("Unable to initialize WebGL."); } //Time step var dt = 0.015; //Time var time = 0.0; //************** Shader sources ************** var vertexSource = ` attribute vec2 position; void main() { gl_Position = vec4(position, 0.0, 1.0); } `; var fragmentSource = ` precision highp float; uniform float width; uniform float height; vec2 resolution = vec2(width, height); uniform float time; //Base values modified with depth later float intensity = 1.0; float radius = 0.05; //Distance functions from //https://www.iquilezles.org/www/articles/distfunctions2d/distfunctions2d.htm float triangleDist(vec2 p){ const float k = sqrt(3.0); p.x = abs(p.x) - 1.0; p.y = p.y + 1.0/k; if( p.x+k*p.y>0.0 ) p=vec2(p.x-k*p.y,-k*p.x-p.y)/2.0; p.x -= clamp( p.x, -2.0, 0.0 ); return -length(p)*sign(p.y); } float boxDist(vec2 p){ vec2 d = abs(p)-1.0; return length(max(d,vec2(0))) + min(max(d.x,d.y),0.0); } float circleDist( vec2 p){ return length(p) - 1.0; } //https://www.shadertoy.com/view/3s3GDn float getGlow(float dist, float radius, float intensity){ return pow(radius/dist, intensity); } void main(){ vec2 uv = gl_FragCoord.xy/resolution.xy; float widthHeightRatio = resolution.x/resolution.y; vec2 centre; vec2 pos; float t = time * 0.05; float dist; float glow; vec3 col = vec3(0); //The spacing between shapes float scale = 500.0; //Number of shapes const float layers = 15.0; float depth; vec2 bend; vec3 purple = vec3(0.611, 0.129, 0.909); vec3 green = vec3(0.133, 0.62, 0.698); float angle; float rotationAngle; mat2 rotation; //For movement of the anchor point in time float d = 2.5*(sin(t) + sin(3.0*t)); //Create an out of frame anchor point where all shapes converge to vec2 anchor = vec2(0.5 + cos(d), 0.5 + sin(d)); //Create light purple glow at the anchor loaction pos = anchor - uv; pos.y /= widthHeightRatio; dist = length(pos); glow = getGlow(dist, 0.2, 1.9); col += glow * vec3(0.7,0.6,1.0); for(float i = 0.0; i < layers; i++){ //Time varying depth information depending on layer depth = fract(i/layers + t); //Move the focus of the camera in a circle centre = vec2(0.5 + 0.2 * sin(t), 0.5 + 0.2 * cos(t)); //Position shapes between the anchor and the camera focus based on depth bend = mix(anchor, centre, depth); pos = bend - uv; pos.y /= widthHeightRatio; //Rotate shapes rotationAngle = 3.14 * sin(depth + fract(t) * 6.28) + i; rotation = mat2(cos(rotationAngle), -sin(rotationAngle), sin(rotationAngle), cos(rotationAngle)); pos *= rotation; //Position shapes according to depth pos *= mix(scale, 0.0, depth); float m = mod(i, 3.0); if(m == 0.0){ dist = abs(boxDist(pos)); }else if(m == 1.0){ dist = abs(triangleDist(pos)); }else{ dist = abs(circleDist(pos)); } //Get glow from base radius and intensity modified by depth glow = getGlow(dist, radius+(1.0-depth)*2.0, intensity + depth); //Find a.........完整代码请登录后点击上方下载按钮下载查看
网友评论0