<p dir="auto"><strong>Set alphamap will make transparent material behind invisible</strong></p>
<p dir="auto">In the screenshot, an aphamap is applied on the pink patch and set the transparent = true. The blue patch also set transparent = true. It can be seen that the part of the blue patch that behind the pink patch is invisible. If the transparent = false (like purple patch), everything is fine.</p>
<p dir="auto"><strong>Screenshots</strong></p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/77861330/129310910-10715e2b-bbb7-4f2a-af29-226ac40b8033.png"><img src="https://user-images.githubusercontent.com/77861330/129310910-10715e2b-bbb7-4f2a-af29-226ac40b8033.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: [Desktop]</li>
<li>OS: [Windows]</li>
<li>Browser: [Chrome]</li>
<li>Three.js version: [dev]</li>
</ul>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">We (<a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/Jozain/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/Jozain">@Jozain</a> and myself) are currently implementing out-of-order transparency for ThreeJS for a project of ours.  We'd like to contribute it back.  We are implementing the method of Morgan Mcguire, Weighted-Blended Order Independent Transparency: <a href="http://casual-effects.blogspot.ca/2014/03/weighted-blended-order-independent.html" rel="nofollow">http://casual-effects.blogspot.ca/2014/03/weighted-blended-order-independent.html</a></p>
<p dir="auto">We are helped a lot by <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/arose/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/arose">@arose</a>'s example OIT code on which our stuff will be partially based, just our stuff will be designed into the core of Three.JS: <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="33441946" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/4814" data-hovercard-type="issue" data-hovercard-url="/mrdoob/three.js/issues/4814/hovercard" href="https://github.com/mrdoob/three.js/issues/4814">#4814</a></p>
<p dir="auto">Here is an proposed example of how to enable this mode:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="var renderer = new THREE.WebGLRendererer( .... );

// add new &quot;transparency&quot; variable to renderer to select the transparency rendering mode
//renderer.transparency = THREE.PaintersTransparency; // the current ThreeJS method, the painter's algorithm
renderer.transparency = THREE.OrderIndependentTransperancy; // the new OIT method"><pre class="notranslate"><span class="pl-k">var</span> <span class="pl-s1">renderer</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">WebGLRendererer</span><span class="pl-kos">(</span> ...<span class="pl-kos">.</span> <span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// add new "transparency" variable to renderer to select the transparency rendering mode</span>
<span class="pl-c">//renderer.transparency = THREE.PaintersTransparency; // the current ThreeJS method, the painter's algorithm</span>
<span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-c1">transparency</span> <span class="pl-c1">=</span> <span class="pl-c1">THREE</span><span class="pl-kos">.</span><span class="pl-c1">OrderIndependentTransperancy</span><span class="pl-kos">;</span> <span class="pl-c">// the new OIT method</span></pre></div>
<p dir="auto">This mode will be implemented by a new WebGLOrderIndependentTransparency class that will be responsible for managing the buffers.  It will create two additional RenderTargets that will track the size of the current render buffer.  The first will be the accumulation buffer which we will render all transparency objects to and then we will render the objects as well to some alpha product buffers - thus two separate renders.  This will be followed by a "resolve" stage that renders the transparent objects over top of the existing beauty render of the opaque objects.</p>
<p dir="auto">This workflow will work with base WebGL and work with multi-sample buffers as well.  It can obviously be speed up using multiple render targets, but this shouldn't be that slow for non-huge numbers of transparent objects.</p>
<p dir="auto">We are going to implement this now, just wanted to give a heads up as to our design so that if you have feedback on it, we can incorporate it now.</p>
<p dir="auto">/ping <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/WestLangley/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/WestLangley">@WestLangley</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/arose/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/arose">@arose</a> <a class="user-mention notranslate" data-hovercard-type="user" data-hovercard-url="/users/spidersharma03/hovercard" data-octo-click="hovercard-link-click" data-octo-dimensions="link_type:self" href="https://github.com/spidersharma03">@spidersharma03</a></p>