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 サッポロ
   

   View Slide

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
   

   View Slide

3. 今日お話しすること
   ● Stripe Appsとは
   ○ Stripe Appsの制限
   ● WebGLを実装できるまでの道のり
   ○ WebGLとは
   ○ OpenGLのテクスチャ基本機能
   ○ WebGLとStripeアプリの連携
   ○ マウスからの入力
   ● ライブデモ
   

   View Slide

4. Stripe Appsとは
   

   View Slide

5. Stripe Appsとは
   ● ダッシュボードにカスタム機能を直接埋め込める
   ○ データ可視化
   ○ 独自サービスと連携
   ○ 自動化など
   ● アプリ審査を通ると App
   Marketplace に公開可能
   

   View Slide

6. Stripe Appsとは
   ● アプリ内でStripe APIとWebhook通知が利用可能
   ● アクティブビューによって特定コンテンツを
   表示するのが可能
   

   View Slide

7. Stripe Appsとは
   ● Reactでアプリを作る
   ○ TypeScriptでコードを書く
   ● Stripe CLIで簡単にアプリ作成
   ○ stripe apps create helloworld
   ● CLIを使ってローカル環境でデバッグ可能
   

   View Slide

8. Stripe Appsの制限
   ● sandbox された IFRAME の中で動く
   ○ DOMへのアクセスは禁止
   ○ データ入力は全てダッシュボードを通す
   ● 用意されたUIコンポーネントのみ利用可能
   ○ カスタムなHTML / CSSは使えない！
   

   View Slide

9. WebGLを実装できるまでの道のり
   

   View Slide

10. WebGLとは
    ● ブラウザ上で使えるOpenGL ESのAPI
    ○ GPUを利用してリアルタイム3D表示ができる
    ○ ESは「簡単に」改善されたOpenGL API
    ● OpenGLは長く(1992年) 幅広くサポートされている
    ○ Windows / Linux / Mac / iOS / Androidなど
    ○ WindowsではDirectXもある
    ○ Mac / iOSではMetalはある
    ● Vulkanが「次代のOpenGL」と呼ばれえてる
    

    View Slide

11. WebGLとStripeアプリの連携？
    ● ブラウザでGPUの出力を直接表示するには：
    ○ HTMLに タグが必要
    ○ canvas からWebGLコンテキストを取得
    ● しかし...
    ○ StripeアプリでカスタムなHTMLは使えない
    ○ WebGL可能のアプリUIコンポーネントは
    （現在）提供されてない
    ○ DOMにアクセスできない
    

    View Slide

12. WebGLとStripeアプリの連携？
    …無理か？
    

    View Slide

13. OpenGLのテクスチャ基本機能
    ● 3Dメッシュに画像ファイル (.png / .jpgなど) を
    貼り付けることが可能
    ● 画像ファイルからでなくても
    リアルタイムでテクスチャ
    生成することも可能
    ○ ダイナミック環境マップ
    ○ 画像編集処理
    ○ 3D → 2D最適化
    ○ エフェクトなど
    

    View Slide

14. WebGLとStripeアプリの連携？
    ● GPU側で生成されたテクスチャをCPU側に転送可能
    ○ 画像ファイルに保存（スクリーンショット機能）
    ○ 毎フレーム連続で撮ると動画にもできる
    ● GPU出力を直接表示しない場合は canvas 必要ない
    ○ WebGLはプライベートDOM (非表示) で動かせる
    ● Stripeアプリの画像表示するUIコンポーネントはある
    ○ Img src はファイルでなくても dataURL も対応
    ○ 対応フォーマットは GIF, JPEG, SVG, PNG, WEBP
    

    View Slide

15. WebGLとStripeアプリの連携！
    1. 非表示のWebGLコンテキストで：
    a. 3Dシーンのフレーム出力をテクスチャに描く
    b. テクスチャ (RGBAデータ) をCPU側に転送する
    2. RGBAデータをPNGにエンコード (非圧縮でも可能)
    3. PNGデータを dataURL の文字列にエンコード
    4. StripeアプリのImgコンポーネントに dataURL を渡す
    

    View Slide

16. WebGLとStripeアプリの連携！
    結構な作業量...
    

    View Slide

17. みんな大好きThree.js
    ● ブラウザ上で動くJavaScriptの3Dエンジン
    ● WebGLの初期化・描く処理を全て簡単なAPI
    ● たった２行でレンダーして dataURL に変換してくれる
    

    View Slide

18. できた！
    

    View Slide

19. マウスからの入力
    ● onMouseMove などでマウス入力の
    通知は普通に取れる
    ○ ただし、X/Y絶対座標が取れても
    Img コンポーネントの原点座標が
    取得できない (DOMアクセス禁止)
    ○ React側で ref は使えない
    ● ウィンドウ動かしてしまうと絶対座標
    変動するので固定な引き算は無理
    

    View Slide

20. マウスからの入力
    ● 無理やりで...
    ○ onMouseMove はマウスが Img コンポーネントに入っ
    てる時しか届かない
    ○ Img コンポーネントのサイズ (幅/縦) はわかる
    ○ 自動調整するバウンディングボックスを作成する
    ことで相対座標にはある程度できる
    ● 相対座標を正確に変換するは正直厳しい
    ● しかしデルタ移動 (マウス動かした距離) は問題ない！
    

    View Slide

21. ライブデモ
    

    View Slide

22. ご清聴ありがとうございます！
    https://github.com/falken42/stripe-apps-webgl
    

    View Slide