How to make Three.js ShaderMaterial gradient to transparent - vue.js

Question

I want to make a two-color gradient transparent. In the image below you can see.
Left is the final mesh and on the right a single face. I'm trying to achieve this with a vertex shader and a fragment shader. But unfortunately, I can't figure it out. Hopefully, somebody can help me
I have this so far:
var custom3Material = new this.$three.ShaderMaterial({
uniforms: {
vlak3color1: { value: new this.$three.Color('#31c7de')},
vlak3color2: {type: 'vec2', value: new this.$three.Color('#de3c31')},
positionVlak3: {value: -3.5},
},
vertexShader: `
varying vec3 vUv;
void main() {
vUv = position;
gl_Position = projectionMatrix * modelViewMatrix * vec4(position,1.0);
}
`,
fragmentShader: `
uniform vec3 vlak3color1;
uniform vec3 vlak3color2;
uniform float positionVlak3;
varying vec3 vUv;
void main() {
gl_FragColor = vec4(mix(vlak3color1, vlak3color2, vUv.y-positionVlak3), 1);
}
`,
});
I would like to be able to adjust the position between the 2 colors and the transparency afterward
Thanks in advance!

Answer 1

You must make your material transparent by adding transparent: true to its attributes.
vlak3color2: {type: 'vec2', value: new this.$three.Color('#de3c31')} is confusing. Why are you trying to make a color of type vec2? Just get rid of the type, you don't need it. Three.js automatically recognizes the type when it sees it's a Color.
The fourth value of gl_FragColor is the alpha. Right now you're setting it to a constant 1, so you're getting a fully-opaque color. Try to make it fade from 0 - 1 with smoothstep():
void main() {
// y < 0 = transparent, > 1 = opaque
float alpha = smoothstep(0.0, 1.0, vUv.y);
// y < 1 = color1, > 2 = color2
float colorMix = smoothstep(1.0, 2.0, vUv.y);
gl_FragColor = vec4(mix(vlak3color1, vlak3color2, colorMix), alpha);
}