WebGPUで画面に■を表示する_函館市電LT

WebGPUで画面に■を表示する 23.09.18 #函館市電LT 西村航 / @_n13u_

自己紹介 西村航 / @_n13u_ 札幌から来ました

昨日札幌でイベントやってました #MIKANTECHMEETUP テクノロジーをテーマに人が 集まりつつ、札幌でテック盛り上げようと いう趣旨のイベントでした

イベントレポート執筆中

#MIKANTECHMEETUP

今日の話 みなさん知ってますか？ WebGPU

WebGPUとは？ WebGPU は、ウェブアプリの GPU の機能にアクセスするための新しい 最新 API です。 https://codelabs.developers.google.com/your-first-webgp u-app?hl=ja#0

• https://codelabs.developers.google.com/your-first-webgp

グラフィックAPIについて GPUとおしゃべりするための専用の API。描画や特定の計算処理の反 復に特化

Webで3DCG表現をするには OpenGL ES 3.0 ベースのWebGL https://codelabs.developers.google.com/your-first-webgp u-app?hl=ja#0

• https://codelabs.developers.google.com/your-first-webgp

Webで3DCG表現をするには

WebGPUとは？ 新しくて（機能が豊富）で早い（GPU に最適化されてる）Web標準で定め られてるWebGL後継ポジション的 な、グラフィックAPI https://ics.media/entry/230426/

• https://ics.media/entry/230426/

何が違う？ WebGPUは、DirectXやVulkanの APIを叩きつつ、そこをうまく抽象化し てコードがかける

触ってみた WebGPUなので、JavaScriptをしゃべり ます（Rustのwgpuとかもある） https://github.com/WataruNishimura/webgpu-handson

• https://github.com/WataruNishimura/webgpu-handson

触ってみた シェーダ言語はHLSLでもGLSLでもな く、WGSL（！？） https://github.com/WataruNishimura/webgpu-handson

• https://github.com/WataruNishimura/webgpu-handson

触ってみた TypeScriptの型定義ファイル @webgpu/types を使うと開発者体験が かなりいいです。（APIのクラスとか BufferArrayとかtypoしたときにすぐわか る） https://github.com/WataruNishimura/webgpu-handson

• https://github.com/WataruNishimura/webgpu-handson

GitHubありますGitHub.ioあります https://github.com/WataruNishimura/webgpu-handson https://watarunishimura.github.io/webgpu-handson

• https://github.com/WataruNishimura/webgpu-handson
• https://watarunishimura.github.io/webgpu-handson

すぺしゃるさんくす @tomio2480 さんのご協力に より格安で函館これました

ありがとうございました