Import texture from canvas behave differently on Firefox and Chrome

Questions
1

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.
https://jsfiddle.net/SGKoishi/p2Lcy6tb/1/
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 https://cdnjs.cloudflare.com/ajax/libs/three.js/102/three.js

2

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.

https://jsfiddle.net/tne10h3o/

Here is the respective PR:

2 Likes
3

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
4

It works on Chrome, Firefox and Internet Explorer thanks.

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

5

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

1 Like