webgl实现canvas无休止放松催眠动画效果代码-html代码-BFW代码库

webgl实现canvas无休止放松催眠动画效果代码

代码语言：html

所属分类：动画

代码描述：webgl实现canvas无休止放松催眠动画效果代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  

  
  
</head>

<body >
  <script type="x-shader/x-fragment">#version 300 es
/*********
* made by Matthias Hurrle (@atzedent)
*/   
precision highp float;
out vec4 O;
uniform float time;
uniform vec2 resolution;
#define FC gl_FragCoord.xy
#define R resolution
#define T time
#define S smoothstep
void main() {
        vec2 uv=(2.*FC-R)/min(R.x,R.y),p=uv;
        
        float
        a=atan(uv.y,uv.x)/6.28318,
        b=.125/length(uv);
        uv=vec2(a*9.+b,a-b-T*.6);
        uv=fract(uv*2.)-.5;
        
        float t=T*.1;
        uv=2.*(uv-.15*(vec2(sin(t+uv.x),cos(t-uv.y))));
        
        for (float i=.0; i++<5.;) {
                uv.x+=.3*sin(t*2.+i*uv.y*1.5)-t;
                uv.y+=.3*sin(t*2.-i*uv.x*1.5)+t;
        }
        
        float d=sin(t+uv.x+uv.y)*S(.05,.2,length(p));
        d/=1.+exp(-d);
        
        O=vec4(vec3(d),1);
}</script>
  
      <script id="rendered-js" >
window.onload = init
function init() {
  let renderer, canvas
  const dpr = Math.max(1, devicePixelRatio)

  const resize = () => {
    con.........完整代码请登录后点击上方下载按钮下载查看