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

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


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


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

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

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

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

if ( premultipliedAlpha === true ) {

  r *= a<span style="color:#cc7832;">; </span>g *= a<span style="color:#cc7832;">; </span>b *= a<span style="color:#cc7832;">;


}

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

材质如下

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

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


当为true时;效果如下:

(完全白色,看不见)

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






猜你喜欢

转载自blog.csdn.net/mxclsh/article/details/89146453