canvas - 使用 Canvas 作为 three.js 纹理：文本未显示在特定大小之上

Question

我最近一直在尝试使用 three.js，但是当用作纹理的画布的大小高于 256x256 时，我遇到了一个问题。

这是一些示例代码，演示了正在发生的事情：http: //jsfiddle.net/sSD65/26/

请注意，当 时size = 256，画布及其内容正确地呈现在立方体的所有面上。时也是如此size < 256。

然而，一旦size > 256，画布的边界被渲染在立方体的所有面上，但文本却神秘地被遗漏了。

什么时候发生的例子：http size = 257: //jsfiddle.net/sSD65/27/

我只是不明白为什么画布的图形部分被渲染在立方体上而不是文本部分。

这是三个.js 中的错误，是画布问题还是（很可能）我很愚蠢？有任何想法吗？

Answer 1

这确实很奇怪。它看起来像 Chrome 端的一些纹理缓存/同步问题，在代码处理 2d 画布 => WebGL 纹理转换的某处。

如果在绘制文本后添加一些画布绘制操作，即使使用 257 像素大小的画布，它也会再次工作：

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

所以看起来发生的事情是画布大小> 256 Chrome 在渲染文本以​​创建 WebGL 纹理之前使用 2d 画布的状态。

我猜它会尝试为更大的画布优化 WebGL 纹理上传，并且没有为“context.fillText”操作正确设置一些“脏”标志。