three打造霓虹石星空旋转效果

代码语言:html

所属分类:粒子

代码描述:three打造霓虹石星空旋转效果

代码标签: 石星空 ( 星空 ) 旋转 效果

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

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">


</head>
<body translate="no">

<script id="vertexShader" type="x-shader/x-vertex">
  attribute vec3 color
;

  uniform
float time;
  uniform
float size;

  varying vec4 vMvPosition
;
  varying vec3 vColor
;
 
 
float map(float value, float beforeMin, float beforeMax, float afterMin, float afterMax) {
   
return afterMin + (afterMax - afterMin) * ((value - beforeMin) / (beforeMax - beforeMin));
 
}

 
void main() {
      vec4 mvPosition
= modelViewMatrix * vec4(position, 1.0);
      vMvPosition
= mvPosition;
      vColor
= color;

      gl_PointSize
= (size + map(sin(time * 0.05), -1.0, 1.0, -100.0, 100.0)) * (100.0 / length(mvPosition.xyz));
      gl_Position
= projectionMatrix * mvPosition;
 
}
</script>

<script id="fragmentShader" type="x-shader/x-fragment">
  uniform sampler2D texture
;
  uniform
float time;

  varying vec4 vMvPosition
;
  varying vec3 vColor
;

 
void main() {
     
float opacity = 200.0 / length(vMvPosition.xyz);

      vec2 uv
= gl_PointCoord.xy * 2.0 - 1.0;

     
float orb = 0.1 / length(vec2(0.0) - uv) * step(0.5, 1.0 - length(uv));
      orb
= smoothstep(0.0, 1.0, orb);

      vec3 color
= vec3(orb) * vColor;

      gl_FragColor
= vec4(color, 1.0);
 
}
</script>
<script type="text/javascript" src="http://repo.bfw.........完整代码请登录后点击上方下载按钮下载查看

网友评论0