如何使 Three.js ShaderMaterial 透明答案

【问题标题】：How to make Three.js ShaderMaterial transparent如何使 Three.js ShaderMaterial 透明
【发布时间】：2022-02-04 04:54:57
【问题描述】：

我对着色器很陌生。我正在尝试实现这种颜色和透明效果： 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);

}

你会怎么做呢？谢谢！

【问题讨论】：

标签： three.js shader fragment-shader

【解决方案1】：

我想答案有点晚了，但也许有人会遇到同样的问题。我认为您正在寻找菲涅耳着色器：

Three.js 示例可以在这里找到： https://jsfiddle.net/8n36c47p/4/

这是主要的着色器部分：

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

【讨论】：