I have customized a shader and created a flowing line effect, but there is a problem where the starting and ending positions are directly cut off. I want the starting position to be slowly displayed, and then the ending position to be slowly hidden, with a transitional effect. I don’t know where the problem lies with my shader code. The glsl code does not have this problem when used in three.js, and I really hope someone can help me
Code Highlight var shaderDefinition = {attributes: {
aPosition: pc.SEMANTIC_POSITION,
aUv0: pc.SEMANTIC_TEXCOORD0
},
vshader: `
attribute vec3 aPosition;
attribute vec2 aUv0;
uniform mat4 matrix_model;
uniform mat4 matrix_viewProjection;
varying vec2 vUv;
void main(void) {
vUv = aUv0;
mat4 MVP = matrix_viewProjection * matrix_model;
gl_Position = MVP * vec4(aPosition, 1.0);
}`,
fshader: `
precision mediump float;
uniform float vTime;
uniform vec3 color;
uniform float opacity;
varying vec2 vUv;
uniform float random;
#define S smoothstep
#define IS(x,y,z) (1. - smoothstep(x,y,z))
vec3 draw_line(vec2 uv,vec3 color, float shift, float freq){
float line_thickness = 0.14;
float amp_coef = 0.9;
uv.y -=IS(1.1,1.9,abs(uv.x)) * sin(uv.x + shift * freq) * amp_coef * sin(uv.x + shift);
return IS(0.,line_thickness*S(-0.9,.9,abs(uv.x)),abs(uv.y*1.2)) * color;
}
void main() {
float speed = 0.5;
float freq_coef = 1.5;
vec2 uv = vUv*2. - 1.;
float shift = vTime * speed;
float vProgress = smoothstep(-1.,1.,sin(vUv.x*12. + vTime*6.*random));
float hideCorners = smoothstep(1., 0.9, vUv.x);
float hideCorners1 = smoothstep(0., 0.1, vUv.x);
vec3 color = vec3(0.);
for (float idx = 0.; idx < 4.; idx += 1.){
color += draw_line(uv,vec3(0.2,0.3,0.6),shift+idx,1.+freq_coef);
}
vec3 finalColor = mix(color,color * 0.25,vProgress);
gl_FragColor = vec4(finalColor,opacity*hideCorners*hideCorners1);
}`
};
Here is my project address
https://playcanvas.com/project/1228022/overview/opacity_demo
