Implementing WebGL with Stripe Apps

A 30 minute presentation I gave at the 8th JP_Stripes Meetup in Sapporo (on 2023/1/31) introducing how we created a fast, realtime, and interactive implementation of WebGL within a Stripe App, utilizing Three.js.

https://jpstripes.connpass.com/event/269781/
https://github.com/falken42/stripe-apps-webgl

(Note: This presentation is only in Japanese, sorry.)

Transcript

1. Stripe Appsに WebGLを実装してみた JP_Stripes サッポロ vol.8 2023年1月31日 (火) 株式会社コールド・フュージョン テッダー　マイケル JP_ Stripes サッポロ
2. $ whoami > テッダー　マイケル（昭和51年生まれ / 2000年アメリカから日本） > 25年以上ゲーム業界でリアルタイム3Dと最適化中心のゲーム開発 　　（初代PS 〜 Switchゲーム機 / モバイル端末 / PC / Oculus VR） > 10年以上AWSのクラウドアプリケーション開発（現在はサーバーレス / コンテナ） > JAWS-UG GameTech+札幌運営 / Tokyo Demo Fest実行委員 / AWSコミュニティビルダー > できること: ゲームエンジン開発 / 開発者向けツール開発 / DevOps (CI/CD) アプリ+バックエンド開発 / クラウドアーキテクチャ設計 > 好きな言語: C++17 / GLSL / ASM (x64/ARM/6502/MIPS) / PHP / TypeScript > 好きなStripeサービス: Stripe Tax > 最近遊んでるゲーム: Satisfactory / Final Fantasy XI
3. 今日お話しすること • Stripe Appsとは ◦ Stripe Appsの制限 • WebGLを実装できるまでの道のり ◦ WebGLとは ◦ OpenGLのテクスチャ基本機能 ◦ WebGLとStripeアプリの連携 ◦ マウスからの入力 • ライブデモ
4. Stripe Appsとは
5. Stripe Appsとは • ダッシュボードにカスタム機能を直接埋め込める ◦ データ可視化 ◦ 独自サービスと連携 ◦ 自動化など • アプリ審査を通ると App Marketplace に公開可能
6. Stripe Appsとは • アプリ内でStripe APIとWebhook通知が利用可能 • アクティブビューによって特定コンテンツを 表示するのが可能
7. Stripe Appsとは • Reactでアプリを作る ◦ TypeScriptでコードを書く • Stripe CLIで簡単にアプリ作成 ◦ stripe apps create helloworld • CLIを使ってローカル環境でデバッグ可能
8. Stripe Appsの制限 • sandbox された IFRAME の中で動く ◦ DOMへのアクセスは禁止 ◦ データ入力は全てダッシュボードを通す • 用意されたUIコンポーネントのみ利用可能 ◦ カスタムなHTML / CSSは使えない！
9. WebGLを実装できるまでの道のり
10. WebGLとは • ブラウザ上で使えるOpenGL ESのAPI ◦ GPUを利用してリアルタイム3D表示ができる ◦ ESは「簡単に」改善されたOpenGL API • OpenGLは長く(1992年) 幅広くサポートされている ◦ Windows / Linux / Mac / iOS / Androidなど ◦ WindowsではDirectXもある ◦ Mac / iOSではMetalはある • Vulkanが「次代のOpenGL」と呼ばれえてる
11. WebGLとStripeアプリの連携？ • ブラウザでGPUの出力を直接表示するには： ◦ HTMLに <canvas> タグが必要 ◦ canvas からWebGLコンテキストを取得 • しかし... ◦ StripeアプリでカスタムなHTMLは使えない ◦ WebGL可能のアプリUIコンポーネントは （現在）提供されてない ◦ DOMにアクセスできない
12. WebGLとStripeアプリの連携？ …無理か？
13. OpenGLのテクスチャ基本機能 • 3Dメッシュに画像ファイル (.png / .jpgなど) を 貼り付けることが可能 • 画像ファイルからでなくても リアルタイムでテクスチャ 生成することも可能 ◦ ダイナミック環境マップ ◦ 画像編集処理 ◦ 3D → 2D最適化 ◦ エフェクトなど
14. WebGLとStripeアプリの連携？ • GPU側で生成されたテクスチャをCPU側に転送可能 ◦ 画像ファイルに保存（スクリーンショット機能） ◦ 毎フレーム連続で撮ると動画にもできる • GPU出力を直接表示しない場合は canvas 必要ない ◦ WebGLはプライベートDOM (非表示) で動かせる • Stripeアプリの画像表示するUIコンポーネントはある ◦ Img src はファイルでなくても dataURL も対応 ◦ 対応フォーマットは GIF, JPEG, SVG, PNG, WEBP
15. WebGLとStripeアプリの連携！ 1. 非表示のWebGLコンテキストで： a. 3Dシーンのフレーム出力をテクスチャに描く b. テクスチャ (RGBAデータ) をCPU側に転送する 2. RGBAデータをPNGにエンコード (非圧縮でも可能) 3. PNGデータを dataURL の文字列にエンコード 4. StripeアプリのImgコンポーネントに dataURL を渡す
16. WebGLとStripeアプリの連携！ 結構な作業量...
17. みんな大好きThree.js • ブラウザ上で動くJavaScriptの3Dエンジン • WebGLの初期化・描く処理を全て簡単なAPI • たった２行でレンダーして dataURL に変換してくれる
18. できた！
19. マウスからの入力 • onMouseMove などでマウス入力の 通知は普通に取れる ◦ ただし、X/Y絶対座標が取れても Img コンポーネントの原点座標が 取得できない (DOMアクセス禁止) ◦ React側で ref は使えない • ウィンドウ動かしてしまうと絶対座標 変動するので固定な引き算は無理
20. マウスからの入力 • 無理やりで... ◦ onMouseMove はマウスが Img コンポーネントに入っ てる時しか届かない ◦ Img コンポーネントのサイズ (幅/縦) はわかる ◦ 自動調整するバウンディングボックスを作成する ことで相対座標にはある程度できる • 相対座標を正確に変換するは正直厳しい • しかしデルタ移動 (マウス動かした距離) は問題ない！
21. ライブデモ
22. ご清聴ありがとうございます！ https://github.com/falken42/stripe-apps-webgl