Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Skia and Skija, Skiko [ja]

Skia and Skija, Skiko [ja]

Daichi Furiya (Wasabeef)

December 21, 2020
Tweet

More Decks by Daichi Furiya (Wasabeef)

Other Decks in Programming

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