three+maath+webgl实现彩色点汇集动画效果代码-html代码-BFW代码库

three+maath+webgl实现彩色点汇集动画效果代码

代码语言：html

所属分类：动画

代码描述：three+maath+webgl实现彩色点汇集动画效果代码

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

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

<head>

  <meta charset="UTF-8">

  
  
  
  
<style>
* {
	margin: 0px;
	cursor: pointer;
}
</style>



</head>

<body >
  <div id="shader"></div>
<script id="vertex" type="x-shader/x-vertex">
	varying vec2 vUv;
uniform float uTime;

attribute vec3 position2;
varying vec3 pos;
	uniform float u_progress;
	varying float size;

void coswarp(inout vec3 trip, float warpsScale ){

    trip.xyz += warpsScale * .1 * cos(3. * trip.yzx + (uTime * .015));
    trip.xyz += warpsScale * .05 * cos(11. * trip.yzx + (uTime * .015));
    trip.xyz += warpsScale * .025 * cos(17. * trip.yzx + (uTime * .015));
    
  }  

   

  void main(){
    vec4 modelPosition = modelMatrix * vec4(position, 1.);



		modelPosition.y += sin((uTime * .02) + length(modelPosition.xy)) * 8.;
		
		
		modelPosition.z += sin((uTime * .02) + length(modelPosition.xy)) * 8.;


    vec4 modelPosition2 = modelMatrix * vec4(position, 1.);

   

    vec4 viewPosition = viewMatrix * modelPosition;
    vec4 projectionPosition = projectionMatrix * viewPosition;
  
    gl_Position = projectionPosition;
    

    
  gl_PointSize = (250. * 1.-(length(modelPosition.xy))) ;

    gl_PointSize *= (1.0/ -viewPosition.z);

    vUv = uv;
    pos = modelPosition.xyz;
		size = gl_PointSize;
              }
</script>

<script id="fragment" type="x-shader/x-fragment">
	uniform float uTime;

varying vec2 vUv;
uniform vec2 uResolution;
varying vec3 pos;
const float PI = 3.1415926535897932384626433832795;
varying float size;

  
vec2 rotate2D (vec2 _st, float _angle) {
    _st -= 0.5;
    _st =  mat2(cos(_angle),-sin(_angle),
                sin(_angle),cos(_angle)) * _st;
    _st += 0.5;
    return _st;

}

void coswarp(inout vec3 trip, float warpsScale ){

  trip.xyz += warpsScale * .1 * sin(3. * trip.yzx + (uTime * .15));
  trip.xyz += warpsScale * .05 * sin(uTime * trip.yzx + (uTime * .15));
  trip.xyz += warpsScale * .025 * sin(17. * trip.yzx + (uTime * .15));
  
}  

void uvRipple(inout vec2 uv, float intensity){

vec2 p = uv -.5;


  float cLength=length(p);

   uv= uv +(p/cLength)*cos(cLength*15.0-uTime*.5)*intensity;

} 



vec3 shape( in vec2 p, float sides ,float size)
{
  
   float d = 0.0;
  vec2 st = p *2.-1.;

  // Number of sides of your shape
  float N = sides ;

  // Angle and radius from the current pixel
  float a = atan(st.x,st.y)+PI ;
  float r = (2.* PI)/(N) ;

  // Shaping function that modulate the distance
  d = cos(floor(.5+a/r)*r-a)*length(st);
  

  return  vec3(1.0-smoothstep(size,size +.1,d));
}


void main() {
  vec2 uv = vUv;
  vec2 uv2 = uv;
  uv = (gl_FragCoord.xy - uResolution * .5) / uResolution.yy + 0.5;
  
  
  uvRipple(uv, .2);
 
  vec3 color = vec3(uv.x, uv.y, 1.);
	
	coswarp(color, 3.);

 
 
 vec2 coOrd = gl_PointCoord;

 

   float alpha = 1.;
	
	


     float t = (uTime *.8) + length(coOrd-.5);

     coOrd = rotate2D(coOrd, PI + (uTime * .1));
	
	


        float distanceToCenter = distance(coOrd, vec2(.5));
       
	alpha = 1.- step(shape(coOrd, 8. , .5).r, .5);
        
	// alpha*= sin(t) + 1.02;
      
      

  
    gl_FragColor = vec4(vec3(color.r, color.g, color.b), alpha);
  
  
	

}
</script>
<script type="text/javascript" src="//repo.bfw.wiki/.........完整代码请登录后点击上方下载按钮下载查看