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

这篇文章详细解释了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);
    }
    
}

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

  1. varying float vSize;:这是一个变量,从顶点着色器传递过来的,用于表示点的大小。

  2. uniform vec3 uColor;:这是一个uniform变量,表示点的颜色。

  3. void main() { ... }:这是片段着色器的入口函数。

  4. float distanceToCenter = distance(gl_PointCoord,vec2(0.5,0.5));:计算当前片段距离点的中心的距离。gl_PointCoord是片段相对于当前绘制的点的坐标,(0.5, 0.5)是点的中心位置。

  5. float strength = 1.0 - (distanceToCenter*2.0);:根据距离中心的距离计算强度,使距离中心越远的片段强度越低。

  6. if (vSize <= 0.0) { ... } else { ... }:根据点的大小判断点是否存在。如果点的大小小于等于0,则直接将颜色设置为固定值,否则根据点的颜色和距离中心的距离计算点的颜色强度。

  7. 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;
}

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

  1. attribute float aSize;:这是一个顶点属性,表示每个顶点的大小。

  2. uniform float uTime;:这是一个uniform变量,表示时间。于控制点的大小随时间变化的效果。

  3. uniform vec3 uColor;:这是一个uniform变量,表示点的颜色。

  4. uniform float uLength;:这是一个uniform变量,表示某种长度,用于控制点的大小。

  5. varying float vSize;:这是一个varying变量,用于将顶点着色器计算的点的大小传递给片段着色器。

  6. vec4 viewPosition = viewMatrix * modelMatrix * vec4(position, 1);:将顶点从模型空间变换到视图空间,计算顶点的最终位置。

  7. gl_Position = projectionMatrix * viewPosition;:将顶点的最终位置变换到裁剪空间,以便后续进行投影变换。

  8. vSize = (aSize - uTime);:计算顶点的大小。将顶点的大小减去时间,为了实现随时间变化的效果。

  9. if (vSize < 0.0) { ... }:当后面的不可见的时候vSize会小于0,此时让它加上最初的值,变成最开始的长度,让不可见的重新可见。

  10. vSize = (vSize - 500.0) * 0.1;:对顶点的大小进行调整,为了对顶点的大小进行缩放和平移。

  11. gl_PointSize = -vSize / viewPosition.z;:设置点的大小。根据顶点的深度进行调整,确保点在屏幕上的大小与其在视觉上的大小相符合。
    当uTime为500时有一半飞线是不可见的,此时一半的vSize小于0,我们在顶点着色器中设置了为透明。此时当uTime从0到1000再次回到0时飞线最开始那头会从0突变成最大。正常不是从头开始,而是反过来从尾部开始形成流动的感觉。
    请添加图片描述
    此时把为小于0的部分加上总size的长度,使得小于0的时候变为时间为0的长度。

请添加图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

Young soul2

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值