ChromiumのSVG実装を読む
難しすぎて歯が立たなかったけど一応記録
SVG要素自体の実装はここにある
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/svg/svg_svg_element.cc?sq=package:chromium&dr=CSs&g=0
SVG内のその他の要素も同一ディレクトリ内にあり、JavaScript API定義としてWeb IDLファイルが置いてある
IDLから追うのが良さそう
getCTMやgetBBoxの実装
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/svg/svg_graphics_element.cc?gsn=SVGGeometryElement&g=0&l=35
SVG Filterの実装
skiaに丸投げっぽい
https://github.com/google/skia/tree/fd98c2c8716435fd630ea6d746d9cb6009fd93e3/src/effects/imagefilters
描画周りここでは?
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/svg_shape_painter.cc?dr=CSs&g=0
内部的にはcanvas?
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/svg_shape_painter.cc?dr=CSs&g=0&l=127
このへんとかstroke引いてるところでわかりやすい
基本的な要素はAsPathという関数を実装することで図形をパスに変換している模様
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/svg/svg_circle_element.cc?gsn=StrokeShape&g=0&l=61
矩形と楕円のみFastPathが入っている様子が見られる
やっぱりContextを取ってそこで描画っぽい
ここから先がSkia
Inline / Objectなどのモードにかかわらず全部ここに来るのかな?ちょっとわからない
もうないチームの資料みたいだけど、paint teamというところに描画周りの資料がまとまっている
https://www.chromium.org/teams/paint-team
全体のレンダリングの流れを理解する
See also:
https://docs.google.com/presentation/d/1boPxbgNrTU0ddsc144rcXayGA_WF53k96imRH8Mp34Y/edit#slide=id.g28a69a47b7_0_18
https://www.chromium.org/developers/the-rendering-critical-path
下記の順序でレンダリングに関する処理が行われるらしい。
入力ハンドリング
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 何?
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/svg_object_painter.cc?q=SkPicture+svg&dr=CSs&l=38
PreparePaintは何をしているのか。上記レンダリングパスでいうとどこにあたるのか
Skiaはどこまでやってるのか
renderより先のrasterは全部Skia?
Skiaから生えてるCanvas風のAPIをバックエンドにしているようなんだけど、Canvasより早いことがあるというのがわからん。最適化とかかかってるのかな
chromiumの読み方
https://qiita.com/edwardkenfox/items/07200bdb7c15df7b23f9
rect要素が書かれるまで
paintの流れは下記にまとまっている
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/README.md?dr=CSs&g=0
SVGShapePainter::Paint
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/svg_shape_painter.cc?dr=CSs&g=0&l=44
ここから始まり
Path::AddRoundedRect
https://cs.chromium.org/chromium/src/third_party/blink/renderer/platform/graphics/path.cc?dr=CSs&g=0&l=441
このpath.ccにはSkPathを作成する処理が全部書かれている
createPathで作成される
SkPath::addRRect
https://cs.chromium.org/chromium/src/third_party/skia/src/core/SkPath.cpp?dr=CSs&g=0&l=1190
https://cs.chromium.org/chromium/src/third_party/blink/renderer/core/paint/svg_shape_painter.cc?gsn=StrokeShape&l=197
文字周り
SVGと直接関係しているわけではないが
グリフの描画はskia、カーニング等はHarfBuzzがやってるっぽい?
https://github.com/google/skia/blob/master/site/user/tips.md#does-skia-shape-text-kerning
その他
というか思ったけど全然コード内にコメントないな、デザインドキュメントの方に詳しく書こうっていう方針なのかな?
paintMarkerみたいなのなんやねんって思ったらmarker要素なるものがあった、マジか
http://defghi1977.html.xdomain.jp/tech/svgMemo/svgMemo_07.htm
SVGマジなんなんだろうな
結局Skiaのことを深く知りたい気がする、というわけでSkia Debuggerを今後学びたい
参考
https://www.html5rocks.com/ja/tutorials/internals/howbrowserswork/#The_rendering_engine
Chromium