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
130
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
1
250
BLoCパターンとflutter_bloc
hyshu
0
100
Melos x Pub Workspaces で 沢山のアプリとパッケージを管理するのに 苦労した話
hyshu
1
47
Jasprが凄い話
hyshu
0
330
Other Decks in Programming
See All in Programming
TROCCO×dbtで実現する人にもAIにもやさしいデータ基盤
nealle
0
240
What's new in Adaptive Android development
fornewid
0
140
MCP連携で加速するAI駆動開発/mcp integration accelerates ai-driven-development
bpstudy
0
300
Bedrock AgentCore ObservabilityによるAIエージェントの運用
licux
9
700
DataformでPythonする / dataform-de-python
snhryt
0
180
エンジニアのための”最低限いい感じ”デザイン入門
shunshobon
0
110
A Gopher's Guide to Vibe Coding
danicat
0
150
なぜ今、Terraformの本を書いたのか? - 著者陣に聞く!『Terraformではじめる実践IaC』登壇資料
fufuhu
4
620
あまり知られていない MCP 仕様たち / MCP specifications that aren’t widely known
ktr_0731
0
270
React 使いじゃなくても知っておきたい教養としての React
oukayuka
18
5.7k
Terraform やるなら公式スタイルガイドを読もう 〜重要項目 10選〜
hiyanger
13
3.1k
あなたとJIT, 今すぐアセンブ ル
sisshiki1969
1
690
Featured
See All Featured
Faster Mobile Websites
deanohume
309
31k
The Pragmatic Product Professional
lauravandoore
36
6.8k
A better future with KSS
kneath
239
17k
Navigating Team Friction
lara
188
15k
Reflections from 52 weeks, 52 projects
jeffersonlam
351
21k
Designing for humans not robots
tammielis
253
25k
Agile that works and the tools we love
rasmusluckow
329
21k
Performance Is Good for Brains [We Love Speed 2024]
tammyeverts
10
1k
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
18
1.1k
Writing Fast Ruby
sferik
628
62k
4 Signs Your Business is Dying
shpigford
184
22k
Making Projects Easy
brettharned
117
6.3k
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