Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Implementing WebGL with Stripe Apps

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.)

Michael Tedder

January 31, 2023
Tweet

More Decks by Michael Tedder

Other Decks in Programming

Transcript

  1. $ 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
  2. 今日お話しすること • Stripe Appsとは ◦ Stripe Appsの制限 • WebGLを実装できるまでの道のり ◦

    WebGLとは ◦ OpenGLのテクスチャ基本機能 ◦ WebGLとStripeアプリの連携 ◦ マウスからの入力 • ライブデモ
  3. Stripe Appsとは • Reactでアプリを作る ◦ TypeScriptでコードを書く • Stripe CLIで簡単にアプリ作成 ◦

    stripe apps create helloworld • CLIを使ってローカル環境でデバッグ可能
  4. Stripe Appsの制限 • sandbox された IFRAME の中で動く ◦ DOMへのアクセスは禁止 ◦

    データ入力は全てダッシュボードを通す • 用意されたUIコンポーネントのみ利用可能 ◦ カスタムなHTML / CSSは使えない!
  5. WebGLとは • ブラウザ上で使えるOpenGL ESのAPI ◦ GPUを利用してリアルタイム3D表示ができる ◦ ESは「簡単に」改善されたOpenGL API •

    OpenGLは長く(1992年) 幅広くサポートされている ◦ Windows / Linux / Mac / iOS / Androidなど ◦ WindowsではDirectXもある ◦ Mac / iOSではMetalはある • Vulkanが「次代のOpenGL」と呼ばれえてる
  6. WebGLとStripeアプリの連携? • ブラウザでGPUの出力を直接表示するには: ◦ HTMLに <canvas> タグが必要 ◦ canvas からWebGLコンテキストを取得

    • しかし... ◦ StripeアプリでカスタムなHTMLは使えない ◦ WebGL可能のアプリUIコンポーネントは (現在)提供されてない ◦ DOMにアクセスできない
  7. OpenGLのテクスチャ基本機能 • 3Dメッシュに画像ファイル (.png / .jpgなど) を 貼り付けることが可能 • 画像ファイルからでなくても

    リアルタイムでテクスチャ 生成することも可能 ◦ ダイナミック環境マップ ◦ 画像編集処理 ◦ 3D → 2D最適化 ◦ エフェクトなど
  8. WebGLとStripeアプリの連携? • GPU側で生成されたテクスチャをCPU側に転送可能 ◦ 画像ファイルに保存(スクリーンショット機能) ◦ 毎フレーム連続で撮ると動画にもできる • GPU出力を直接表示しない場合は canvas

    必要ない ◦ WebGLはプライベートDOM (非表示) で動かせる • Stripeアプリの画像表示するUIコンポーネントはある ◦ Img src はファイルでなくても dataURL も対応 ◦ 対応フォーマットは GIF, JPEG, SVG, PNG, WEBP
  9. WebGLとStripeアプリの連携! 1. 非表示のWebGLコンテキストで: a. 3Dシーンのフレーム出力をテクスチャに描く b. テクスチャ (RGBAデータ) をCPU側に転送する 2.

    RGBAデータをPNGにエンコード (非圧縮でも可能) 3. PNGデータを dataURL の文字列にエンコード 4. StripeアプリのImgコンポーネントに dataURL を渡す
  10. マウスからの入力 • onMouseMove などでマウス入力の 通知は普通に取れる ◦ ただし、X/Y絶対座標が取れても Img コンポーネントの原点座標が 取得できない

    (DOMアクセス禁止) ◦ React側で ref は使えない • ウィンドウ動かしてしまうと絶対座標 変動するので固定な引き算は無理
  11. マウスからの入力 • 無理やりで... ◦ onMouseMove はマウスが Img コンポーネントに入っ てる時しか届かない ◦

    Img コンポーネントのサイズ (幅/縦) はわかる ◦ 自動調整するバウンディングボックスを作成する ことで相対座標にはある程度できる • 相対座標を正確に変換するは正直厳しい • しかしデルタ移動 (マウス動かした距離) は問題ない!