I am attempting to blend texture passes in a way that preserves the alpha channel. I have experimented with several methods to achieve this.
- The renderer has the alpha property set to true.
- Renderer with various setClearColor settings.
- The material on the full-screen quad used by the effect passes has transparency enabled.
- The textures are indeed transparent.
- The shaders being used for blending utilize the alpha channel.
All the textures and passes draw correctly when individually commented out, but I am facing difficulty getting PNG1.png to properly blend over 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)
})
})