three.js render to texture alpha not working

0
votes

I am trying to render to a texture with alpha and render that texture on top of a scene. The texture's background is not transparent though, the clear color is rendered over the scene.

I created the renderer with alpha:true, the clear color has alpha 0, And the texture's format is RGBA

What am I missing?

//creating the texture
rtTexture = new THREE.WebGLRenderTarget( window.innerWidth, 
    window.innerHeight, { minFilter: THREE.LinearFilter, 
    magFilter: THREE.NearestFilter, format: THREE.RGBAFormat } );

//creating renderer
renderer = new THREE.WebGLRenderer({ alpha: true });
renderer.setSize( window.innerWidth, window.innerHeight );
renderer.autoClear = false;

//textured quad
var quad = new THREE.PlaneBufferGeometry(camSize,camSize/aspect);
var mat = new THREE.MeshBasicMaterial({map:rtTexture,
    depthWrite:false, depthTest: false});
var quadOb = new THREE.Mesh(quad, mat);

//rendering
renderer.setClearColor(0x000000, 0);
renderer.render(sceneTorus, camera, rtTexture, true);
renderer.render(sceneTet, cameraRTT, null, true);
renderer.render(sceneQuad, cameraRTT, null, false);
1
3dthree.jsalpharender-to-texture
Show your code and how you are using the texture. - WestLangley
You have provided only code snippets so I can only guess: Set quadOb.material.transparent = true;. - WestLangley
AHH that did it thank you :) I thought I had tried that but I did it on the wrong material. - zumba man

1 Answers

0
votes

quadOb.material.transparent = true;