Three.js: nPOT textures can be swapped during the uploading process if the textures were already in Browser Cache.

Created on 22 Mar 2018 · 8Comments · Source: mrdoob/three.js

Description of the problem

nPOT textures can be swapped during the uploading process if the textures were already in Browser Cache.

Repeating of the problem

Open this link in Chrome on Android device.
Toilets must be bottom of screen, baths must be on top of screen.
Reload some page
Now bath and toilets mixed on both sides (or may be only baths, or only toilets)

Simple fix

Adding var _canvas in this line fixes it.

One more possible (unconfirmed) fix: use createImageBitmap on Image before doing the resize.

It seems that texImage2d somehow doesnt get update from that canvas in time.

Three.js version

[x] Dev

Browser

[x] Chrome
[ ] Firefox
[ ] Internet Explorer

OS

[ ] All of them
[ ] Windows
[ ] macOS
[ ] Linux
[x] Android
[ ] iOS

Hardware Requirements (graphics card, VR Device, ...)

Device: Huawei Nova
Android 7.0
Chrome 65.0.3325.109

Second Device: Meizu M2 Note
Android 5.1.1
Chrome 65.0.3325.109

Proofs

PC (as reference)

Mobile (Huawei Nova) (bug)
Mobile bug

Browser Issue

Source

eXponenta

👍3

Most helpful comment

Ok, they fixed it even before we reported, its a duplicate of https://github.com/mrdoob/three.js/issues/13379

ivanpopelyshev on 29 Mar 2018

🎉1 👍1

All 8 comments

Confirmed on my Moto G

looeee on 22 Mar 2018

It seems that texImage2d somehow doesn't get update from that canvas in time.

I'm not sure that is a three.js bug. When the call texImage2d() returns, WebGL ensures that you can reuse the given image/buffer without affecting the upload. If this is not the case, there is maybe a problem in the browser implementation.

BTW: I can't reproduce the error in Firefox (Android).

The implementation of makePowerOfTwo() was changed because it was not memory efficient to create a new canvas for each texture resize. So reintroducing var will also reintroducing the former memory related problems.