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，我再也看不到纹理了，但也看不到场景背后的纹理。我想我不知道将纹理与背景混合在一起？

如何使用GLSL在three.js中实现这一目标？

由于

Answer 1

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

 glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

添加剂使用时：

  glBlendFunc(GL_ONE, GL_ONE);

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

GLSL：具有自定义着色器的ShaderMaterial不透明

1 个答案: