<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">There is a problem with the EffectComposer in combination with a multisampled rendertargets.<br>
This combination produce artefacts when two or more passes like RenderPass or TexturePass are enabled.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>Use a Revision after following commit: <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/mrdoob/three.js/commit/b2ea47ac7a575032af050b43afb8f57478efc8b6/hovercard" href="https://github.com/mrdoob/three.js/commit/b2ea47ac7a575032af050b43afb8f57478efc8b6"><tt>b2ea47a</tt></a></li>
<li>Open examples/webgl_postprocessing_backgrounds.html</li>
<li>Modify the code</li>
<li>See error</li>
</ol>
<p dir="auto"><em><strong>Code</strong></em></p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="//Modify following Line:
composer = new EffectComposer( renderer );

//Change it to:
const renderTarget = new THREE.WebGLMultisampleRenderTarget( width, height );
//Or for newer threejs version
//const renderTarget = new THREE.WebGLRenderTarget( width, height, { samples: 1 } );
composer = new EffectComposer( renderer, renderTarget );"><pre class="notranslate"><span class="pl-c">//Modify following Line:</span>
<span class="pl-s1">composer</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">EffectComposer</span><span class="pl-kos">(</span> <span class="pl-s1">renderer</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">//Change it to:</span>
<span class="pl-k">const</span> <span class="pl-s1">renderTarget</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">WebGLMultisampleRenderTarget</span><span class="pl-kos">(</span> <span class="pl-s1">width</span><span class="pl-kos">,</span> <span class="pl-s1">height</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-c">//Or for newer threejs version</span>
<span class="pl-c">//const renderTarget = new THREE.WebGLRenderTarget( width, height, { samples: 1 } );</span>
<span class="pl-s1">composer</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">EffectComposer</span><span class="pl-kos">(</span> <span class="pl-s1">renderer</span><span class="pl-kos">,</span> <span class="pl-s1">renderTarget</span> <span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><em><strong>Live example</strong></em></p>
<ul dir="auto">
<li><a href="https://jsfiddle.net/th3s0urc3/dn4chvrf/" rel="nofollow">jsfiddle-v135-release</a></li>
<li><a href="https://jsfiddle.net/th3s0urc3/nrbjqp96/" rel="nofollow">jsfiddle-dev</a></li>
</ul>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">In v134 everything works as expected:</p>
<ul dir="auto">
<li><a href="https://jsfiddle.net/th3s0urc3/t5mjb367/" rel="nofollow">jsfiddle-v134-release</a></li>
</ul>
<p dir="auto"><strong>Screenshots</strong></p>
<p dir="auto">v135 with WebGLMultisampleRenderTarget - Chrome:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/11577704/157195079-6bf8d4da-f53e-4281-b182-731517034416.png"><img src="https://user-images.githubusercontent.com/11577704/157195079-6bf8d4da-f53e-4281-b182-731517034416.png" alt="Screenshot 2022-03-08 091558" style="max-width: 100%;"></a></p>
<p dir="auto">dev with WebGLRenderTarget and samples set to 1 - Chrome:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/11577704/157195545-093269b0-6bee-4410-8f44-8ad9a9d4fc25.png"><img src="https://user-images.githubusercontent.com/11577704/157195545-093269b0-6bee-4410-8f44-8ad9a9d4fc25.png" alt="Screenshot 2022-03-08 091730" style="max-width: 100%;"></a></p>
<p dir="auto">v135 with WebGLMultisampleRenderTarget - iOS Safari:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/11577704/157202642-1283142e-7fbc-40f3-829f-993484698326.jpg"><img src="https://user-images.githubusercontent.com/11577704/157202642-1283142e-7fbc-40f3-829f-993484698326.jpg" alt="photo_2022-03-08_09-31-33" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: [Desktop, Mobile]</li>
<li>OS: [Windows, Android, iOS]</li>
<li>Browser: [Chrome, Safari, Edge]</li>
<li>Three.js version: [dev, r135, <a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/mrdoob/three.js/commit/b2ea47ac7a575032af050b43afb8f57478efc8b6/hovercard" href="https://github.com/mrdoob/three.js/commit/b2ea47ac7a575032af050b43afb8f57478efc8b6"><tt>b2ea47a</tt></a> ]</li>
</ul>
<p dir="auto">Somehow mostof my EffectComposers, which use WebGLMultisampleRenderTargets, have become broken with v135.</p>
<p dir="auto">NOTE: this problem only occurs on windows. On my mac it is fine.</p>
<p dir="auto">You can see from the picture that things are pixelated. It seems to me that some render target isn't being cleared, whether it's color or depth I'm not sure yet.</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/699/144848438-ce7fe21b-67fd-4f39-becc-b7e506aa2059.png"><img src="https://user-images.githubusercontent.com/699/144848438-ce7fe21b-67fd-4f39-becc-b7e506aa2059.png" alt="Screenshot 2021-12-06 134538" style="max-width: 100%;"></a></p>
<p dir="auto">I have custom Passes, but even using having two vanilla RenderPasses triggers the problem</p>
<p dir="auto">I have narrowed it down to this commit using git bisect and (and rebuilding):</p>
<p dir="auto"><a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/mrdoob/three.js/commit/d16a6085ad632d46139f2de042d583d42d3d1deb/hovercard" href="https://github.com/mrdoob/three.js/commit/d16a6085ad632d46139f2de042d583d42d3d1deb"><tt>d16a608</tt></a></p>
<p dir="auto"><a class="commit-link" data-hovercard-type="commit" data-hovercard-url="https://github.com/mrdoob/three.js/commit/d16a6085ad632d46139f2de042d583d42d3d1deb/hovercard" href="https://github.com/mrdoob/three.js/commit/d16a6085ad632d46139f2de042d583d42d3d1deb"><tt>d16a608</tt></a></p>
<ul dir="auto">
<li>Device: [Desktop, Mobile]</li>
<li>OS: [Windows, MacOS, Linux, Android, iOS]</li>
<li>Browser: [Chrome, Firefox, Safari, Edge]</li>
<li>Three.js version: [dev, r???]</li>
</ul>