Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
CanvasKitの描画の仕組みを調べてみる
Search
Hayami Shuhei
February 28, 2025
Programming
0
57
CanvasKitの描画の仕組みを調べてみる
新宿御苑.wasm #2025.2.28
Hayami Shuhei
February 28, 2025
Tweet
Share
More Decks by Hayami Shuhei
See All by Hayami Shuhei
Jasprが凄い話
hyshu
0
170
Other Decks in Programming
See All in Programming
ソフトウェアエンジニアの成長
masuda220
PRO
12
2.1k
TCAを用いたAmebaのリアーキテクチャ
dazy
0
200
Jakarta EE meets AI
ivargrimstad
0
440
読まないコードリーディング術
hisaju
0
100
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
330
Domain-Driven Design (Tutorial)
hschwentner
13
22k
コードを読んで理解するko build
bells17
1
110
dbt Pythonモデルで実現するSnowflake活用術
trsnium
0
260
React 19アップデートのために必要なこと
uhyo
8
1.5k
Learning Kotlin with detekt
inouehi
1
140
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
420
SwiftUI移行のためのインプレッショントラッキング基盤の構築
kokihirokawa
0
150
Featured
See All Featured
10 Git Anti Patterns You Should be Aware of
lemiorhan
PRO
656
59k
Build The Right Thing And Hit Your Dates
maggiecrowley
34
2.5k
Documentation Writing (for coders)
carmenintech
67
4.6k
Building a Scalable Design System with Sketch
lauravandoore
461
33k
The Myth of the Modular Monolith - Day 2 Keynote - Rails World 2024
eileencodes
21
2.5k
StorybookのUI Testing Handbookを読んだ
zakiyama
28
5.5k
The World Runs on Bad Software
bkeepers
PRO
67
11k
The MySQL Ecosystem @ GitHub 2015
samlambert
250
12k
A Philosophy of Restraint
colly
203
16k
Building Applications with DynamoDB
mza
93
6.2k
JavaScript: Past, Present, and Future - NDC Porto 2020
reverentgeek
47
5.2k
個人開発の失敗を避けるイケてる考え方 / tips for indie hackers
panda_program
100
18k
Transcript
CanvasKitͷ ඳըͷΈΛௐͯΈΔ ৽॓ޚԓ.wasm #2025.2.28 aq (Hayami Shuhei)
CanvasKit (Skia + Wasm) https://skia.org/docs/user/modules/canvaskit/
CanvasKit • Skiaͱ͍͏2DͷඳըΤϯδϯͷWasmίϯύΠϧ • Skia Google ChromeɺMozilla FirefoxɺFlutterͷ WebϏϧυɺAndroid OS
ͳͲͰ༻͞Ε͍ͯΔ • NPMͳͲ͕͋ΔͷͰWebͰखܰʹѻ͑Δ
CanvasKitͷجຊతͳ͍ํ https://skia.org/docs/user/modules/quickstart/ ެࣜυΩϡϝϯτʹඳըͷղઆ͖αϯϓϧ͕͋Δ unpkg.com͔Βcanvaskit.wasmͱ ϥούʔͷcanvaskit.jsΛಡΈࠐΈɺ HTMLͷcanvasཁૉʹ͍࢛֯Λඳը
CanvasKitͷجຊతͳ͍ํ • <canvas>Λ༻͍ͯ͠Δ͕HTMLͷcanvasඳըϝ ιουΛ༻͍ͯ͠ͳ͍ • ͜ͷcanvasΛར༻ͯ͠WebGL2ͷContextΛऔಘɺ C++Ͱॻ͔ΕͨॲཧͰඳըͷ΄ͱΜͲΛߦ͍ɺGPU ʹίϚϯυΛૹ৴͍ͯ͠Δ ެࣜυΩϡϝϯτʹΑΔͱ…
Skia෦Ͱͷඳը ྲྀੴʹC++ιʔείʔυΛ۷͍ͬͯ͘ͷ࣌ؒతʹݫ͍͠… ͱ͍͏͜ͱͰάάͬͨΒҎԼͷهࣄ͕ݟ͔ͭͬͨ WebGPUͱC++Ͱϒϥβ্ʹࡾ֯ϙϦΰϯඳըͯ͠ΈΔ https://zenn.dev/kd_gamegikenblg/articles/a5a8e ff e43bf3c
• ͜ͷهࣄʹΑΔͱ Google Chrome Ͱ Dawn (https://dawn.googlesource.com/dawn )ͱ͍͏ ΫϩεϓϥοτϑΥʔϜͰWebGPU͕ѻ͑ΔC++ͷ ϥΠϒϥϦʔΛ༻͍ͯ͠Δͱͷ͜ͱ
• SkiaͷϦϙδτϦʔͰDawnͱݕࡧͨ͠Β DawnCommandBu ff er.cppͳͲ৭ʑώοτͨ͠ͷͰ CanvasKitDawnͰඳըͯ͠ΔͬΆ͍ Skia෦Ͱͷඳը
͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ීஈFlutterΛத৺ʹϞόΠϧΞϓϦͷ ใൃ৴ͯ͠·͢ X: @aqhayami Zenn: @hyshu