ikmnjrd.github.io

サブピクセルレンダリングってなんだ?

Posted on 2023-05-25

疑問に遭遇した状況

cssでtransformを使ったスタイリングが、なぜかWindows環境だけで見受けられるぼやけるという報告を受けて、ぼやっとキャンバスの最適化のページを見ていると次のような記述がありました。

キャンバスで整数以外の値を使用してオブジェクトを描画すると、サブピクセルレンダリングを実行します。 出典: 浮動小数点数値の座標を避けて整数を使用

サブピクセルレンダリングとは

wikipediaによると

サブピクセルレンダリング(Subpixel rendering)とは、液晶・有機ELモニタ上のピクセルを構成する三原色の発光源を、仮想的にそれぞれ一つのピクセルとみなして横方向に三倍の解像度を得る技術のことである。 アンチエイリアスの一種。 出典: サブピクセルレンダリング - Wikipedia

アンチエイリアスといえば、斜めにギザギザしたものをできるだけ真っ直ぐ見せるための技術と理解してる。
各種ブラウザ(とOSが協調している)はデフォルトでアンチエイリアスが効いている。
そしてCSSではfont-smoothというプロパティがある。

.something {
  -webkit-font-smoothing: antialiased; // auto | none | antialiased | subpixel-antialiased
  -moz-osx-font-smoothing: grayscale; // auto | grayscale
}

主にすでにかかったアンチエイリアスを効かせない方向に調整するためのもの。
要は綺麗に見せたい場合では、ブラウザとOSに任せるしかなく、transformを適用しすぎてジャギジャギのままになった箇所はtransformによるスタイリングをやめるほかないと思う。
試せていないが、遭遇したのは少数を含む指定だったので、transformを過剰に使ってもその指定が整数ならもしかするかもしれない(整数で済むような要件ならtransformを使っていない気がする)。

直接この答えになるような記事等は見つけられていないがMDNには次のような記述もある

CSS 座標変換は、 GPU を使用しますのでより高速です。もっともよいのは拡大縮小しないことですが、そうでなければ大きなキャンバスを縮小するよりも小さなキャンバスを拡大したほうが良好です。 出典: CSS 座標変換を使用してキャンバスを拡大縮小する

canvasと同一視するのはどうかとも思うが、大きく離れてもいなさそうだと思う私でした。

参考文献