javascript - 在 three.js 中使用基本纹理 Material 时出现异常抗锯齿

Question

在下面的代码中，我设置了一个非常基本的场景，其中包含一个正交相机和一个作为纹理映射到平面几何体的 Canvas 。

我在透明 Canvas 上放了一些白色文本，如果我使用 canvas.toDataURL()，效果不存在。

但是，当我将 Canvas 内容作为纹理应用于 Material 并在超标准 2d 场景中渲染它时，一条黑线勾勒出我的文本，这可能是奇怪的抗锯齿现象发生的结果。在这个例子中，渲染器清除颜色、 Material 和文本都是纯白色。

这是一个截图:

var camera = new THREE.OrthographicCamera(window.innerWidth / - 2,
                                          window.innerWidth / 2, 
                                          window.innerHeight / 2, 
                                          window.innerHeight / - 2, 0, 10);

var scene = new THREE.Scene();

canvas = document.createElement('canvas');
canvas.width = 300;
canvas.height = 300;

var context = canvas.getContext('2d');

context.fillStyle = "white";
context.font = "bold 72px Arial";
context.fillText("Zibri", 50, 100);        

var texture = new THREE.Texture(canvas);
var geometry = new THREE.PlaneGeometry(canvas.width, canvas.height);

texture.needsUpdate = true;

var material = new THREE.MeshBasicMaterial({ color: 0xffffff, map: texture, transparent: true });
var mesh = new THREE.Mesh(geometry, material);

scene.add(mesh);

renderer = new THREE.WebGLRenderer({ antialias: false });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.setClearColor(0xffffff)

document.body.appendChild( renderer.domElement );

camera.lookAt(scene.position);
renderer.render(scene, camera);

Answer 1

我也一直在为这个问题而苦苦挣扎，WestLangley 的解决方案部分解决了这个问题，但使呈现的文本的抗锯齿边缘非常差。经过大量研究后，我提出了一个令我满意的解决方案，在此列出。

在绘制文本之前，用与文本相同的颜色填充 Canvas ，但将 alpha 设置为 0.01

context.fillStyle = 'rgba(255,255,255,0.01)';
context.fillRect(0,0,canvas.width,canvas.height);

然后使用 Material 的 alphaTest 属性丢弃这种不透明度的像素:

var material = new THREE.MeshBasicMaterial({
    color: 0xffffff,
    map: texture,
    transparent: true,
    alphaTest:0.01
});

最后，将纹理贴图的 premultiplyAlpha 值设置为 false:

texture.map.premultiplyAlpha = false;
texture.map.needsUpdate = true;