Followed troubleshooting, still receiving black screens :/

[davidpuetter]

Hey, sorry to bother with probably a stupid issue.

I'm attempting to add this library to my project and try to render literally any effect I can but all of them render a black screen. If I just render the RenderPass then it displays just fine, but as soon as I pass any sort of control over to any EffectPass, the screen renders black and the console outputs a whole bunch of OpenGL warnings/errors;

localhost/:1 [.WebGL-0000023AB34E7FF0]RENDER WARNING: texture bound to texture unit 0 is not renderable. It maybe non-power-of-2 and have incompatible texture filtering.
localhost/:1 [.WebGL-0000023AB34E7FF0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glClear: framebuffer incomplete
localhost/:1 [.WebGL-0000023AB34E7FF0]GL ERROR :GL_INVALID_FRAMEBUFFER_OPERATION : glDrawArrays: framebuffer incomplete

I can confirm that my THREE.js version is r103 and postprocessing is at v6.1.1.

My code is as follows:

const composer = new pp.EffectComposer(tRenderer);

const renderPass = new pp.RenderPass(common.THREEstage, tCamera);
const outlineEffect = new pp.OutlineEffect(common.THREEstage, tCamera, {
	edgeStrength: 10,
	pulseSpeed: 0,
	visibleEdgeColor: 0xFFFFFF,
	hiddenEdgeColor: 0x0,
	blur: false,
	xRay: true
});

const outlinePass = new pp.EffectPass(tCamera, outlineEffect);
composer.addPass(renderPass);
composer.addPass(outlinePass);

renderPass.renderToScreen = false;
outlinePass.renderToScreen = true;

and later down the file I render like so:

composer.render(clock.getDelta());

I've attempted to change the order of the code a billion times to match with examples and stuff but all effects still render a black screen.

[vanruesc]

Hi,

your code looks fine to me. Are you loading any models? If so, does the error also occur without them?

Please check if the following example works for you:
https://jsfiddle.net/u5d7keby/

[davidpuetter]

Hi, thanks for getting back so quick!
The fiddle works fine!
I am loading models yeah. I also tried loading an empty scene using const test = new THREE.Scene(); and adding nothing, but the errors persist. Adding just a simple box doesn't work, either.

[vanruesc]

Alright, the models should be fine then and there doesn't seem to be a hardware problem.

Try to modify the fiddle little by little to match your setup until the fiddle breaks.

[vanruesc]

Closing due to inactivity.

[RMDern]

I'm also having this issue where switching off one RenderPass and switching on another produces a black screen. I've tried different orders of operations with pass.enabled and pass.renderToScreen but can't seem to resolve the issue. As I continuously swap back and forth, only one of the render passes works, and the other is consistently a black screen. I have tested each render pass in isolation, without performing any changes at runtime, and they both work.

Here's my code:

    // Create a postprocessing EffectComposer to setup render pass chain
    composer = new P.EffectComposer(renderer);

    // Add two render passes to the composer: 
    // One with blur, one without.
    blurPass = new P.BlurPass();
    renderPass = new P.RenderPass(scene, camera);
    blurPass.initialize();
    renderPass.initialize();
    composer.addPass(renderPass);
    composer.addPass(blurPass);
    renderPass.enabled = true;
    renderPass.renderToScreen = true;
    blurPass.enabled = false;
    blurPass.renderToScreen = false;

Then, I periodically trigger the RenderPass to swap using the following function:

function toggleRenderPass() {
    renderPass.renderToScreen = !renderPass.renderToScreen;
    blurPass.renderToScreen = !blurPass.renderToScreen;
    renderPass.enabled = !renderPass.enabled;
    blurPass.enabled = !blurPass.enabled;
}

And my render function:

const render = () => {
        requestAnimationFrame(render);
        composer.render(clock.getDelta());
    };
    render();

[EricEisaman]

I think these diffs might account for the breakage.

mrdoob/three.js@85f911f

[vanruesc]

@RMDern I only see one RenderPass in the code you've posted. If you want to blur your scene every other frame, you can do it like this:

blurPass.enabled = !blurPass.enabled;
renderPass.renderToScreen = !blurPass.enabled;

Here's an example: https://jsfiddle.net/jkc5hxz6/

@EricEisaman I don't know what breakage you're talking about. To my knowledge, there's no bug in the postprocessing library that would cause black screens. If you're facing such a problem, please create a minimal example that demonstrates the breakage, preferably in a new issue.

[RMDern]

@vanruesc Correct, there is only one RenderPass, the other is the BlurPass. From my understanding of the docs, they both are subclasses of Pass and should function mostly the same. RenderPass being a vanilla render, BlurPass having additional parameters to apply a blur. Putting them both in the same EffectComposer and only having one enabled at a time should give the desired effect, no? They each work that way in isolation, the switching causes the black screen.

[vanruesc]

I see now where the confusion is coming from. Let me try to clarify:

The Pass class is just an abstract base class that implements no particular render logic. The BlurPass is a specialized utility pass that blurs the input buffer; it operates on whatever input data comes its way. In the example that I posted earlier, it blurs the scene colors that are rendered by the preceding RenderPass.

The RenderPass is the only pass that renders typical scenes. If you set its renderToScreen flag to true, then that marks the end of your effect chain, at least in terms of visual output on screen. In other words, the pass won't render anything to the internal buffer and subsequent passes will receive no input colors (the buffers will be empty or completely black).

It may seem weird that it's possible to cut your effect chain short like that, but there are use cases where you may have passes at the end of the chain that don't require input colors.

If you want to render two different scenes, you'll need to create two RenderPass instances.

I hope this clears things up a bit. If you have more questions, feel free to ask.

[RMDern]

@vanruesc Thank you for the clarification! I acutally just resolved my issue based on the code you provided above:

blurPass.enabled = !blurPass.enabled;
renderPass.renderToScreen = !blurPass.enabled;

Changing my toggleRenderPass() function to include only that code produced the effect I was looking for. I was unaware that the render chain would be cut short like that.