Question

I’ve been experimenting with three.js recently, but I’ve hit a show stopper that occurs when the size of a canvas that is used as a texture is above 256×256.

Here’s some example code that demonstrates what’s happening: http://jsfiddle.net/sSD65/26/

Notice that when size = 256, the canvas and its contents are rendered correctly on all faces of the cube. This is also the case when size < 256.

However, as soon as size > 256, the border of the canvas is rendered on all faces of the cube but the text is mysteriously left out.

Example of what happens when size = 257: http://jsfiddle.net/sSD65/27/

I just can’t understand why the graphical part of the canvas is being rendered on the cube but not the textual part.

Is this a bug in three.js, an issue with canvas or (most likely) am I being stupid? Any ideas?

Answer 1

This is odd indeed. It looks like some texture caching / syncing issue on Chrome side, somewhere in the code handling 2d canvas => WebGL texture conversion.

If you add some canvas drawing operation after drawing the text, it works again even with 257 pixel sized canvas:

http://jsfiddle.net/sSD65/28/

So it seems what’s going on is that with canvas size > 256 Chrome uses a state of 2d canvas from before rendering the text for creating WebGL texture.

I would guess it tries to optimize WebGL texture uploads for larger canvases and some “dirty” flag is not set properly for “context.fillText” operation.