Question

我试图将一些具有透明度的图形渲染到WebGLRenderTarget中。然后将渲染图像用作第二材料的纹理。

我有alpha混音的问题。我在alpha = 0.5时获得的颜色比预期的颜色更深。

下图显示了问题：

圈顶是我的期望。这是通过具有圆角和不透明度= 0.5
底部的圆圈是我使用着色器获得的结果，该着色器将圆圈呈现在纹理内。

我认为我错过了一些东西！

部分代码报告如下。您可以在以下jsbin中找到完整的代码：https://jsbin.com/zukoyaziqe/1/edit?html,js,output

感谢您的帮助!!

着色器：

const texFrag = `
varying vec2 vUv;
void main() {
  vec2 center = vec2(0.5, 0.2);
  float d = length(vUv - center);

  if (d < 0.1) {
    gl_FragColor = vec4(1.0,0.0,1.0,0.5);
  }
  else {
    discard;
  }
}
`;

质地：

const makeTexture = (renderer, width, height) => {
  const target   = new THREE.WebGLRenderTarget(width, height, {minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, type: THREE.FloatType});
  const scene    = new THREE.Scene();
  const camera   = new THREE.PerspectiveCamera(90, 1, 0.1, 100000);
  const geometry = new THREE.PlaneGeometry(2, 2);
  const material = new THREE.ShaderMaterial({
    transparent    : true,
    vertexShader   : simpleVert,
    fragmentShader : texFrag,
  });
  const mesh = new THREE.Mesh(geometry, material);

  camera.position.set(0, 0, 1);
  scene.add(camera);
  scene.add(mesh);

  renderer.render(scene, camera, target, true);

  return target.texture;
}

主要观点：

const renderer = new THREE.WebGLRenderer({canvas});
const scene    = new THREE.Scene();
const camera   = new THREE.PerspectiveCamera(90, 1, 0.1, 100000);
const geometry = new THREE.PlaneGeometry( 2, 2 );
const material = new THREE.MeshBasicMaterial({
  transparent : true,
  map         : makeTexture(renderer, canvas.width, canvas.height)
});
const mesh = new THREE.Mesh(geometry, material);

Answer 1

首先，在您链接的示例中，您的main函数被调用两次，因此有两个CSS圆圈堆叠在一起，导致圆圈不太透明。

然后，您在空白渲染目标上绘制一个颜色为（1,0,1,0.5）的圆圈，使用默认混合模式（SRC_ALPHA，ONE_MINUS_SRC_ALPHA），得到（0.5,0， 0.5,0.5）颜色，然后用作纹理。如果要在纹理中使用原始颜色，则应禁用Alpha混合或使用其他混合模式。只需在transparent内设置false到makeTexture即可。

具有Alpha通道的THREE.WebGLRenderTarget中的颜色比预期的更暗

1 个答案: