Skia and Skija, Skiko [ja]

Transcript

1. Skia and Skija, Skiko
   Daichi Furiya
   #ca_flutter_kmm
   

   View Slide

2. About me
   Daichi Furiya (降矢 大地)
   Google Developers Expert
   CyberAgent, Inc.
   @wasabeef_jp wasabeef
   

   View Slide

3. View Slide

4. View Slide

5. Skia?
   • グラフィックライブラリ（エンジン）
   • Chrome, Android, Flutter, Firefox, .NET, Compose
   for Desktop などで採用されている
   • Android 9 以降、デフォルトのレンダラーは Skia に
   なっている（8 と 9 で UI が変わった）
   

   View Slide

6. Supported platforms
   •Windows 7, 8, 8.1, 10
   •macOS 10.10.5 or later
   •iOS 8 or later
   •Android 4.1 (JellyBean) or later
   •Ubuntu 14.04+, Debian 8+, openSUSE 13.3+, or
   Fedora Linux 24+
   

   View Slide

7. Case: Skia + Flutter
   

   View Slide

8. Showcase
   Shapes ベジェ曲線 平行移動と回転 テキストレンダリング
   シェーダー
   パス
   

   View Slide

9. SkCanvas + SkPaint sample
   void draw(SkCanvas* canvas) {
   SkPaint p;
   p.setColor(SK_ColorRED);
   p.setAntiAlias(true);
   p.setStyle(SkPaint:::kStroke_Style);
   p.setStrokeWidth(150);
   canvas->-drawLine(75, 75, 175, 175, p);
   }
   Android 寄りだけど、よくある Canvas API
   

   View Slide

10. SkCanvas - Backends
    •Raster - CPU-only.
    •GPU - Skia's GPU-accelerated backend.
    •SkPDF - PDF document creation.
    •SkPicture - Skia's display list format.
    •NullCanvas - Useful for testing only.
    •SkXPS - Experimental XPS backend.
    •SkSVG - Experimental SVG backend.
    SkCanvas には複数のバックエンドが用意されている
    

    View Slide

11. GPU
    GPU には Skia のビルド時に Webkit/Canvas、
    OpenGL、OpenGL ES、Vulkan、Metal などのモード
    を選択することができる。
    

    View Slide

12. Skia のメリット
    •コード量の削減（例：LibreOffice は 12k → 4k）
    •一貫性のある API
    •クロスプラットフォームの対応
    •複数のバックエンドサポート
    Webkit/Canvas、OpenGL (ES)、Vulkan、Metal
    

    View Slide

13. Flutter Web でのデメリット
    •Webkit/Canvas でテキストを描画しているので、文
    字列の選択などができない
    

    View Slide

14. Compose for
    Desktop
    

    View Slide

15. Compose for Desktop
    

    View Slide

16. Desktop アプリを作るということどういうことか
    前提：クロスプラットフォーム
    パフォーマンスが高くない
    WASM は高速だが、JS + DOM
    はJVM よりもはるかに低速
    • JVM はパフォーマンスは高い
    が、AWT、Swing、JavaFX はメ
    モリ割り当てしすぎないように気
    をつけないといけない。
    • OpenGL は難しい
    

    View Slide

17. Compose for Desktop
    fun main() {
    overrideSchedulers(main = Dispatchers.Main:::asScheduler)
    val lifecycle = LifecycleRegistry()
    lifecycle.resume()
    Window("Todo") {
    Surface(modifier = Modifier.fillMaxSize()) {
    MaterialTheme {
    DesktopTheme {
    Text(“Hello World!!!”)
    }
    }
    }
    }
    }
    ほぼ Jetpack Compose になっている
    

    View Slide

18. View Slide

19. Skija
    • JetBrains 開発
    • Skia for Java (Java bindings to Skia)
    • Graphics2D、GraphicsContext は古い
    • 最新の Typography 対応
    • Vulkan* や Metal 対応
    

    View Slide

20. Skija が目指すところ
    • 自動でメモリ管理、リークなし
    • Java のコードスタイルに準拠
    • Integer constants よりも enum
    • Fluent API
    • Skija から ネイティブ Skia を感じさせない設計
    

    View Slide

21. Skija - build.gradle
    repositories {
    maven { url 'https:///packages.jetbrains.team/maven/p/skija/maven' }
    }
    dependencies {
    /// macOS, windows, linux
    api “org.jetbrains.skija:skija-${platform}:0.1.+”
    }
    ↑ 各 OS 毎に Artifacts が分かれているのでビルド時に切り替えて使う
    

    View Slide

22. Skiko
    

    View Slide

23. Skiko?
    • JetBrains 開発
    • Skia for Kotlin (Kotlin MP bindings to Skia)
    

    View Slide

24. Skiko - build.gradle
    repositories {
    maven { url 'https:///packages.jetbrains.team/maven/p/ui/dev' }
    }
    dependencies {
    /// macOS, windows, linux
    implementation “org.jetbrains.skiko:skiko-jvm-runtime-${platform}:0.1.+”
    }
    ↑ 各 OS 毎に Artifacts が分かれているのでビルド時に切り替えて使う
    

    View Slide

25. Skiko - App.kt
    fun main(args: Array) {
    SkiaWindow().apply {
    layer.renderer = Renderer { renderer, w, h ->-
    val canvas = renderer.canvas!!!
    val paint1 = Paint().setColor(0xffff0000.toInt()) /// ARGB
    canvas.drawRRect(RRect.makeLTRB(10f, 10f, w - 10f, h - 10f, 5f), paint1)
    val paint2 = Paint().setColor(0xff00ff00.toInt()) /// ARGB
    canvas.drawRRect(RRect.makeLTRB(30f, 30f, w - 30f, h - 30f, 10f), paint2)
    }
    setVisible(true)
    setSize(800, 600)
    }
    }
    SkiaWindow が UI のコンテナ になるので、その上で描画する
    

    View Slide

26. Skiko - SkiaLayer
    open class SkiaWindow : JFrame() {
    val layer = SkiaLayer()
    init {
    contentPane.add(layer)
    addComponentListener(object : ComponentAdapter() {
    override fun componentResized(e: ComponentEvent) {
    layer.reinit()
    }
    })
    }
    fun display() = layer.display()
    }
    javax.swing.JFrame を実装して SkiaLayer を渡しているだけ
    

    View Slide

27. Skiko - SkiaLayer
    open class SkiaLayer() : HardwareLayer() {
    open val api: GraphicsApi = GraphicsApi.OPENGL
    /// .....
    override fun draw() {
    if (!inited) {
    if (skijaState.context === null) {
    skijaState.context = when (api) {
    GraphicsApi.OPENGL ->- makeGLContext()
    GraphicsApi.METAL ->- makeMetalContext()
    else ->- TODO("Unsupported yet")
    }
    }
    renderer??.onInit()
    inited = true
    renderer??.onReshape(width, height)
    }
    initSkija()
    /// .....
    }
    /// .....
    }
    HardwareLayer はただの awt.Canvas で
    api: GraphicApi でコンテキストを変えている。
    Skija が Vulkan の対応はまだ追いついていない
    実際に draw している先は Skija Canvas。
    ここから Skija の世界へ。
    

    View Slide

28. CanvasKit
    

    View Slide

29. CanvasKit
    • Skia for WebAssembly
    • WebGL のサポート
    

    View Slide

30. CanvasKit + Skottie
    • Lottie Animation Support
    

    View Slide

31. SkiaSharp
    

    View Slide

32. SkiaSharp
    .NET Standard 1.3
    .NET Core
    Tizen
    Xamarin.Android
    Xamarin.iOS
    Xamarin.tvOS
    Xamarin.watchOS
    Xamarin.Mac
    Windows Classic Desktop(Windows.Forms / WPF)
    Windows UWP (Desktop / Mobile / Xbox / HoloLens)
    Web Assembly (WASM)
    • Microsoft 開発
    

    View Slide

33. View Slide

34. 　Kotlin MP App　
    　Skiko　
    　Skija　
    　Flutter App　
    　Flutter engine　
    • Android
    • iOS
    • Windows
    • macOS
    • Linux
    　Skia　
    • Android
    • Windows
    • macOS
    • Linux
    　Skia　
    • iOS？
    

    View Slide

35. twitter.com/wasabeef_jp
    wasabeef.jp
    github.com/wasabeef
    Thanks
    

    View Slide