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 
});

これは問題なく機能しますが、アルファ値を変更してもテクスチャは透明ではありません。私のテクスチャからの透明なピクセルはただの黒です。

しかし、baseColor.a = 0.0 と書くと、テクスチャは見えなくなりますが、シーンの背後にあるものも見えなくなります。どういうわけかテクスチャと背景を混ぜ合わせていないと思いますか？

three.jsでGLSLを使用してこれを達成するにはどうすればよいですか?

ありがとう

4

1 に答える 1

1

THREE.js がフードの下でどのように機能するかはわかりませんが、ブレンディングを加算的に設定しているように見えます。それはアルファブレンディングに必要なものではありません。アルファ ブレンディングでは、次の関数を使用します。

 glBlendFunc (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA);

添加剤の使用中：

  glBlendFunc(GL_ONE, GL_ONE);

そのため、必ず最初のものを使用し、実際にテクスチャが RGBA の A コンポーネントとしてアルファ チャネルを持っていることを確認してください。

于 2013-10-11T17:09:01.823 に答える