1

三角形をゆっくりと移動すると、ピクセルごとに移動します。アンチエイリアスを使用して Google Chrome の動きをスムーズにする方法はありますか?

例については、次を確認してください。

https://dl.dropbox.com/u/4571/musicope2/index.html

PS: この回答が webgl にも適用されるかどうか、および回答がまだ有効であるかどうか疑問に思いますか?:

Chrome Canvas でのサブピクセル レンダリング

4

1 に答える 1

3

あなたが正確に何を求めているのかわかりません。

で WebGL コンテキストを作成するときに、アンチエイリアスを要求できます。

gl = canvas.getContext("webgl", { antialias: true });

ただし、実際にアンチエイリアスを有効にするかどうか、およびどのレベルまで有効にするかはブラウザ次第です。たとえば、一部のブラウザーでは、ドライバーのバグにより、特定の GPU でアンチエイリアシングが許可されていません。

それ以外の場合は、キャンバスを大きなサイズに設定し、css を使用して小さなサイズで表示できます。ブラウザはおそらく GPU バイリニア フィルタリングを使用して結果を表示し、一種のアンチエイリアシングを提供します。そのためには、キャンバスのサイズを表示したいサイズの 2 倍に設定し、css を表示したいサイズに設定します。例：

desiredWidth = 640;
desiredHeight = 480;
canvas.width = desiredWidth * 2;
canvas.height = desiredHeight * 2;
canvas.style.width = desiredWidth + "px";
canvas.style.height = dsiredHeight + "px";
gl = canvas.getContext("webgl", { antialias: false });

これにより、キャンバスの drawingBuffer がページに表示されるサイズの 2 倍になり、おそらくアンチエイリアス処理されたように見えます。

于 2012-09-25T00:23:43.307 に答える