正片叠低后图像边缘有白边

在做项目的时候,要做一个正片叠低的效果,当做完后发现一个不可思议的效果。图片边缘有描边,如下

正片叠低后图像边缘有白边_第1张图片

最后在webglRender中添加了该属性后, var renderer = new THREE.WebGLRenderer({premultipliedAlpha: false}) 后完美解决,解决后效果如下

正片叠低后图像边缘有白边_第2张图片

那么这个属性到底是干什么呢,,下面是我的一些理解:

premultipleliedAlpha 渲染器是否会假定颜色,预乘alpha,默认为true。

在源代码WebGLState.js中看到这样的代码后,但还是不理解,

setClear: function ( r, g, b, a, premultipliedAlpha ) {

if ( premultipliedAlpha === true ) {

  r *= a; g *= a; b *= a;


}

color.set( r, g, b, a );
经过测试对比,

材质如下


var material = new THREE.MeshBasicMaterial({
     color : 0xffffff,
     transparent:true,
     opacity : 1
});

当属性值为false时的效果如下

正片叠低后图像边缘有白边_第3张图片

当为true时;效果如下:

正片叠低后图像边缘有白边_第4张图片(完全白色,看不见)

所以,我明白了,,虽然让面的原理还不是很懂,但经过正片叠低的算法,黑色会隐藏,白色会显示,这样就完美解决黑边的问题。






你可能感兴趣的:(three.js)