1

我正在尝试以某种方式组合纹理通道以保留 Alpha 通道。我已经尝试过或保证过。

  1. 渲染器的 alpha 设置为 true
  2. 具有许多不同 setClearColor 设置的渲染器。
  3. 效果通道使用的全屏四边形上的材质将透明度设置为 true
  4. 纹理实际上是透明的
  5. 我用于组合的着色器使用 Alpha 通道

如果您注释掉其他纹理/传递都正确绘制，我就是无法让 PNG1.png 与 gits.jpg 混合。

var width = window.innerWidth;
var height = window.innerHeight;
var updateFcts    = [];

var masterRenderer = new THREE.WebGLRenderer({
    alpha: true,
    autoClear: false
});
masterRenderer.setSize( window.innerWidth, window.innerHeight );
masterRenderer.setClearColor ( 0xFFFFFF, 1.0);
document.body.insertBefore( masterRenderer.domElement, document.body.firstChild);

var parameters = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat, stencilBuffer: false };
var renderTarget = new THREE.WebGLRenderTarget( width, height, parameters );
var masterComposer = new THREE.EffectComposer(masterRenderer, renderTarget);

var gitsTexture = THREE.ImageUtils.loadTexture( "images/gits.jpg" );
var pngTexture = THREE.ImageUtils.loadTexture( "images/PNG1.png" );

// declare passes
var passes = {};
passes.toScreen = new THREE.ShaderPass(THREE.CopyShader); passes.toScreen.renderToScreen = true;
passes.gitsTexturePass = new THREE.TexturePass(gitsTexture);
passes.gitsTexturePass.material.transparent = true;
passes.pngTexturePass = new THREE.TexturePass(pngTexture);
passes.pngTexturePass.material.transparent = true;

//add passes
masterComposer.addPass(passes.gitsTexturePass);
masterComposer.addPass(passes.pngTexturePass);
masterComposer.addPass(passes.toScreen);

// render the webgl

updateFcts.push(function(delta,now){
    masterComposer.render();
})


//////////////////////////////////////////////////////////////////////////////////
//      handle resize                           //
//////////////////////////////////////////////////////////////////////////////////

function onResize(){
    width = window.innerWidth;
    height = window.innerHeight;
    // notify the renderer of the size change
    masterRenderer.setSize( window.innerWidth, window.innerHeight );
    // update the camera
    camera.aspect   = window.innerWidth / window.innerHeight
    camera.updateProjectionMatrix();
    resizeFcts.forEach(function(resizeFn){resizeFn()})
}

window.addEventListener('resize', onResize, false)

//////////////////////////////////////////////////////////////////////////////////
//      loop runner                         //
//////////////////////////////////////////////////////////////////////////////////
var lastTimeMsec= null
requestAnimationFrame(function animate(nowMsec){
    // keep looping
    requestAnimationFrame( animate );
    // measure time
    lastTimeMsec    = lastTimeMsec || nowMsec-1000/60
    var deltaMsec   = Math.min(200, nowMsec - lastTimeMsec)
    lastTimeMsec    = nowMsec
    // call each update function
    updateFcts.forEach(function(updateFn){
        updateFn(deltaMsec/1000, nowMsec/1000)
    })
})
4

1 回答 1

0

解决方案：

您可以在渲染器构造函数中尝试 { premultipliedAlpha: false }，但如果这样做，您需要小心混合模式。

这条评论处理了我原来的问题。

我无法弄清楚我的问题到底出在哪里。我最好的猜测是，当使用 CopyShader 时，您的纹理会“预乘”。我找到了一种解决方法来实现我所追求的效果，方法是编写一个将乘以 alpha 的着色器。

    fragmentShader: [


    "uniform sampler2D tBase;",
    "uniform sampler2D tAdd;",
    "uniform float amount;",

    "varying vec2 vUv;",

    "void main() {",

        "vec4 t1 = texture2D( tBase, vUv );",
        "vec4 t2 = texture2D( tAdd, vUv );",
        "gl_FragColor = (t1 * (1.0 - t2.a))+(t2 * t2.a);",

    "}"

].join("\n")
于 2014-12-16T10:17:38.653 回答