Import texture from canvas behave differently on Firefox and Chrome

I’m trying to draw some non-ASCII text in a texture. Since TextGeometry could not display these text (it shows ? for these text), I’m using canvas to draw text and import it as texture. However, the imported texture was different in Chrome and Firefox.
Here’s a demo.
With Chrome 64-bit 72.0.3626.121, the text was upside down, while Firefox 64-bit 66.0b14 can show them correctly.

It is a bug, configuration error or wrong usage?

EDIT: Three.js r102, from

This is a bug in three.js but is going to be fixed with the next release (R103). Right now, there is a problem when the engine has to resize a texture. Setting texture.minFilter = THREE.LinearFilter; is a workaround for now. Or just use POT textures.

Here is the respective PR:


Thanks for answering. I use some browser detection tricks (99 ** 99 == Math.pow(99, 99), Chrome’s V8 returns false, Firefox returns true) and scale its y to -1 before.

1 Like

It works on Chrome, Firefox and Internet Explorer thanks.

But it doesn’t work on chrome mobile ! :frowning: (chrome app latest version)

since r103, fully working without any workaround on chrome + firefox (desktop + mobile)

1 Like