How to make Three.js ShaderMaterial transparent

Question

I'm very new to shaders. I'm trying to achieve this color and transparent effect: Example #1 Example#2

This is my result: my result

This what I have so far:

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

fragmentShader

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);

}

How would you go about this? Thanks!

Answer 1

I guess that it is a bit late for answer, but maybe someone will have same problem. I think you are looking for Fresnel Shader:

Three.js example can be found here: https://jsfiddle.net/8n36c47p/4/

Here is main shader part:

vertexShader: [

    "varying vec3 vPositionW;",
    "varying vec3 vNormalW;",

    "void main() {",

    "   vPositionW = vec3( vec4( position, 1.0 ) * modelMatrix);",
    " vNormalW = normalize( vec3( vec4( normal, 0.0 ) * modelMatrix ) );",

    "   gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );",

    "}"

].join( "\n" ),

fragmentShader: [

    "varying vec3 vPositionW;",
    "varying vec3 vNormalW;",

    "void main() {",
    
    "   vec3 color = vec3(1., 1., 1.);",
    "   vec3 viewDirectionW = normalize(cameraPosition - vPositionW);",
    "   float fresnelTerm = dot(viewDirectionW, vNormalW);",
    "   fresnelTerm = clamp(1.0 - fresnelTerm, 0., 1.);",

    "   gl_FragColor = vec4( color * fresnelTerm, 1.);",

    "}"

].join( "\n" )