<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">There is an issue with some incorrect texture colours when loading a GLTF model via <code class="notranslate">GLTFLoader</code>  when <code class="notranslate">WebGLRenderer</code> is instantiated with <code class="notranslate">alpha</code> set to <code class="notranslate">true</code>.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<p dir="auto">Instantiate <code class="notranslate">WebGLRenderer</code> with <code class="notranslate">alpha</code> set to <code class="notranslate">false</code>.</p>
<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="import * as THREE from &quot;three&quot;;
import { GLTFLoader } from &quot;three/examples/jsm/loaders/GLTFLoader&quot;;

const renderer = new THREE.WebGLRenderer({
  // ...
  antialias: true,
  alpha: true // this is what causes the texture colour issue
});

const width = 1024;
const height = 768;
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, width / height, 0.1, 1000);

const ambientLight = new THREE.AmbientLight();
scene.add(ambientLight);

// Load model and add to scene
const loader = new GLTFLoader();
loader.load(&quot;model.gltf&quot;, (gltf) =&gt; {
  scene.add(gltf.scene);
});

// Render scene
(function render() {
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
})();"><pre class="notranslate"><span class="pl-k">import</span> <span class="pl-c1">*</span> <span class="pl-k">as</span> <span class="pl-c1">THREE</span> <span class="pl-k">from</span> <span class="pl-s">"three"</span><span class="pl-kos">;</span>
<span class="pl-k">import</span> <span class="pl-kos">{</span> <span class="pl-v">GLTFLoader</span> <span class="pl-kos">}</span> <span class="pl-k">from</span> <span class="pl-s">"three/examples/jsm/loaders/GLTFLoader"</span><span class="pl-kos">;</span>

<span class="pl-k">const</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">WebGLRenderer</span><span class="pl-kos">(</span><span class="pl-kos">{</span>
  <span class="pl-c">// ...</span>
  <span class="pl-c1">antialias</span>: <span class="pl-c1">true</span><span class="pl-kos">,</span>
  <span class="pl-c1">alpha</span>: <span class="pl-c1">true</span> <span class="pl-c">// this is what causes the texture colour issue</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">width</span> <span class="pl-c1">=</span> <span class="pl-c1">1024</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">height</span> <span class="pl-c1">=</span> <span class="pl-c1">768</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">scene</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">Scene</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-k">const</span> <span class="pl-s1">camera</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">PerspectiveCamera</span><span class="pl-kos">(</span><span class="pl-c1">75</span><span class="pl-kos">,</span> <span class="pl-s1">width</span> <span class="pl-c1">/</span> <span class="pl-s1">height</span><span class="pl-kos">,</span> <span class="pl-c1">0.1</span><span class="pl-kos">,</span> <span class="pl-c1">1000</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-k">const</span> <span class="pl-s1">ambientLight</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">AmbientLight</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">ambientLight</span><span class="pl-kos">)</span><span class="pl-kos">;</span>

<span class="pl-c">// Load model and add to scene</span>
<span class="pl-k">const</span> <span class="pl-s1">loader</span> <span class="pl-c1">=</span> <span class="pl-k">new</span> <span class="pl-v">GLTFLoader</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-s1">loader</span><span class="pl-kos">.</span><span class="pl-en">load</span><span class="pl-kos">(</span><span class="pl-s">"model.gltf"</span><span class="pl-kos">,</span> <span class="pl-kos">(</span><span class="pl-s1">gltf</span><span class="pl-kos">)</span> <span class="pl-c1">=&gt;</span> <span class="pl-kos">{</span>
  <span class="pl-s1">scene</span><span class="pl-kos">.</span><span class="pl-en">add</span><span class="pl-kos">(</span><span class="pl-s1">gltf</span><span class="pl-kos">.</span><span class="pl-c1">scene</span><span class="pl-kos">)</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">// Render scene</span>
<span class="pl-kos">(</span><span class="pl-k">function</span> <span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-kos">)</span> <span class="pl-kos">{</span>
  <span class="pl-s1">renderer</span><span class="pl-kos">.</span><span class="pl-en">render</span><span class="pl-kos">(</span><span class="pl-s1">scene</span><span class="pl-kos">,</span> <span class="pl-s1">camera</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
  <span class="pl-en">requestAnimationFrame</span><span class="pl-kos">(</span><span class="pl-s1">animate</span><span class="pl-kos">)</span><span class="pl-kos">;</span>
<span class="pl-kos">}</span><span class="pl-kos">)</span><span class="pl-kos">(</span><span class="pl-kos">)</span><span class="pl-kos">;</span></pre></div>
<p dir="auto"><strong>Live Demos</strong></p>
<table role="table">
<thead>
<tr>
<th>alpha: true</th>
<th>alpha: false</th>
</tr>
</thead>
<tbody>
<tr>
<td><a href="https://codesandbox.io/s/pedantic-cloud-vgppt?file=/src/index.js" rel="nofollow">https://codesandbox.io/s/pedantic-cloud-vgppt?file=/src/index.js</a></td>
<td><a href="https://codesandbox.io/s/dry-http-fdykp?file=/src/index.js" rel="nofollow">https://codesandbox.io/s/dry-http-fdykp?file=/src/index.js</a></td>
</tr>
</tbody>
</table>
<p dir="auto">Below is the output where <code class="notranslate">WebGLRenderer</code> has been instantiated with <code class="notranslate">alpha</code> set to <code class="notranslate">true</code> and <code class="notranslate">false</code></p>
<table role="table">
<thead>
<tr>
<th>alpha: true</th>
<th>alpha: false</th>
</tr>
</thead>
<tbody>
<tr>
<td><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5284715/116463928-36d3a200-a863-11eb-980e-d29320fbdad2.png"><img src="https://user-images.githubusercontent.com/5284715/116463928-36d3a200-a863-11eb-980e-d29320fbdad2.png" alt="" style="max-width: 100%;"></a></td>
<td><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5284715/116463976-48b54500-a863-11eb-8b8b-9000cccfa7d4.png"><img src="https://user-images.githubusercontent.com/5284715/116463976-48b54500-a863-11eb-8b8b-9000cccfa7d4.png" alt="image" style="max-width: 100%;"></a></td>
</tr>
</tbody>
</table>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">I believe setting the <code class="notranslate">alpha</code> to <code class="notranslate">true</code> or <code class="notranslate">false</code> shouldn't have an effect on how solid textures are rendered. The expected behaviour would be for textures to render consistently regardless of the alpha setting.</p>
<p dir="auto">Redundant AR button on Safari</p>
<p dir="auto">A clear and concise description of what the bug is. Before submitting, please remove unnecessary sections.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>Go to <a href="https://threejs.org/examples/?q=usdz#misc_exporter_usdz" rel="nofollow">'AR sample'</a></li>
<li>See 2 icon of AR overlaid</li>
</ol>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Single AR button</p>
<p dir="auto"><strong>Screenshots</strong></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: [Mobile]</li>
<li>OS: [iOS 15]</li>
<li>Browser: [Safari]</li>
<li>Three.js version: [main]</li>
</ul>