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
120
CanvasKitの描画の仕組みを調べてみる
新宿御苑.wasm #2025.2.28
Hayami Shuhei
February 28, 2025
Tweet
Share
More Decks by Hayami Shuhei
See All by Hayami Shuhei
Flutterと Vibe Coding で個人開発!
hyshu
0
140
BLoCパターンとflutter_bloc
hyshu
0
98
Melos x Pub Workspaces で 沢山のアプリとパッケージを管理するのに 苦労した話
hyshu
1
47
Jasprが凄い話
hyshu
0
320
Other Decks in Programming
See All in Programming
GPUを計算資源として使おう!
primenumber
1
300
SwiftでMCPサーバーを作ろう!
giginet
PRO
2
210
[Codecon - 2025] Como não odiar seus testes
camilacampos
0
100
CIを整備してメンテナンスを生成AIに任せる
hazumirr
0
370
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
230
AI Agent 時代のソフトウェア開発を支える AWS Cloud Development Kit (CDK)
konokenj
6
1k
코딩 에이전트 체크리스트: Claude Code ver.
nacyot
0
1k
プロダクトという一杯を作る - プロダクトチームが味の責任を持つまでの煮込み奮闘記
hiliteeternal
0
300
AWS Summit Japan 2024と2025の比較/はじめてのKiro、今あなたは岐路に立つ
satoshi256kbyte
1
260
Google I/O Extended Incheon 2025 ~ What's new in Android development tools
pluu
1
210
バイブスあるコーディングで ~PHP~ 便利ツールをつくるプラクティス
uzulla
1
300
抽象化という思考のツール - 理解と活用 - / Abstraction-as-a-Tool-for-Thinking
shin1x1
1
890
Featured
See All Featured
The Psychology of Web Performance [Beyond Tellerrand 2023]
tammyeverts
48
2.9k
We Have a Design System, Now What?
morganepeng
53
7.7k
jQuery: Nuts, Bolts and Bling
dougneiner
63
7.8k
Making the Leap to Tech Lead
cromwellryan
134
9.4k
Building a Scalable Design System with Sketch
lauravandoore
462
33k
Faster Mobile Websites
deanohume
308
31k
A better future with KSS
kneath
238
17k
The Illustrated Children's Guide to Kubernetes
chrisshort
48
50k
Art, The Web, and Tiny UX
lynnandtonic
301
21k
Music & Morning Musume
bryan
46
6.7k
Java REST API Framework Comparison - PWX 2021
mraible
31
8.7k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
251
21k
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