Works

Liminal3D

アプリの3Dパースペクティブショットを作成するためのWebベースのエディタです。

liminal3d.vercel.app

概要

Liminal3Dは、開発者がプロモーションコンテンツや機能リリース動画用に、アプリケーションの3Dパースペクティブショットを作成できるWebベースのエディタです。ユーザーは画面録画をアップロードし、3D環境に仮想カメラを配置し、イージングを設定して、キーフレームで再生を同期させることができます。これらすべての作業がブラウザ上で完結します。

課題

通常、製品デモやリリース動画は、従来の動画編集ソフトウェアやモーションデザインツールで作成されます。これらのワークフローは、洗練されたプロモーションコンテンツをすばやく作成したい開発者にとって、面倒なことが多いです。その結果、時間のかかる手動編集になるか、あるいは目を引かない退屈な平面の画面録画になってしまいます。

さらに、ほとんどの3Dシーン構築ツールは、学習曲線が急な重いデスクトップアプリケーションであり、短期間で反復的なプロジェクトには適していません。

解決策

Liminal3Dは、本来なら平坦で退屈になってしまう画面録画から、高品質な3Dパースペクティブ動画を作成することに特化したエディタです。このアプリケーションは完全にブラウザで動作し、以下の3つの主要機能を備えた直感的なエディタを提供します。

画面録画のアップロード: アプリの録画をアップロードし、3Dシーンのテクスチャとして使用します。
仮想カメラの配置: スムーズでシネマティックな動きを実現するために、イージング設定が可能な仮想カメラを3D空間に配置します。
キーフレームとの再生同期: 録画がシーン内でいつ、どのように再生されるかを正確に制御します。

開発プロセス

エクスポートパイプライン

ブラウザで動画処理アプリケーションを構築することには、特にエクスポートにおいて特有の課題がありました。

当初は、プレビューキャンバスのすべてのフレームをキャプチャし、FFmpeg.wasmでエンコードしていましたが、これはシンプルである反面、エクスポート時間が長くなり、ファイルサイズも大きくなってしまいました。

エンコードの選択肢を調査した結果、ボトルネックはFFmpeg.wasmのソフトウェアエンコーディングとインメモリファイルシステムI/Oにあることに気づきました。そこで、ハードウェアアクセラレーションを利用して、フレームをエンコードされたチャンクとしてキャプチャするWebCodecs APIに切り替え、その後FFmpeg.wasmを使用してチャンクを最終的な動画ファイルに多重化（mux）するようにしました。これにより、エクスポート時間とファイルサイズは大幅に削減されましたが、より大きな動画や高解像度の動画にはまだ理想的ではありませんでした。

同じ頃、OpenCut（オープンソースのCapCut代替）が注目を集めており、Webベースの動画エクスポートに関する情報が多く共有されていました。その時、ブラウザでネイティブに動作するWebAssemblyベースの動画エンコーダーであるMediabunnyについて知りました。OpenCodeを使用してパイプラインを移行したところ、エクスポート時間が劇的に短縮されました。

React Three Fiberとキーフレームシステム

特に注力したのはキーフレームシステムです。プロのツールのように滑らかな操作感を実現したかったため、イージングカーブがカメラの動きに直接反映されるレスポンシブなタイムラインの構築に時間を投資しました。マーカーのドラッグ操作、ライブプレビューのレンダリングの最適化、タイムラインスクラバーのガタつきの修正により、この体験は大きく向上しました。react-three-fiber (r3fiber) レイヤーにより、カメラのパスをリアルタイムでプレビューできるようになり、調整するたびに即座に視覚的なフィードバックを得ることができました。後にターゲット位置のキーフレーム機能も追加し、クリエイターが複雑な動きの中でカメラのフォーカスをより細かく制御できるようにしました。

また、キーフレームマーカーをドラッグする際に小さなプレビューポップアップを表示し、タイムライン上のその時点での動画のライブプレビューを確認できるように設計しました。これは、即座に視覚的なフィードバックを提供し、キーフレームの設定プロセスをより直感的にするための重要な機能でした。

さらに、タイムラインでの再レンダリング回数を減らすために react-scan を使用しました。これは、キーフレームの数が増えてもスムーズなユーザー体験を維持するために不可欠でした。この最適化により、複雑なシーンや多数のキーフレームを扱う場合でも、よりレスポンシブなインターフェースを実現できました。

ポストプロセッシング効果

キーフレームシステムを具体化していく中で、プレビュー動画にポストプロセッシング効果も追加したいと考えました。当初は glscissors を使用して、エディタとプレビューの両方を単一のキャンバスにレンダリングしていましたが、後でアプリケーションを別々のキャンバスに移行しました。このアーキテクチャの変更は、高度なポストプロセッシング効果をプレビューにのみ適用する必要があったためです。リサイズ可能なフローティングプレビューコンポーネントが導入され、ユーザーはアスペクト比の調整やショットの確認をより柔軟に行えるようになりました。

別々のキャンバスが導入されたことで、視覚的なツールセットを大幅に拡張できました。被写界深度、ブルーム、色収差、トーンコントロール、魚眼レンズ効果など、強力なポストプロセッシング効果のスイートをAIコーディングエージェントを使用して統合しました。さらに、動画テクスチャの色空間をsRGBに設定することで正確な色表現を保証し、オプションで動画上にカスタマイズ可能なガラス素材を重ねることで、視覚的な洗練さをさらに一段階高めました。

デザイン

エディタは、クリック感や触覚的な感触があり、キーフレーム体験をできるだけ直感的にすることに重点を置いてデザインしました。タイムラインのデザインはプロ向けの動画編集ソフトウェアからインスピレーションを得ましたが、全体的な美しさはクリーンでモダンな状態を保ちたいと考えました。

下部のタイムラインはキーフレームのタイミングを操作するために使用されますが、インタラクションの大部分は右側のパネルで行われます。右側のパネルには以下のようなタブがあります。

Animate (アニメーション) — カメラの位置と回転（またはカメラコントローラーのタイプによってはターゲット位置）のキーフレームコントロール。
Scene (シーン) — 動画のスケール、角丸の半径、ポストプロセッシング効果など、キーフレーム間で補間されない静的な値のコントロール。
Presets (プリセット) — ユーザーが位置や値を保存して繰り返し使用できるよう、将来の機能拡張のために予約されています。
Export (エクスポート) — 動画の解像度、フォーマット、品質の設定。

最後に

このプロジェクトを通じて、パフォーマンスの高いReactアプリケーションを構築する方法や、ブラウザでの動画処理の実装に伴う特有の課題に対処する方法を学びました。また、2025年におけるコーディングエージェントの変化と進化を肌で感じました。その年の1週間の春休みの間に急いでハックしてプロトタイプを作り、その後数ヶ月かけて機能の追加やパフォーマンスの最適化など、反復的な改善を行いました。そして同じ年の終わり頃、コーディングモデルが複雑なコードの記述やデバッグ能力において大幅に向上していることに気づき、エージェントの助けを借りることで、より高度な機能や最適化を追加することができました。