CanvasKitの描画の仕組みを調べてみる

新宿御苑.wasm #2025.2.28

Transcript

1. CanvasKitͷ ඳըͷ࢓૊ΈΛௐ΂ͯΈΔ ৽॓ޚԓ.wasm #2025.2.28 aq (Hayami Shuhei)
2. CanvasKit (Skia + Wasm) https://skia.org/docs/user/modules/canvaskit/
3. CanvasKit • Skiaͱ͍͏2DͷඳըΤϯδϯͷWasmίϯύΠϧ • Skia͸ Google ChromeɺMozilla FirefoxɺFlutterͷ WebϏϧυɺAndroid OS ͳͲͰ࢖༻͞Ε͍ͯΔ • NPMͳͲ͕͋ΔͷͰWebͰ΋खܰʹѻ͑Δ
4. CanvasKitͷجຊతͳ࢖͍ํ https://skia.org/docs/user/modules/quickstart/ ެࣜυΩϡϝϯτʹඳըͷղઆ෇͖αϯϓϧ͕͋Δ unpkg.com͔Βcanvaskit.wasmͱ ϥούʔͷcanvaskit.jsΛಡΈࠐΈɺ HTMLͷcanvasཁૉʹ੺͍࢛֯Λඳը
5. CanvasKitͷجຊతͳ࢖͍ํ • <canvas>Λ࢖༻͍ͯ͠Δ͕HTMLͷcanvasඳըϝ ιουΛ࢖༻͍ͯ͠ͳ͍ • ͜ͷcanvasΛར༻ͯ͠WebGL2ͷContextΛऔಘɺ C++Ͱॻ͔ΕͨॲཧͰඳըͷ΄ͱΜͲΛߦ͍ɺGPU ʹίϚϯυΛૹ৴͍ͯ͠Δ ެࣜυΩϡϝϯτʹΑΔͱ…
6. Skia಺෦Ͱͷඳը ྲྀੴʹC++ιʔείʔυΛ۷͍ͬͯ͘ͷ͸࣌ؒతʹݫ͍͠… ͱ͍͏͜ͱͰάάͬͨΒҎԼͷهࣄ͕ݟ͔ͭͬͨ WebGPUͱC++Ͱϒϥ΢β্ʹࡾ֯ϙϦΰϯඳըͯ͠ΈΔ https://zenn.dev/kd_gamegikenblg/articles/a5a8e ff e43bf3c
7. • ͜ͷهࣄʹΑΔͱ Google Chrome Ͱ͸ Dawn (https://dawn.googlesource.com/dawn )ͱ͍͏ ΫϩεϓϥοτϑΥʔϜͰWebGPU͕ѻ͑ΔC++ͷ ϥΠϒϥϦʔΛ࢖༻͍ͯ͠Δͱͷ͜ͱ • SkiaͷϦϙδτϦʔͰDawnͱݕࡧͨ͠Β DawnCommandBu ff er.cppͳͲ৭ʑώοτͨ͠ͷͰ CanvasKit΋DawnͰඳըͯ͠ΔͬΆ͍ Skia಺෦Ͱͷඳը
8. ͝ਗ਼ௌ͋Γ͕ͱ͏͍͟͝·ͨ͠ ීஈ͸FlutterΛத৺ʹϞόΠϧΞϓϦͷ ৘ใൃ৴ͯ͠·͢ X: @aqhayami Zenn: @hyshu