赞
踩
// 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的长度。
Copyright © 2003-2013 www.wpsshop.cn 版权所有,并保留所有权利。