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.2k
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)
DevFest_2022_What_it_Takes_to_be_a_Flutter_Developer
wasabeef
0
9
FlutterKaigi 2022 Keynote
wasabeef
1
320
Flutter Hooks を使ったアプリ開発 / App Development with the Flutter Hooks
wasabeef
2
790
Flutter 2021 の振り返りと今後のアプリ開発に向けて / Looking back on Flutter 2021 and for future app development.
wasabeef
4
1.8k
Flutter Hooks, sometimes Jetpack Compose
wasabeef
2
1.4k
Flutter はプロダクション開発に耐えうるのか / Flutter ready for production?
wasabeef
34
11k
モバイル開発におけるクロスプラットフォームの期待と課題 / Cross-platform expectations and challenges in mobile development
wasabeef
0
290
Repository with Store4 [ja]
wasabeef
2
1k
来年に備えるために Android の知識を網羅する / Looking back on this Android year in preparation for next year.
wasabeef
17
13k
Other Decks in Programming
See All in Programming
ECS Service Connectでマイクロサービスを繋いでみた
xblood
0
530
Swift Observation
shiz
3
270
jq at the Shortcuts
cockscomb
1
410
23年のJavaトレンドは?Quarkusで理解するコンテナネイティブJava
tatsuya1bm
1
120
OSSから学んだPR Descriptionの書き方
fugakkbn
4
130
低レイヤーから始める GUI
fadis
18
9.3k
[2023년 1월 세미나] 데이터 분석가 되면 어떤 일을 하나요?
datarian
0
560
Showkase、Paparazziを用いたビジュアルリグレッションテストの導入にチャレンジした話 / MoT TechTalk #15
mot_techtalk
0
100
はてなリモートインターンシップ2022 インフラ 講義資料
hatena
4
2.1k
Amebaブログの会員画面システム刷新の道程
ryotasugawara
1
220
Milestoner
bkuhlmann
1
240
Zynq MP SoC で楽しむエッジコンピューティング ~RTLプログラミングのススメ~
ryuz88
0
320
Featured
See All Featured
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
500
130k
GitHub's CSS Performance
jonrohan
1020
430k
jQuery: Nuts, Bolts and Bling
dougneiner
57
6.6k
YesSQL, Process and Tooling at Scale
rocio
159
12k
Producing Creativity
orderedlist
PRO
335
37k
How to train your dragon (web standard)
notwaldorf
66
4.2k
StorybookのUI Testing Handbookを読んだ
zakiyama
8
3.2k
Building Flexible Design Systems
yeseniaperezcruz
314
35k
How STYLIGHT went responsive
nonsquared
89
4.2k
Product Roadmaps are Hard
iamctodd
38
7.7k
How to Ace a Technical Interview
jacobian
270
21k
Thoughts on Productivity
jonyablonski
49
2.7k
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