<p dir="auto">I've recently did a profile of my project, haven't done that in 4-5 months, since then three.js version has been upgraded several times. Currently on <code class="notranslate">0.132.2</code></p>
<p dir="auto">So, profile shows up that <code class="notranslate">getProgramCacheKey</code> takes up close to 20% of the entire time:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5939063/132960860-3f9515fa-c08b-4301-ae20-0b75ce0b45e9.png"><img src="https://user-images.githubusercontent.com/5939063/132960860-3f9515fa-c08b-4301-ae20-0b75ce0b45e9.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">For a bit more context, this is in the scope of the entire game, with particle simulation, IK, sound and a bunch of other stuff going on. Not just pure rendering. Here's a screenshot of what's being rendered:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5939063/132960916-5ed6cb6a-2b72-47e0-bab1-5807cebc23e2.png"><img src="https://user-images.githubusercontent.com/5939063/132960916-5ed6cb6a-2b72-47e0-bab1-5807cebc23e2.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">Here's the <code class="notranslate">WebGLRenderer.info</code>:<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://user-images.githubusercontent.com/5939063/132960939-ab48901f-5918-46e8-b32d-af5a174fd977.png"><img src="https://user-images.githubusercontent.com/5939063/132960939-ab48901f-5918-46e8-b32d-af5a174fd977.png" alt="image" style="max-width: 100%;"></a></p>
<p dir="auto">If you have a look at the cache key computation code, there's a lot wrong there. It's building an array of strings, that's a lot of allocation, and then there's <code class="notranslate">array.join()</code> which results in another string being created. All of that, just to throw the result away in the end (since no new materials are created during profiling period).</p>
<p dir="auto">I propose offering an override for the cache keys, or building keys in a way that avoids much of the allocation effort. Also, doing equality check on material against what's already cached can be done without materializing this "cache key" at all. I understand that it's "simple" to do what's currently being done, and I understand that doing what I propose is less easy, but we're talking about 20% of the CPU time being wasted on an application that's hardly pure rendering.</p>
<p dir="auto">As an alternative - perhaps offer an override for cache key computation, something like "customComputeMaterialCacheKey", that would be dirty, but it would allow users like me to work around the issue.</p>
<p dir="auto">(*** This section is for bug reports and feature requests only. This is NOT a help site. Do not ask help questions here. If you need help, please use stackoverflow. ***)</p>
<h5 dir="auto">Description of the problem</h5>
<p dir="auto">As far as I understand, UVs cannot currently be applied by polygon-vertex and must be applied directly to the vertex.  This creates issues with UV-unwrapping objects because the object must be unwrapped into one 2-D mesh rather than being able to split it into multiple parts, and the seams must have duplicated vertices to avoid wrapping issues at the seams.</p>
<p dir="auto">I'm not 100% sure if it's possible to use two separate buffers for vertices and UVs and use separate indices to both in the Geometry Face, or if we are limited to only using one index for every buffer.  It's not as big of an issue for things like normals, but it becomes an issue with UVs.  If it's not possible to generate geometry buffers like so, then the loaders need to duplicate the vertices if there is data applied per face rather than per vertex, which is gonna be a large and annoying change, but a necessary one if there is no other option.  Wanted to open a dialogue about this and determine the best way to approach this issue.</p>
<h5 dir="auto">Three.js version</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> Dev</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> r82</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> ...</li>
</ul>
<h5 dir="auto">Browser</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Chrome</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Firefox</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Internet Explorer</li>
</ul>
<h5 dir="auto">OS</h5>
<ul class="contains-task-list">
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox" checked=""> All of them</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Windows</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Linux</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> Android</li>
<li class="task-list-item"><input type="checkbox" id="" disabled="" class="task-list-item-checkbox"> IOS</li>
</ul>
<h5 dir="auto">Hardware Requirements (graphics card, VR Device, ...)</h5>