Three.js:渲染到纹理 (RenderTarget) alpha 不工作
Three.js: render to texture (RenderTarget) alpha not working
我正在尝试使用 alpha 渲染纹理并将该纹理渲染到场景之上。虽然纹理的背景不是透明的,但在场景上呈现出清晰的颜色。
我用 alpha:true 创建了渲染器,
清晰的颜色有 alpha 0,
纹理格式为 RGBA
我错过了什么?
//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);
quadOb.material.transparent = 真;
我正在尝试使用 alpha 渲染纹理并将该纹理渲染到场景之上。虽然纹理的背景不是透明的,但在场景上呈现出清晰的颜色。
我用 alpha:true 创建了渲染器, 清晰的颜色有 alpha 0, 纹理格式为 RGBA
我错过了什么?
//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);
quadOb.material.transparent = 真;