Three.js GLSL:具有自定义着色器的着色器材质不透明

我尝试在球体上绘制纹理，如下所示：

script(type='x-shader/x-vertex')#Vertex
  varying vec2 vUv;
  void main() {
  vUv = uv;
  gl_Position = projectionMatrix * modelViewMatrix * vec4( position, 1.0 );
  }      

script(type='x-shader/x-fragment')#Fragment
  uniform sampler2D baseTexture;
  varying vec2 vUv;

  void main() {                   
    vec4 baseColor = texture2D( baseTexture, vUv );  
    gl_FragColor = baseColor;
  }

this.materials = new THREE.ShaderMaterial( { 
  uniforms: this.uniforms, 
  vertexShader: document.getElementById( 'Vertex' ).textContent, 
  fragmentShader: document.getElementById( 'Fragment' ).textContent,
  transparent: true,
  blending: THREE.AdditiveBlending 
});

这确实很好，但纹理不是透明的，即使我更改了alpha值。我的纹理中的透明像素是黑色的

但是如果我写baseColor.a=0.0，我就看不到纹理，也看不到场景中的纹理。我想我不知道怎么把纹理和背景混在一起了

如何在three.js中使用GLSL实现这一点

---

谢谢

我不知道THREE.js如何在引擎盖下工作，但我看到您将混合设置为加法。这不是您想要的alpha混合。使用 此功能：

 glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

而添加剂的用途：

  glBlendFunc(GL_ONE, GL_ONE);

---

因此，请确保您使用第一个，并且您的纹理实际上具有alpha通道作为RGBA的一个组件。

您是否启用了混合并将其设置为使用alpha混合模式？此行：混合：三。AdditiveBlend-为什么是加性的？它不会进行alpha混合。透明纹理为黑色的部分原因可能与绘制顺序有关。您正在写入深度缓冲区，该缓冲区阻止绘制曲面后面的任何内容，即使texel应该是透明的。一种解决方案是启用alpha测试（在现代OpenGL中，这已被删除，您必须在片段着色器中执行此操作——类似于

if（gl_FragColor.a<0.0001）discard；

），但更好的解决方案是先绘制所有不透明的对象，然后从后到前排序半透明几何体。