Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Speaker Deck
PRO
Sign in
Sign up for free
Skia and Skija, Skiko [ja]
Daichi Furiya (Wasabeef)
December 21, 2020
Programming
1
1.1k
Skia and Skija, Skiko [ja]
Daichi Furiya (Wasabeef)
December 21, 2020
Tweet
Share
More Decks by Daichi Furiya (Wasabeef)
See All by Daichi Furiya (Wasabeef)
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
1
430
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
1.6k
Flutter Hooks, sometimes Jetpack Compose
wasabeef
2
1.3k
Flutter はプロダクション開発に耐えうるのか / Flutter ready for production?
wasabeef
34
10k
モバイル開発におけるクロスプラットフォームの期待と課題 / Cross-platform expectations and challenges in mobile development
wasabeef
0
250
Repository with Store4 [ja]
wasabeef
2
960
来年に備えるために Android の知識を網羅する / Looking back on this Android year in preparation for next year.
wasabeef
17
13k
What's new Android Studio 4.0 [ja]
wasabeef
4
1.4k
What's new at Firebase Summit 2019 [ja]
wasabeef
1
440
Other Decks in Programming
See All in Programming
Terraform Plan/Apply結果の自動通知
ymmy02
0
270
Make the most of Django - PyCon Italia 2022
pauloxnet
0
110
RFC 9111: HTTP Caching
jxck
0
150
Cybozu GoogleI/O 2022 LT会 - Input for all screens
jaewgwon
0
120
Raspberry Pi Picoデバッガ使用のすすめ
ciniml
0
230
言語処理ライブラリ開発における失敗談 / NLPHacks
taishii
1
420
React NativeアプリにStorybook CSF3.0を導入しよう
texmeijin
0
150
Web API連携でCSRF対策がどう実装されてるか調べた / how to implements csrf-detection on Web API
yasuakiomokawa
2
140
Overview of The Modern Data Stack / モダンデータスタック概論
satoshihirose
6
3.2k
ANR overview at Uber + Leveraging ApplicationExitInfo API
yhartanto
0
320
The strategies behind ddd – AdeoDevSummit 2022
lilobase
PRO
3
210
Reactive Java Microservices on Kubernetes with Spring and JHipster
deepu105
1
160
Featured
See All Featured
I Don’t Have Time: Getting Over the Fear to Launch Your Podcast
jcasabona
12
920
Rebuilding a faster, lazier Slack
samanthasiow
62
7.2k
Bootstrapping a Software Product
garrettdimon
296
110k
10 Git Anti Patterns You Should be Aware of
lemiorhan
638
52k
What the flash - Photography Introduction
edds
61
10k
How GitHub Uses GitHub to Build GitHub
holman
465
280k
Making Projects Easy
brettharned
98
4.3k
Refactoring Trust on Your Teams (GOTO; Chicago 2020)
rmw
19
1.4k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
351
21k
The Straight Up "How To Draw Better" Workshop
denniskardys
225
120k
No one is an island. Learnings from fostering a developers community.
thoeni
9
1.1k
Facilitating Awesome Meetings
lara
29
4k
Transcript
Skia and Skija, Skiko Daichi Furiya #ca_flutter_kmm
About me Daichi Furiya (降矢 大地) Google Developers Expert CyberAgent,
Inc. @wasabeef_jp wasabeef
None
None
Skia? • グラフィックライブラリ(エンジン) • Chrome, Android, Flutter, Firefox, .NET, Compose
for Desktop などで採用されている • Android 9 以降、デフォルトのレンダラーは Skia に なっている(8 と 9 で UI が変わった)
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+
Case: Skia + Flutter
Showcase Shapes ベジェ曲線 平行移動と回転 テキストレンダリング シェーダー パス
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
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 には複数のバックエンドが用意されている
GPU GPU には Skia のビルド時に Webkit/Canvas、 OpenGL、OpenGL ES、Vulkan、Metal などのモード を選択することができる。
Skia のメリット •コード量の削減(例:LibreOffice は 12k → 4k) •一貫性のある API •クロスプラットフォームの対応
•複数のバックエンドサポート Webkit/Canvas、OpenGL (ES)、Vulkan、Metal
Flutter Web でのデメリット •Webkit/Canvas でテキストを描画しているので、文 字列の選択などができない
Compose for Desktop
Compose for Desktop
Desktop アプリを作るということどういうことか 前提:クロスプラットフォーム パフォーマンスが高くない WASM は高速だが、JS + DOM はJVM よりもはるかに低速
• JVM はパフォーマンスは高い が、AWT、Swing、JavaFX はメ モリ割り当てしすぎないように気 をつけないといけない。 • OpenGL は難しい
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 になっている
None
Skija • JetBrains 開発 • Skia for Java (Java bindings
to Skia) • Graphics2D、GraphicsContext は古い • 最新の Typography 対応 • Vulkan* や Metal 対応
Skija が目指すところ • 自動でメモリ管理、リークなし • Java のコードスタイルに準拠 • Integer constants
よりも enum • Fluent API • Skija から ネイティブ Skia を感じさせない設計
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 が分かれているのでビルド時に切り替えて使う
Skiko
Skiko? • JetBrains 開発 • Skia for Kotlin (Kotlin MP
bindings to Skia)
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 が分かれているのでビルド時に切り替えて使う
Skiko - App.kt fun main(args: Array<String>) { 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 のコンテナ になるので、その上で描画する
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 を渡しているだけ
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 の世界へ。
CanvasKit
CanvasKit • Skia for WebAssembly • WebGL のサポート
CanvasKit + Skottie • Lottie Animation Support
SkiaSharp
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 開発
None
Kotlin MP App Skiko Skija Flutter App Flutter engine •
Android • iOS • Windows • macOS • Linux Skia • Android • Windows • macOS • Linux Skia • iOS?
twitter.com/wasabeef_jp wasabeef.jp github.com/wasabeef Thanks