Stripe Appsに WebGLを実装してみた JP_Stripes サッポロ vol.8 2023年1月31日 (火) 株式会社コールド・フュージョン テッダー　マイケル JP_ Stripes サッポロ

$ 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

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

Stripe Appsとは

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

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

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

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

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

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

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

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

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

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

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

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

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

できた！

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

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

ライブデモ

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