在做项目的时候,要做一个正片叠低的效果,当做完后发现一个不可思议的效果。图片边缘有描边,如下
最后在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时;效果如下:
(完全白色,看不见)
所以,我明白了,,虽然让面的原理还不是很懂,但经过正片叠低的算法,黑色会隐藏,白色会显示,这样就完美解决黑边的问题。