threejs之使用顶点着色器和片着色器生成飞线原理分析

本文链接：https://blog.youkuaiyun.com/qq_35094120/article/details/136126728

这篇文章详细解释了GLSL中的片段和顶点着色器，如何根据点的大小和距离中心点调整颜色强度，以及如何通过时间变化实现点的动态效果。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

// fragment.glsl
varying float vSize;
uniform vec3 uColor;
void main(){
    float distanceToCenter = distance(gl_PointCoord,vec2(0.5,0.5));
    float strength = 1.0 - (distanceToCenter*2.0);
    
    if(vSize<=0.0){
        gl_FragColor = vec4(1,0,0,1);;
    }else{
        gl_FragColor = vec4(uColor,strength);
    }
    
}

这个一个片段着色器程序，用于在屏幕上绘制点，并根据点的大小和距离中心点的距离调整点的颜色强度：

varying float vSize;：这是一个变量，从顶点着色器传递过来的，用于表示点的大小。
uniform vec3 uColor;：这是一个uniform变量，表示点的颜色。
void main() { ... }：这是片段着色器的入口函数。
float distanceToCenter = distance(gl_PointCoord,vec2(0.5,0.5));：计算当前片段距离点的中心的距离。gl_PointCoord是片段相对于当前绘制的点的坐标，(0.5, 0.5)是点的中心位置。
float strength = 1.0 - (distanceToCenter*2.0);：根据距离中心的距离计算强度，使距离中心越远的片段强度越低。
if (vSize <= 0.0) { ... } else { ... }：根据点的大小判断点是否存在。如果点的大小小于等于0，则直接将颜色设置为固定值，否则根据点的颜色和距离中心的距离计算点的颜色强度。
gl_FragColor = vec4(...);：设置当前片段的颜色。如果点的大小小于等于0，则使用固定颜色，否则使用指定的颜色(uColor)和计算出的强度(strength)。

通常情况下，在GLSL中颜色值的范围是[0, 1]。

// vertex.glsl
attribute float aSize;

uniform float uTime;
uniform vec3 uColor;
uniform float uLength;

varying float vSize;

void main(){
    vec4 viewPosition = viewMatrix * modelMatrix *vec4(position,1);
    gl_Position = projectionMatrix * viewPosition;
    vSize = (aSize-uTime);//aSize为0-1000，uTime的值一直增大vSize越来越小，后面的点小于0的直接就不可见了，呈现出水流流出效果
    if(vSize<0.0){// 当后面的不可见的时候vSize会小于0，此时让它加上最初的值，变成最开始的长度，让不可见的重新可见
        vSize = vSize + uLength; 
    }
    vSize = (vSize-500.0)*0.1; // 图像往下平移500
    
    gl_PointSize = -vSize/viewPosition.z;
}

这段代码是一个顶点着色器程序，它对顶点进行处理，主要包括对顶点位置的变换和点的大小调整。

attribute float aSize;：这是一个顶点属性，表示每个顶点的大小。
uniform float uTime;：这是一个uniform变量，表示时间。于控制点的大小随时间变化的效果。
uniform vec3 uColor;：这是一个uniform变量，表示点的颜色。
uniform float uLength;：这是一个uniform变量，表示某种长度，用于控制点的大小。
varying float vSize;：这是一个varying变量，用于将顶点着色器计算的点的大小传递给片段着色器。
vec4 viewPosition = viewMatrix * modelMatrix * vec4(position, 1);：将顶点从模型空间变换到视图空间，计算顶点的最终位置。
gl_Position = projectionMatrix * viewPosition;：将顶点的最终位置变换到裁剪空间，以便后续进行投影变换。
vSize = (aSize - uTime);：计算顶点的大小。将顶点的大小减去时间，为了实现随时间变化的效果。
if (vSize < 0.0) { ... }：当后面的不可见的时候vSize会小于0，此时让它加上最初的值，变成最开始的长度，让不可见的重新可见。
vSize = (vSize - 500.0) * 0.1;：对顶点的大小进行调整，为了对顶点的大小进行缩放和平移。
gl_PointSize = -vSize / viewPosition.z;：设置点的大小。根据顶点的深度进行调整，确保点在屏幕上的大小与其在视觉上的大小相符合。
当uTime为500时有一半飞线是不可见的，此时一半的vSize小于0，我们在顶点着色器中设置了为透明。此时当uTime从0到1000再次回到0时飞线最开始那头会从0突变成最大。正常不是从头开始，而是反过来从尾部开始形成流动的感觉。

此时把为小于0的部分加上总size的长度，使得小于0的时候变为时间为0的长度。