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

时间:2018-08-07 23:54:01

标签: three.js

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

以下是复制步骤:

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

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

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

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

很抱歉第一次没有这么精确,我们将不胜感激。

1 个答案:

答案 0 :(得分:0)

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

此外,您应该升级到最新的three.js(r95)

编辑:

我不确定您的确切期望是什么。.但是有许多不同的设置可以控制3种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