Question

我有一些代码可以根据地图绘制多维数据集。我想将立方体渲染为透明的背景，并通过传递alpha属性为此渲染器帐户：

//code is in a class, hence "this"
this.renderer = new THREE.WebGLRenderer({ antialias: true, alpha: true });
this.renderer.setPixelRatio( window.devicePixelRatio );
this.renderer.setSize(w, h);
this.renderer.gammaInput = true;

我意识到，当我不运行/渲染作曲家时，我得到了透明的背景，但是自然地，它并没有达到我想要的效果（例如，Volumetric Lights）。我认为它与RenderPass有关，因此我尝试摆弄它的属性（尤其是clearAlpha），并且我再次检查了作曲家使用RGBAFormat的方法，但是我什么也没做。这是作曲家的代码

 const { renderer, camera, scene } = this;
    const { innerWidth: w, innerHeight: h } = window;
    const scale = 0.5;
    this.occlusionRenderTarget = new THREE.WebGLRenderTarget( w * scale, h * scale);
    this.occlusionComposer = new THREE.EffectComposer(renderer, this.occlusionRenderTarget);
    this.occlusionComposer.addPass( new THREE.RenderPass(scene, camera));
    let occPass = new THREE.ShaderPass({
      uniforms: {
        tDiffuse: { value:null },
        lightPosition: { value: new THREE.Vector2(0.5, 0.5) },
        exposure: { value: 0.21 },
        decay: { value: 0.95 },
        density: { value: 0.1 },
        weight: { value: 0.7 },
        samples: { value: 50 }
      },
      vertexShader: this.getScriptContent('#shader-passthrough-vertex'),
      fragmentShader: this.getScriptContent('#shader-volumetric-light-fragment')
    });
    occPass.needsSwap = false;
    occPass.material.transparent = true;
    this.occlusionPass = occPass;
    this.occlusionComposer.addPass(occPass);
    //occPass.renderToScreen = true;
 this.composer = new THREE.EffectComposer( renderer );        //This composer seems to be stopping the transparent background
    let renPass = new THREE.RenderPass(scene, camera);

    renPass.clearColor = new THREE.Color(0, 0, 0);
    renPass.clearAlpha = 1;
    renPass.clear = true;
    this.composer.addPass(renPass);
    let addPass = new THREE.ShaderPass( {
      uniforms: {
        tDiffuse: { value:null },
        tAdd: { value: null }
      },
      vertexShader: this.getScriptContent('#shader-passthrough-vertex'),
      fragmentShader: this.getScriptContent('#shader-additive-fragment'),
      format: THREE.RGBAFormat
    } );

    addPass.uniforms.tAdd.value = this.occlusionRenderTarget.texture;
    addPass.material.transparent = true;
    this.composer.addPass(addPass);
    //addPass.renderToScreen = true;

如果我禁用了作曲器，则会得到以下渲染（注意：绿色是HTML元素的背景） https://media.discordapp.net/attachments/504008384790528001/542438516173438980/Composer_off.PNG?width=576&height=411

当我打开它时，它可以完美呈现，但是没有透明背景 https://media.discordapp.net/attachments/504008384790528001/542438770717229097/Composer_on.PNG?width=487&height=403 可以提供更大的代码段，并在必要时提供代码笔上的两个变体。请帮忙。预先感谢！

透明的作曲者效果立方体

0 个答案: