2

最近、three.js を試してみましたが、テクスチャとして使用されるキャンバスのサイズが 256x256 を超えると、ショー ストッパーが発生しました。

何が起こっているかを示すサンプルコードを次に示します: http://jsfiddle.net/sSD65/26/

size = 256の場合、キャンバスとそのコンテンツが立方体のすべての面で正しくレンダリングされることに注意してください。の場合も同様size < 256です。

ただし、すぐにsize > 256、キャンバスの境界線が立方体のすべての面にレンダリングされますが、テキストは不思議なことに除外されます。

次の場合に何が起こるかの例size = 257: http://jsfiddle.net/sSD65/27/

キャンバスのグラフィック部分が立方体にレンダリングされているのに、テキスト部分がレンダリングされていない理由がわかりません。

これは three.js のバグですか、キャンバスの問題ですか、それとも (ほとんどの場合) 私は愚かですか? 何か案は？

4

1 に答える 1

7

これは確かに奇妙です。2d キャンバスを処理するコードのどこかで、Chrome 側でテクスチャのキャッシュ/同期の問題が発生しているようです => WebGL テクスチャ変換。

テキストを描画した後にキャンバス描画操作を追加すると、257 ピクセル サイズのキャンバスでも再び機能します。

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

そのため、キャンバス サイズが 256 より大きい場合、Chrome は WebGL テクスチャを作成するためにテキストをレンダリングする前の 2D キャンバスの状態を使用しているようです。

大きなキャンバス用に WebGL テクスチャのアップロードを最適化しようとしていると思いますが、「context.fillText」操作に対して「ダーティ」フラグが正しく設定されていません。

于 2012-06-04T20:28:19.747 に答える