<p dir="auto"><strong>Is your feature request related to a problem? Please describe.</strong></p>
<p dir="auto">Introduced here – <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="440453318" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/16390" data-hovercard-type="pull_request" data-hovercard-url="/mrdoob/three.js/pull/16390/hovercard" href="https://github.com/mrdoob/three.js/pull/16390">#16390</a>, WebGLMultipleRenderTargets extends WebGLMultipleRenderTarget which on the surface works, however when we came to create the .d.ts file – <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="904062224" data-permission-text="Title is private" data-url="https://github.com/three-types/three-ts-types/issues/85" data-hovercard-type="pull_request" data-hovercard-url="/three-types/three-ts-types/pull/85/hovercard" href="https://github.com/three-types/three-ts-types/pull/85">three-types/three-ts-types#85</a> we began to discuss how maybe this shouldn't be the case. Calling <code class="notranslate">WebGLMultipleRenderTargets.setTexture</code> would fail because you'd either have to supply an array which would break:</p>
<div class="highlight highlight-source-js notranslate position-relative overflow-auto" dir="auto" data-snippet-clipboard-copy-content="texture.image = {
	width: this.width,
	height: this.height,
	depth: this.depth
};"><pre class="notranslate"><span class="pl-s1">texture</span><span class="pl-kos">.</span><span class="pl-c1">image</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span>
	<span class="pl-c1">width</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">width</span><span class="pl-kos">,</span>
	<span class="pl-c1">height</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">height</span><span class="pl-kos">,</span>
	<span class="pl-c1">depth</span>: <span class="pl-smi">this</span><span class="pl-kos">.</span><span class="pl-c1">depth</span>
<span class="pl-kos">}</span><span class="pl-kos">;</span></pre></div>
<p dir="auto">see:<br>
</p><div class="Box Box--condensed my-2">
  <div class="Box-header f6">
    <p class="mb-0 text-bold">
      <a href="https://github.com/mrdoob/three.js/blob/d39d82999f0ac5cdd1b4eb9f4aba3f9626f32ab6/src/renderers/WebGLRenderTarget.js#L46">three.js/src/renderers/WebGLRenderTarget.js</a>
    </p>
    <p class="mb-0 color-fg-muted">
         Line 46
      in
      <a data-pjax="true" class="commit-tease-sha" href="/mrdoob/three.js/commit/d39d82999f0ac5cdd1b4eb9f4aba3f9626f32ab6">d39d829</a>
    </p>
  </div>
  <div itemprop="text" class="Box-body p-0 blob-wrapper blob-wrapper-embedded data">
    <table class="highlight tab-size mb-0 js-file-line-container" data-tab-size="8" data-paste-markdown-skip="">

        <tbody><tr class="border-0">
          <td id="L46" class="blob-num border-0 px-3 py-0 color-bg-default" data-line-number="46"></td>
          <td id="LC46" class="blob-code border-0 px-3 py-0 color-bg-default blob-code-inner js-file-line"> <span class="pl-s1">texture</span><span class="pl-kos">.</span><span class="pl-c1">image</span> <span class="pl-c1">=</span> <span class="pl-kos">{</span> </td>
        </tr>
    </tbody></table>
  </div>
</div>
<p></p>
<p dir="auto">Alternatively not passing an array of Textures, would break the <code class="notranslate">WebGLMultipleRenderTargets</code>.</p>
<p dir="auto"><strong>Describe the solution you'd like</strong></p>
<p dir="auto">Whilst I appreciate how helpful it is to extend a lot of the features already written in WebGLMultipleRenderTarget, maybe there should be a utility/base class that they both inherit from, this would reduce duplication (which is why we extend classes in the first place) and equally avoid the edge cases described above that will impact users.</p>
<p dir="auto"><strong>Additional context</strong></p>
<p dir="auto">For anyone interested, the <code class="notranslate">.d.ts</code> file will probably just duplicate the properties and methods included in <code class="notranslate">WebGLMultipleRenderTarget</code></p>
<p dir="auto">In <code class="notranslate">GLTFLoader</code> we can load standard materials using <code class="notranslate">StandardMaterial</code> .<br>
However, the alpha channel of its texture doesn't be handled properly, when renderer's alpha is activated.</p>
<p dir="auto">In <code class="notranslate">OPAQUE</code> or <code class="notranslate">MASK</code> material, alpha channels of texture should be negated:<br>
<a href="https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#alpha-coverage">https://github.com/KhronosGroup/glTF/tree/master/specification/2.0#alpha-coverage</a></p>
<p dir="auto">Change the material's blend mode to ZERO-ONE (in GLTFLoader) might solve this problem?</p>
<p dir="auto">This is how it should be (rendered in Unity):</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7824814/50501529-30b73600-0a9c-11e9-9a4d-ef35f3c785e1.png"><img src="https://user-images.githubusercontent.com/7824814/50501529-30b73600-0a9c-11e9-9a4d-ef35f3c785e1.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Here's how it looks like in Three.js GLTFLoader:</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/7824814/50501707-8b04c680-0a9d-11e9-80dd-a68189f90156.png"><img src="https://user-images.githubusercontent.com/7824814/50501707-8b04c680-0a9d-11e9-80dd-a68189f90156.png" alt="default" style="max-width: 100%;"></a></p>
<p dir="auto">This is the source code:<br>
<a href="https://github.com/FMS-Cat/cube-gradient-alpha">https://github.com/FMS-Cat/cube-gradient-alpha</a></p>
<h3 dir="auto">Environment:</h3>
<ul dir="auto">
<li>Three.js version: <strong>r99</strong></li>
<li>Browser: Confirmed in <strong>Chrome, Firefox, Edge</strong></li>
<li>OSes: <strong>Windows</strong>. Has not tested in other env</li>
<li>Hardware: <strong>Probably no requirements</strong></li>
</ul>