<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">This appears to be the core issue behind <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="1034512293" data-permission-text="Title is private" data-url="https://github.com/google/model-viewer/issues/2915" data-hovercard-type="issue" data-hovercard-url="/google/model-viewer/issues/2915/hovercard" href="https://github.com/google/model-viewer/issues/2915">google/model-viewer#2915</a></p>
<p dir="auto">It seems that something about a recent materials change has caused shader compilation on my PC to take ~10x(!) longer than it used to. If I were to guess at why I'd say that it's probably the DirectX shader compiler hitting a pathological case that wasn't there before and trying to do an insane loop unroll or something of that nature.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>git checkout r132</li>
<li>Open examples/webgl_animation_keyframes.html</li>
<li>Observe load time</li>
<li>git checkout r133</li>
<li>Refresh examples/webgl_animation_keyframes.html</li>
<li>Observe (much longer) load time</li>
</ol>
<p dir="auto">With r132 I get the following recording from the performance tab in Chrome dev tools (though it's worth noting the same regression is also observable when using Firefox):</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/805273/139484874-de26dba4-16ab-4794-bd41-9c9b328d0201.png"><img width="884" alt="Screenshot 2021-10-29 113147" src="https://user-images.githubusercontent.com/805273/139484874-de26dba4-16ab-4794-bd41-9c9b328d0201.png" style="max-width: 100%;"></a></p>
<p dir="auto">You can see that the largest block of work on the main thread takes ~500ms. It bottoms out at a bunch of getProgramInfoLog calls and a couple of texImage2D calls that all take about 20-50ms.</p>
<p dir="auto">With r133 the recording looks significantly different. There are multiple calls to getProgramInfoLog that take ~150ms each and one particularly long one that takes 3+ seconds! In total, the block of work that represents to model's upload to the GPU takes nearly 5 seconds to complete, a 10x increase between versions (and consistent with what  was seeing.)</p>
<p dir="auto"><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/805273/139485848-3c228c54-2038-4cc2-bf63-b5834814e413.png"><img width="884" alt="Screenshot 2021-10-29 113654" src="https://user-images.githubusercontent.com/805273/139485848-3c228c54-2038-4cc2-bf63-b5834814e413.png" style="max-width: 100%;"></a></p>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: Desktop, Intel Core i7-10700K, Nvidia GTX 1660 Super</li>
<li>OS: Windows 11</li>
<li>Browser: Chrome Canary 97.0.4685.2, Firefox Nightly 95.0a1</li>
<li>Three.js version: r133</li>
</ul>
<p dir="auto"><strong>Describe the bug</strong></p>
<p dir="auto">The introduction of <code class="notranslate">SRGB8_ALPHA8</code> in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="999998796" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/22551" data-hovercard-type="pull_request" data-hovercard-url="/mrdoob/three.js/pull/22551/hovercard" href="https://github.com/mrdoob/three.js/pull/22551">#22551</a> improved the render quality of sRGB textures, but also added significant synchronous conversion times that block the main thread. Every sRGB texture adds to the total blocking time, resulting in a poor user experience, especially when the scene contains many textures.</p>
<p dir="auto"><strong>To Reproduce</strong></p>
<p dir="auto">Steps to reproduce the behavior:</p>
<ol dir="auto">
<li>Set <code class="notranslate">encoding</code> of any Uint8 RGBA texture to <code class="notranslate">sRGBEncoding</code>. (WebGL 2 context is required.)</li>
<li>Render a scene that uses the texture.</li>
<li>See the main thread being blocked for a noticeable period of time during the first frame.</li>
</ol>
<p dir="auto"><em><strong>Code</strong></em></p>
<p dir="auto">The following example loads a cube map and sets its encoding to <code class="notranslate">sRGBEncoding</code>:<br>
<a href="https://codesandbox.io/s/srgb8-alpha8-wv3jf?runonclick=1&amp;file=/index.js" rel="nofollow">https://codesandbox.io/s/srgb8-alpha8-wv3jf?runonclick=1&amp;file=/index.js</a></p>
<p dir="auto"><em><strong>Live example</strong></em></p>
<ul dir="auto">
<li><a href="https://wv3jf.csb.app/?linear" rel="nofollow">LinearEncoding (0.16 seconds blocking)</a> (Refresh to see small freeze)</li>
<li><a href="https://wv3jf.csb.app/" rel="nofollow">sRGBEncoding (1.49 seconds blocking)</a> (Refresh to see long freeze)</li>
</ul>
<p dir="auto">The blocking behaviour can also be observed in live examples that load GLTF models, such as <a href="https://threejs.org/examples/?q=gltf#webgl_loader_gltf" rel="nofollow">https://threejs.org/examples/?q=gltf#webgl_loader_gltf</a>.</p>
<p dir="auto"><strong>Expected behavior</strong></p>
<p dir="auto">Ideally, the main thread should not be blocked at all. Blocking time should at least be reduced as much as possible.</p>
<p dir="auto"><strong>Screenshots</strong></p>
<table role="table">
<thead>
<tr>
<th>With <code class="notranslate">LinearEncoding</code> or <code class="notranslate">sRGBEncoding</code> pre r133</th>
<th>With <code class="notranslate">sRGBEncoding</code> since r133</th>
</tr>
</thead>
<tbody>
<tr>
<td><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9214917/135754996-e35ea610-4ac2-4d7c-8884-0ca101353a8a.jpg"><img width="320" src="https://user-images.githubusercontent.com/9214917/135754996-e35ea610-4ac2-4d7c-8884-0ca101353a8a.jpg" style="max-width: 100%;"></a></td>
<td><a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/9214917/135754998-966cd217-45c8-487a-a0f3-b1895b836faf.jpg"><img width="320" src="https://user-images.githubusercontent.com/9214917/135754998-966cd217-45c8-487a-a0f3-b1895b836faf.jpg" style="max-width: 100%;"></a></td>
</tr>
<tr>
<td>Longest blocking time = 160 ms</td>
<td>Longest blocking time = 1496 ms</td>
</tr>
</tbody>
</table>
<p dir="auto"><strong>Platform:</strong></p>
<ul dir="auto">
<li>Device: Desktop</li>
<li>OS: Windows</li>
<li>Browser: Chrome, Brave, Firefox</li>
<li>Three.js version: r133</li>
</ul>