What is wrong with WebGL postprocessing backgrounds example?

When clearpass unchecked and camera rotate around sphere, it does not render correctly.
Can I render geometry correctly with just renderpass without clearpass?
webgl postprocessing backgrounds example
Screenshot_4

Normally, THREE.RenderPass has set its clear flag to true. This example sets it to false in order to demonstrate the usage of THREE.ClearPass. Check out this fiddle to see that no clear pass is needed if THREE.RenderPass clears it’s rendering destination.

https://jsfiddle.net/jhnqbwt4/

The use case of setting the clear flag to false is to render multiple times into the same rendering destination and retaining existing color information. It’s like sequentially drawing with multiple pens on a sheet of paper^^. If clearing is not done properly, strange artifacts can appear like in the demo.

2 Likes

So clearPass needed and clear have to set to false if I need to use renderPass with cubeTexturePass simulteniously?
If i just set clear to false it does not show cubeTexturePass with RenderPass simulteniously in this three.js examle.
It looks like RenderPass overwrite cubeTexturePass.
I’m trying to use renderPass with cubeTexturePass for dynamically changeable background to another background through opacity (or would be better create new topic?)

Thank you for explanation.

Um, I don’t think so since CubeTexturePass renders the city background. On top of that, RenderPass produces the sphere.

I mean this.
Screenshot_6

Yeah, this does not work. I’m afraid I do not understand why you commenting out this line…

Thank you. I will play with it myself and will ask in new topic with better explanation.