ChromiumのSVG実装を読む
難しすぎて歯が立たなかったけど一応記録
SVG要素自体の実装はここにある
SVG内のその他の要素も同一ディレクトリ内にあり、JavaScript API定義としてWeb IDLファイルが置いてある
IDLから追うのが良さそう
getCTMやgetBBoxの実装
SVG Filterの実装
skiaに丸投げっぽい
描画周りここでは?
内部的にはcanvas?
このへんとかstroke引いてるところでわかりやすい
基本的な要素はAsPathという関数を実装することで図形をパスに変換している模様
矩形と楕円のみFastPathが入っている様子が見られる
やっぱりContextを取ってそこで描画っぽい
ここから先がSkia
Inline / Objectなどのモードにかかわらず全部ここに来るのかな?ちょっとわからない
もうないチームの資料みたいだけど、paint teamというところに描画周りの資料がまとまっている
全体のレンダリングの流れを理解する
See also:
下記の順序でレンダリングに関する処理が行われるらしい。
入力ハンドリング
Parsing: HTMLをDOMノードに変換する
Style: CSSをDOM上に解決する
Layout: DOM要素の相対的な位置を特定
Paint setup(またはレコーディング): 後で描画するために、レイヤ単位でスタイリング済みのDOM要素を描画コマンドの表示リスト(SkPicture)に変換する
SkPictureはSkiaのCanvasに対しての描画の命令を「レコーディング」したものらしい。API見るとplaybackとかある。
Painting, SkPictureの描画コマンドをビットマップのピクセルに変換(システムメモリ内、またはGaneshを使用している場合はGPU上)。
GaneshはGPUラスタライザの名前っぽい
Compositing, 最終的なスクリーンイメージに全レイヤを合成
ブラウザUIとの合成などの諸々
つまり、ChromiumがやるのはSVGのパースからPaint setupでSkPictureへの変換までらしい。
わからないこと
全部わからん、量が多い
上記理解で本当に正しいのか自信ない
っていうかSVGPaintServer is 何?
PreparePaintは何をしているのか。上記レンダリングパスでいうとどこにあたるのか
Skiaはどこまでやってるのか
renderより先のrasterは全部Skia?
Skiaから生えてるCanvas風のAPIをバックエンドにしているようなんだけど、Canvasより早いことがあるというのがわからん。最適化とかかかってるのかな
chromiumの読み方
rect要素が書かれるまで
paintの流れは下記にまとまっている
SVGShapePainter::Paint
ここから始まり
Path::AddRoundedRect
このpath.ccにはSkPathを作成する処理が全部書かれている
createPathで作成される
SkPath::addRRect
文字周り
SVGと直接関係しているわけではないが
グリフの描画はskia、カーニング等はHarfBuzzがやってるっぽい?
その他
というか思ったけど全然コード内にコメントないな、デザインドキュメントの方に詳しく書こうっていう方針なのかな?
paintMarkerみたいなのなんやねんって思ったらmarker要素なるものがあった、マジか
SVGマジなんなんだろうな
結局Skiaのことを深く知りたい気がする、というわけでSkia Debuggerを今後学びたい
参考