threejs+shader 曲线点运动,飞线运动

飞线-从开始到结束都显示

别忘了设置
transparent: true,
depthWrite: false,
blending: THREE.AdditiveBlending,

vertexShader: ` attribute float aIndex; uniform float uTime; uniform float uLength; uniform float uScale; varying float vSize; void main() { vec4 viewPosition = viewMatrix * modelMatrix * vec4(position,1); gl_Position = projectionMatrix * viewPosition; vSize = aIndex- uTime; if(vSize<=0.0){ vSize = vSize + uLength; }else{ vSize = 0.0; } gl_PointSize = vSize * uScale; } `,
 fragmentShader: ` varying float vSize; uniform vec3 uColor; void main(){ float distanceToCenter = distance(gl_PointCoord,vec2(0.5)); float alpha = 1.0 - (distanceToCenter*2.0); gl_FragColor = vec4(1,0,0,alpha); if(vSize<=0.0){ gl_FragColor = vec4(1,0,0,0); }else{ // // gl_FragColor = vec4(uColor,1.0); gl_FragColor = vec4(uColor,alpha); // 圆点点 } } `

飞线-快结束的时候淡出

fragmentShader: ` varying float vSize; uniform float uTime; uniform float uLength; uniform vec3 uColor; void main(){ float distanceToCenter = distance(gl_PointCoord,vec2(0.5)); float alpha = 1.0 - (distanceToCenter*2.0); if(vSize<=0.0){ gl_FragColor = vec4(1,0,0,0); }else{ float s = 0.9; if(uTime > uLength *s){ gl_FragColor = vec4(uColor, alpha - ((uTime - uLength * s) / (uLength * (1.0-s)))); // 圆点 }else{ gl_FragColor = vec4(uColor,alpha); // 圆点 } } } `,

飞线- 显示部分点,前面的点大,后面的点小

      vertexShader: ` attribute float aIndex; uniform float uTime; uniform float uLength; uniform float uScale; varying float vSize; void main() { vec4 modelPosition = modelMatrix * vec4( position, 1.0 ); // 顶点坐标 gl_Position = projectionMatrix * viewMatrix * modelPosition; float size = aIndex - uTime; if(size < 0.0) { size = size + uLength; } vSize = (size - uLength / 2.0) * uScale; // 设置二分之一的点为不可见 gl_PointSize = vSize; } `,
      fragmentShader: ` varying float vSize; uniform vec3 uColor; void main(){ float distanceToCenter = distance(gl_PointCoord,vec2(0.5,0.5)); float alpha = 1.0 - (distanceToCenter*2.0); if(vSize<=0.0){ gl_FragColor = vec4(1,0,0,0); }else{ gl_FragColor = vec4(uColor,alpha); } } `,

飞线- 点越小越透明,形成一个小尾巴

vertexShader: ` attribute float aIndex; uniform float uTime; uniform float uLength; uniform float uScale; varying float vSize; void main() { vec4 modelPosition = modelMatrix * vec4( position, 1.0 ); // 顶点坐标 gl_Position = projectionMatrix * viewMatrix * modelPosition; float size = aIndex - uTime; if(size < 0.0) { size = size + uLength; } vSize = (size - uLength / 2.0) * uScale; // 设置二分之一的点为不可见 gl_PointSize = vSize; } `,
 fragmentShader: ` varying float vSize; uniform float uLength; uniform float uScale; void main(){ if(vSize <= 0.0){ gl_FragColor = vec4(1,1,0,0); }else{ // 根据点的大小设置透明度,点越小越透明 float opacity = uLength / 2.0 * uScale; gl_FragColor = vec4(1,1,0,vSize / opacity); } } `,

保留曲线路径

 vertexShader: ` attribute float aIndex; uniform float uTime; uniform float uLength; uniform float uScale; varying float vSize; void main() { vec4 modelPosition = modelMatrix * vec4( position, 1.0 ); // 顶点坐标 gl_Position = projectionMatrix * viewMatrix * modelPosition; float size = aIndex - uTime; if(size < 0.0) { size = size + uLength; } vSize = (size - uLength / 2.0) * uScale; // 设置二分之一的点为不可见 gl_PointSize = vSize<=2.0?2.0:vSize; } `,
  fragmentShader: ` varying float vSize; uniform vec3 uColor; void main(){ float distanceToCenter = distance(gl_PointCoord,vec2(0.5,0.5)); float alpha = 1.0 - (distanceToCenter*2.0); if(vSize<=2.0){ gl_FragColor = vec4(1,0,1,alpha); }else{ gl_FragColor = vec4(uColor,alpha); } } `,

点在线上运行

      vertexShader: ` attribute float aIndex; uniform float uTime; uniform float uLength; uniform float uScale; varying float vSize; void main() { vec4 modelPosition = modelMatrix * vec4( position, 1.0 ); // 顶点坐标 gl_Position = projectionMatrix * viewMatrix * modelPosition; float size = aIndex - uTime; if(size < 0.0) { size = size + uLength; } vSize = (size - (uLength * 0.99)); // 只显示0.01的点 gl_PointSize = vSize<=2.0?2.0:vSize; } `,
      fragmentShader: ` varying float vSize; uniform vec3 uColor; void main(){ float distanceToCenter = distance(gl_PointCoord,vec2(0.5,0.5)); float alpha = 1.0 - (distanceToCenter*2.0); if(vSize<=2.0){ gl_FragColor = vec4(1,0,1,alpha); }else{ gl_FragColor = vec4(uColor,alpha); } } `,