1

アルファ チャネルを保持する何らかの方法でテクスチャ パスを結合しようとしています。私はそれを試したり、保証したりしました。

  1. レンダラーのアルファは true に設定されています
  2. 多くの異なる setClearColor 設定を持つレンダラー。
  3. エフェクト パスで使用されるフルスクリーン クワッドのマテリアルは、透明度が true に設定されています。
  4. テクスチャは実際には透明です
  5. 組み合わせに使用しているシェーダーはアルファチャンネルを使用しています

他のものをコメントアウトすると、テクスチャ/パスはすべて適切に描画されます。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 を使用すると、テクスチャが「事前乗算」されることです。アルファの乗算を元に戻すシェーダーを作成することで、求めていた効果を実現するための回避策を見つけました。

    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 に答える