<h5 dir="auto">Description of the problem</h5>
<p dir="auto">nPOT textures can be swapped during the uploading process if the textures were already in Browser Cache.</p>
<h5 dir="auto">Repeating of the problem</h5>
<ul dir="auto">
<li>Open <a href="https://exponenta.github.io/ThreeJsBug/" rel="nofollow">this link</a> in Chrome on Android device.</li>
<li>Toilets must be bottom of screen, baths must be on top of screen.</li>
<li>Reload some page</li>
<li>Now bath and toilets mixed on both sides (or may be only baths, or only toilets)</li>
</ul>
<h5 dir="auto">Simple fix</h5>
<p dir="auto">Adding <code class="notranslate">var _canvas</code> in <a href="https://github.com/mrdoob/three.js/blob/dev/src/renderers/webgl/WebGLTextures.js#L59">this line</a> fixes it.</p>
<p dir="auto">One more possible (unconfirmed) fix: use <code class="notranslate">createImageBitmap</code> on Image before doing the resize.</p>
<p dir="auto">It seems that <code class="notranslate">texImage2d</code> somehow doesnt get update from that canvas in time.</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>
</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=""> 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"> 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"> macOS</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" checked=""> 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>
<p dir="auto">Device: Huawei Nova<br>
Android 7.0<br>
Chrome 65.0.3325.109</p>
<p dir="auto">Second Device: Meizu M2 Note<br>
Android 5.1.1<br>
Chrome 65.0.3325.109</p>
<h5 dir="auto">Proofs</h5>
<p dir="auto">PC (as reference)<br>
<a target="_blank" rel="noopener noreferrer" href="https://github.com/eXponenta/ThreeJsBug/raw/master/sreens/pc.jpg"><img src="https://github.com/eXponenta/ThreeJsBug/raw/master/sreens/pc.jpg" alt="PC" style="max-width: 100%;"></a></p>
<p dir="auto">Mobile (Huawei Nova) (bug)<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/eXponenta/ThreeJsBug/master/sreens/mobile1.png"><img src="https://raw.githubusercontent.com/eXponenta/ThreeJsBug/master/sreens/mobile1.png" alt="Mobile bug" style="max-width: 100%;"></a></p>
<p dir="auto">Mobile (Huawei Nova) (bug)<br>
<a target="_blank" rel="noopener noreferrer nofollow" href="https://raw.githubusercontent.com/eXponenta/ThreeJsBug/master/sreens/mobile2.png"><img src="https://raw.githubusercontent.com/eXponenta/ThreeJsBug/master/sreens/mobile2.png" alt="Mobile bug" style="max-width: 100%;"></a></p>
<p dir="auto">As reported in <a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="277095939" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/12763" data-hovercard-type="pull_request" data-hovercard-url="/mrdoob/three.js/pull/12763/hovercard?comment_id=364320372&amp;comment_type=issue_comment" href="https://github.com/mrdoob/three.js/pull/12763#issuecomment-364320372">#12763 (comment)</a>, we're currently updating the video texture at 60 (or 90 in VR) fps.</p>
<p dir="auto">Ideally we'll only update the texture on the GPU in sync with the video framerate (usually 25-30). Unfortunately the web platform does not provide any API for figuring out the framerate of a video so something like <code class="notranslate">videoTexture.frameRate = 25</code> is needed.</p>
<p dir="auto">It seemed easy enough so I tried to implement this (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="296523938" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/13304" data-hovercard-type="pull_request" data-hovercard-url="/mrdoob/three.js/pull/13304/hovercard" href="https://github.com/mrdoob/three.js/pull/13304">#13304</a>) but I hit some browser bugs and I had to revert (<a class="issue-link js-issue-link" data-error-text="Failed to load title" data-id="296555028" data-permission-text="Title is private" data-url="https://github.com/mrdoob/three.js/issues/13305" data-hovercard-type="pull_request" data-hovercard-url="/mrdoob/three.js/pull/13305/hovercard" href="https://github.com/mrdoob/three.js/pull/13305">#13305</a>).</p>
<p dir="auto">It'll be good to investigate this a bit more and report bugs to browsers if needed.</p>