macos - クロムのSVGバンディング

Question

Google Chrome（20）で深刻なバンディングの問題に気付いたとき、svgファイルを使用して滑らかなグラデーションを作成しています。クロームをシネマディスプレイに移動すると、さらに奇妙なことに、バンディングが著しく減少し、これがさらに奇妙になります。以下は、私のmbpのネイティブ画面（左）とシネマディスプレイ（右）にまたがるWebサイトで撮影されたシングルスクリーングラブ（フォトショップなし）です。 ご覧のとおり、左側のバンディングははるかに深刻です。見知らぬ人はまだサファリFFまたはie9でほぼゼロのバンディングがあります。以下は同じ状況ですが、FFで

ドライバーの問題などのように感じます。でも本当に知りたいです。ここで一体何が起こっているのですか？画面間で表示が大きく異なるのはなぜですか？両方のモニターで1つの画面を取得すると、このようなバリエーションが生じる可能性はありますか？

また、FFウィンドウのPOSITIONによってレンダリングが変更されることに気づきました。ウィンドウの半分以上がネイティブディスプレイにある場合、シネマ側にはバンディングがありますが、ネイティブ側にはありません。ウィンドウの半分以上がシネマディスプレイに表示されるようにウィンドウを移動すると、バンディングショーはシネマ側で消え、ネイティブ側に表示されます。これはサファリにも当てはまりますが、クロムにはこの動作がなく、バンディングは常にネイティブ側でより目立ち、シネマ側ではあまり目立ちません。

これは本当に私を奇妙にしています。一体何がここで起こっているのですか？

Answer 1

rgb(85,85,85)グラデーションの中心からrgb(28,28,28)角に移行しています。24 ビット RGB カラー スペース (8 ビット RGB スペース) では、この領域で表示できる固有のグレースケール カラーは 58 色のみです。

グラデーションの角から中心までの距離は、一番上の画像で約 520 ピクセルです。等間隔の場合、同じ色を少なくとも 9 ピクセル連続して表示する必要があることを意味します。ほとんどの人間は、特に色範囲の中間で、個々の 8 ビット グレーの色合いの違いを簡単に認識できます。

@Duopixel が正しく指摘しているように、グラデーションの 1 つがディザリングされ、これらの色間の遷移が柔らかくなります。興味深いことに、デュアル モニター テストでは、ディザリングされている帯域とそうでない帯域があります。これは、ハードウェア アクセラレーションが一方のモニターにのみ適用され、もう一方のモニターには適用されないことが原因である可能性があります。

10 ビットまたは 12 ビットのグレースケール モニターのようなもので失敗すると、これが得られる最良の結果になります。お使いのモニターとこのデザインでは、より良い結果を得ることは技術的に不可能です。

現在の 24 ビット カラー モニターで目立たなくしたい場合は、次のことができます。

• デザインを変更して、グラデーションに微妙な色の変化を導入します (例: 濃い青から灰緑へ)。これにより、異なる RGB チャネルのビットが異なるタイミングで遷移し、バンドがより小さな差別化された色に分割される可能性があります。

• デザインを変更してダイナミック レンジを広げ (例: 純粋な白から純粋な黒に)、より多くのカラー バーを使用できるようにします。

• 設計を変更して、グラデーションが発生する全体の距離を減らし、バンドの幅を減らします。

…または上記の組み合わせ。

Answer 2

モニターを切り替えるときに何が起こっているのかわかりません。

Firefox でバンディングが減少する理由は、ピクセルが次の色に飛び散り、ランダム化されるためです。帯状のグラデーションの上にぼかしを追加するようなものです。

おそらく、このズームインにより、より明確になります。

左がFirefox、右がWebkitです。Firefox はグラデーションのディザリングをサポートしているようですが、Webkit はサポートしていません。残念ながら、あなたができることはあまりありません。