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
54
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
150
Other Decks in Programming
See All in Programming
Honoのおもしろいミドルウェアをみてみよう
yusukebe
1
220
密集、ドキュメントのコロケーション with AWS Lambda
satoshi256kbyte
1
210
CSS Linter による Baseline サポートの仕組み
ryo_manba
1
150
Formの複雑さに立ち向かう
bmthd
1
930
仕様変更に耐えるための"今の"DRY原則を考える
mkmk884
9
3.1k
Unity Android XR入門
sakutama_11
0
180
pylint custom ruleで始めるレビュー自動化
shogoujiie
0
150
Boos Performance and Developer Productivity with Jakarta EE 11
ivargrimstad
0
260
Multi Step Form, Decentralized Autonomous Organization
pumpkiinbell
1
860
5分で理解する SOLID 原則 #phpcon_nagoya
shogogg
1
300
Rubyと自由とAIと
yotii23
6
1.6k
未経験でSRE、はじめました! 組織を支える役割と軌跡
curekoshimizu
1
140
Featured
See All Featured
Principles of Awesome APIs and How to Build Them.
keavy
126
17k
Let's Do A Bunch of Simple Stuff to Make Websites Faster
chriscoyier
507
140k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
280
13k
The Success of Rails: Ensuring Growth for the Next 100 Years
eileencodes
44
7k
A Philosophy of Restraint
colly
203
16k
Designing Experiences People Love
moore
140
23k
VelocityConf: Rendering Performance Case Studies
addyosmani
328
24k
Docker and Python
trallard
44
3.3k
The Invisible Side of Design
smashingmag
299
50k
Measuring & Analyzing Core Web Vitals
bluesmoon
6
250
Mobile First: as difficult as doing things right
swwweet
223
9.4k
Being A Developer After 40
akosma
89
590k
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