1. Moz2D
@makoto_kato

2. About
• Working
at Mozilla Japan
• 最近やってるもの
• ECMA-402等のためのlibicuインテグレーション
• string
compare by locale
• Electrolysis
• OS
Integration

3. 今日の話

4. Why is gfx important?
• 各プラットフォーム間の差異
• パフォーマンス
• ハードウェア利用

5. Gfx on Rendering Engine
• Firefox
• cairo
/ Gecko
/ Moz2D (a.k.a. Azure)
• Chromium
/ Blink
• skia
• WebKit
• cairo
/ chromium/skia / Core Graphics / Qt / etc

6. Terminology for gfx
• Core
Graphics
• OSX
• Direct
API (and iTunues for Windows?)
2D
• Windows
(Vista + Update / 7+)以降で使える2D API
• OpenGL
• クロノスグループで定義している3D
API

7. Terminology for gfx
• Cairo
(by RedHat, Intel and etc)
• GTK等で利用されている2D
API
• 様々なバックエンドを持つ
• Skia
(by Google)
• AndroidやChromiumで利用されている2D
API
• オプションとしてOpenGLバックエンドを利用可能

8. Terminology for Gecko’s gfx
• Thebes
• 現在も使われているグラフィック
API (Gecko 1.9 /
Firefox 3から採用)
• Moz2D
(Azure)
• 新しい2D
API (Gecko 7から採用)
• Layers
• “Compositor”
(animation / color conversion and etc)

9. Terminology for Gecko’s gfx
• OMTC
• Off
Main Thread Compositing
• APZC
• Async
Pan/Zoom Controller

10. History of Gecko’s gfx
• Gecko
-1.8 (Firefox -2)
• 各プラットフォームごとネイティブAPIを利用
• Gecko
1.9 (Firefox 3)
• Thebes
(cairo) を利用してプラットフォームの差異を吸
収
• Gecko
2.0+ (Frefox 4)
• cairoにDirect2Dバックエンドを追加して高速化

11. History of Gecko’s gfx
• Gecko
7+
• Canvas用にMoz2D/Azure
• Gecko
APIを追加
15+
• Content用にThebesとAzureのラッパーを追加

12. Moz2D
• New
2D API set by Mozilla
• Hardware
Accelerationに対応した様々なバックエンド

13. Layout - Canvas
• CanvasではThebes
APIを基本使わない
• gfx.canvas.azure.backends
/
gfx.canvas.azure.accelerated prefs
• GonkだとSkiaGLを利用
• Direct
call to Moz2D API

14. Layout - Content
• gfx.content.azure.backends
gfx.content.azure.accelerated prefs
• SkiaGL
support for Gonk
(https://bugzilla.mozilla.org/show_bugs.cgi?id88344
2）
• Thebesラッパー経由でMoz2Dが使われる
• 最終的には、Thebes
APIで書かれている部分をMoz2D
APIで書き直す(In Progress)

15. Moz2D
• Draw
/ Composition
• Path
• Gradient
• Glyph
• Filter
Rendering
(new!)

16. Draw / Composition
• mozilla::gfx::SourceSurface
• 描画元
• mozilla::gfx::DrawTarget
• 描画先

17. Path
• mozilla::gfx::PathBuilder
• Pathを生成するためのもの
• mozilla::gfx::Path
• 生成されたPathの情報

18. Glyph
• mozilla::gfx::ScaledFont
• フォント管理とフォントの描画パス・パターンを管理

19. Backend
• Direct
2D
• CoreGraphics
• Skia
/ Skia GL
• Cairo
• (nvpr)
/ Quartz

20. Recording Backend
• Output
recoding
firefox -P <profile> -recording <URL> –recording-output output.aer
• Reading
• Use
• To
recording file
Player2D in Moz2D repository
build player2D,
QMAKE_BIN=<qmake path> make player2d

21. Player2D

22. Hardware Blacklist
• No
list on B2G/gonk
• Gonkの場合、複数のデバイスで動くシングルバイナ
リってことはない
• クラッシュデータからブラックリスト行きかどうかは決める
• 動かないも含む
(Androidによくある事例)

23. Performance
• Ex.
•
Direct2D backend (Gecko 7)
http://www.basschouten.com/blog1.php/comparing-performance-azure-vs-cairo

24. Layers
• “The
Compositor”
• Backend
• Direct
3D 9 / 10 / 11
• OpenGL

25. Compositor
• Reflowの軽減
• 今どきのブラウザではだいたい同じコンセプトのものを
採用
• Concept
• https://wiki.mozilla.org/Gecko:Compositor

26. References
• Graphics
in Mozilla – Part 1
• http://blog.vlad1.com/2007/12/11/graphics-in-
mozilla/
• Introducing
the Azure project
• https://blog.mozilla.org/joe/2011/04/26/introducing-
the-azure-project/

27. References
• Cairo
• http://cairographics.org/
• Skia
• http://code.google.com/p/skia/
• Vega
• http://my.opera.com/core/blog/2009/02/04/vega

28. References
• Progress
on Moz2D
• http://www.basschouten.com/blog1.php/progress-
on-moz2d
• Moz2D
repository
• http://hg.mozilla.org/users/bschouten_mozilla.com/
moz2d/