如何使 Three.js ShaderMaterial 透明

Question

我对着色器很陌生。我正在尝试实现这种颜色和透明效果： Example #1 Example#2

这是我的结果： my result

这是我目前所拥有的：

  this.material = new THREE.ShaderMaterial({
  extensions: {
    derivatives: "#extension GL_OES_standard_derivatives : enable"
  },
  side: THREE.DoubleSide,
  uniforms: {
    time: { value: 0 },
    resolution: { value: new THREE.Vector4() }
  },
  transparent: true,
  vertexShader: vertex,
  fragmentShader: fragment
});

片段着色器

varying vec2 vUv;
varying float vNoise;
uniform vec2 u_resolution;

void main() {

vec3 color1 = vec3(0.,0.,0.);
vec3 color2 = vec3(1.,1.,1.);
vec3 finalcolor = mix(color1,color2,0.9*(vNoise+1.));
gl_FragColor = vec4( vec3(finalcolor),0.2);

}

你会怎么做？ 谢谢！