three.js - GLSL:具有自定义着色器的 ShaderMaterial 不透明

Question

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

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 实现此目的？

谢谢

Answer 1

我不知道 THREE.js 在底层是如何工作的，但我看到你将混合设置为累加。这不是你想要的 alpha 混合。 Alpha blending用途这个功能:

 glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

当添加剂使用时:

  glBlendFunc(GL_ONE, GL_ONE);

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