3

我尝试在这样的球体上绘制纹理：

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 实现这一点？

谢谢

4

1 回答 1

1

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

 glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

而添加剂用途：

  glBlendFunc(GL_ONE, GL_ONE);

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

于 2013-10-11T17:09:01.823 回答