three+webgl实现涟漪波纹扩散光感动画效果代码-html代码-BFW代码库

three+webgl实现涟漪波纹扩散光感动画效果代码

代码语言：html

所属分类：动画

代码描述：three+webgl实现涟漪波纹扩散光感动画效果代码

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

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

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

  
  
<style>
*{
          padding: 0;
          margin: 0;
      }
</style>


  
  
</head>

<body>
<script type="text/javascript" src="//repo.bfw.wiki/bfwrepo/js/three.89.js"></script>

      <div id="container"></div>

      <script id="vertexShader" type="x-shader/x-vertex">
          void main() {
              gl_Position = vec4( position, 1.0 );
          }
      </script>

      <script id="fragmentShader" type="x-shader/x-fragment">
      //参考　https://tympanus.net/Development/ScrollSpiral/


         	#define TWO_PI 6.2831853072
    	#define PI 3.14159265359

    	precision highp float;
    	uniform vec2 resolution;
    	uniform float time;

    	void main(void) {
    	vec2 uv = (gl_FragCoord.xy * 2.0 - resolution.xy) / min(resolution.x, resolution.y);
    	float t = time*0.05;
		float lineWidth = 0.002;

		vec3 color = vec3(0.0);
    for(int j = 0; j < 3; j++){
      for(int i=0; i < 5; i++){
        color[j] += lineWidth*float(i*i) / abs(fract(t - 0.01*float(j)+float(i)*0.01)*5.0 - length(uv) + mod(uv.x+uv.y, 0.2));
        
        
      }

    }

		
		    
			
        gl_FragColor = vec4(color[0],color[1],color[2],1.0);
    	}
</script>
  
      <sc.........完整代码请登录后点击上方下载按钮下载查看