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
DynamoDBは怖くない!〜テーブル設計の勘所とテスト戦略〜
hyamazaki
0
100
コーディングエージェント概観(2025/07)
itsuki_t88
0
460
可変性を制する設計: 構造と振る舞いから考える概念モデリングとその実装
a_suenami
8
1.1k
0から始めるモジュラーモノリス-クリーンなモノリスを目指して
sushi0120
0
210
商品比較サービス「マイベスト」における パーソナライズレコメンドの第一歩
ucchiii43
0
230
Android 15以上でPDFのテキスト検索を爆速開発!
tonionagauzzi
0
180
Amazon Q CLI開発で学んだAIコーディングツールの使い方
licux
3
130
MySQL9でベクトルカラム登場!PHP×AWSでのAI/類似検索はこう変わる
suguruooki
1
260
AIコーディングエージェント全社導入とセキュリティ対策
hikaruegashira
15
8.8k
Claude Code で Astro blog を Pages から Workers へ移行してみた
codehex
0
170
オホーツクでコミュニティを立ち上げた理由―地方出身プログラマの挑戦 / TechRAMEN 2025 Conference
lemonade_37
1
380
オンコール⼊⾨〜ページャーが鳴る前に、あなたが備えられること〜 / Before The Pager Rings
yktakaha4
2
1.2k
Featured
See All Featured
CSS Pre-Processors: Stylus, Less & Sass
bermonpainter
357
30k
Fantastic passwords and where to find them - at NoRuKo
philnash
51
3.3k
Embracing the Ebb and Flow
colly
86
4.8k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
283
13k
Fashionably flexible responsive web design (full day workshop)
malarkey
407
66k
Producing Creativity
orderedlist
PRO
346
40k
Writing Fast Ruby
sferik
628
62k
Connecting the Dots Between Site Speed, User Experience & Your Business [WebExpo 2025]
tammyeverts
8
400
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
194
16k
Building a Modern Day E-commerce SEO Strategy
aleyda
42
7.4k
Practical Orchestrator
shlominoach
190
11k
Rails Girls Zürich Keynote
gr2m
95
14k
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