ThreeJS：白色PNG图像加载为纹理，用作材质并渲染为平面具有灰色边缘

Question

在 ThreeJS 版本 87 中渲染白色材质时遇到问题。

以下是复制的步骤：

1. 作为纹理加载的白色 PNG 图像
2. 此纹理用于创建 MeshBasicMaterial（作为参数贴图传递）
3. MeshBasicMaterial 用于沿平面几何体创建网格
4. Mesh 被添加到一个空场景并在 WebGLRenderer 上渲染，alpha: true 和 clearColor 为白色

问题是渲染的纹理现在在应该是全白的部分有灰色边缘。 任何带有白色边缘的图像都会发生这种情况。我还为渲染器和材质尝试了许多不同的配置，但无济于事。

我制作了一个非常简单的 CodePen，它可以尽可能简单地复制行为。有谁知道如何解决这个问题？

代码笔：

https://codepen.io/ivan-i1/pen/pZxwZX

var renderer, width, height, scene, camera, dataUrl, threeTexture, geometry, material, mesh;

width = window.innerWidth;
height = window.innerHeight;
dataUrl = '//data url from image';

threeTexture = new THREE.ImageUtils.loadTexture(dataUrl);

material = new THREE.MeshBasicMaterial({
  map: threeTexture,
  transparent: true,
  alphaTest: 0.1
});
material.needsUpdate = true;

geometry = new THREE.PlaneGeometry(5, 5);
mesh = new THREE.Mesh(geometry, material);
mesh.position.z = -5;

scene = new THREE.Scene();
scene.add(mesh);

camera = new THREE.PerspectiveCamera( 70, window.innerWidth / window.innerHeight, 1, 1000 );

renderer = new THREE.WebGLRenderer({
    alpha: true
});
document.body.appendChild( renderer.domElement );
renderer.setSize(width, height);
renderer.setClearColor( 0xffffff, 1 );

//renderer.render(scene, camera);
function render() {
  //Finally, draw to the screen
  requestAnimationFrame(render);
  renderer.render(scene, camera);
}
render();

非常感谢任何帮助。

ThreeJS/87

编辑：

我认为我的帖子不够精确。

这是原始的完整 alpha 图像： It might not show because its all white

这是在 4 个象限上具有不同透明度的同一张图像： This one too might not show because its all white

我得到了一个有用的答案，有人告诉我提高 alphaTest，但问题是这样做会消除图像中的透明部分，我需要保留这些部分。

这是带有更新图像并显示相同（但轻微）灰色边缘的 codepen 副本：

codepen

很抱歉第一次没有那么精确，任何进一步的帮助将更加感激。

Answer 1

将 alphaTest 设置为 0.9.. 或更高.. 观察改进。 您的星星纹理在星星外的区域呈灰色或黑色，这就是您看到灰色光晕的原因。您可以通过在图像编辑工具中用白色填充图像（但不更改 Alpha 通道）来修复它。

另外，你应该升级到最新的three.js (r95)

编辑：

我不确定您的确切期望是什么。但是有许多不同的设置可以控制 Alpha 混合在三个中。有renderer.premultipliedAlpha = true/false（默认为true）和material.transparent = true/false； material.alphaTest 是一个阈值，用于控制完全忽略 alpha 的级别。还有material.blending、.blendEquation、.blendEquation、.blendEquationAlpha、blendDst和blendSrc。等等等等。您可能需要阅读这些内容。

https://threejs.org/docs/#api/materials/Material

例如..这是你的纹理：

renderer.premultipliedAlpha = false;

注意纹理的一个象限上的黑色边框。

https://codepen.io/manthrax/pen/KBraNB