THREE.js transparency and EffectComposer

Question

알파 채널을 보존하는 텍스처 패스를 결합하려고합니다. 나는 그것을 시도했거나 확신했다.

1. 렌더러는 다양한 setClearColor 설정으로 진정한
2. 렌더러로 설정 알파가 있습니다.
3. 효과가 사용하는 전체 화면 쿼드의 재료는 투명성이 텍스처는
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) 
    }) 
}) 

Answer 1

솔루션 :

당신은 시도 할 수 : 렌더러 생성자 {premultipliedAlpha 거짓},하지만 당신은 그렇게 경우 블렌딩 모드에주의해야합니다.

이 메모는 내 원래의 문제를 처리했습니다.

---

정확히 어디에 문제가 있는지 알 수 없었습니다. My Best 추측은 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")