PSD表示機能についての検討

[34j]

あらゆる動画ソフトについて、「ゆっくり動画」を楽に作成するためには、次の2つの機能が（ライブラリとして）あると良いと勝手に思っています。

• PSDTool 互換PSDファイルの表示
• 音声合成機能の組み込み VOICEVOX API や AssistantSeika (クローズドソース, Windows限定)

このうち1番目について、ag-psdをもとにag-psd-psdtool (デモ: https://34j.github.io/react-ag-psd-psdtool/ (任意のPSDTool互換PSDファイルをサポートしています)) を開発いたしましたので、そのような機能の実装にご興味があれば、ご意見などお伺いしたいです。（Motion CanvasやReVideoのライブラリとしての実装を考えていたのですが、バグがあるままメンテナンスされておらず困っていました。新しいプロジェクトを目にすることができとても嬉しいです。）

[bea4dev]

ありがとうございます。
所謂「ゆっくり動画」についてですが、設計当初から将来的にはライブラリ(src/lib)側で直接サポートするべきだと考えています。(せっかくの和製ソフトなので)
もしよろしければPR等を作成していただければスムーズに対応できるかと思います。
ただし、やや優先度低めとはいえど、私自身も実装するモチベーション自体はそこそこにあるため(「一応ある」という程度)、実装が被らないように事前に話し合っておく必要があるでしょう。

既にある機能としては、<Sound/>の音量に合わせて口パクアニメーションをさせる<Character/>コンポーネントがあり、これを改造するか作り直すことでライブラリ側でサポートできると考えています。(すべてこれに集約させる必要はない)
このコンポーネントは現在画像のみをサポートしているのでPSDファイルの特定のレイヤーを有効/無効にすることで実現できると思います。

このプロジェクトは現在、まだpluginシステムを整備できていないのでsrc/libに実装してしまうのが最も手っ取り早そうです。

以上です。

返信お待ちしています。

[34j]

そうですね、（あまり実装を追えていないままコメントしており恐縮てすが、）追加の依存関係を入れることになるためいろいろなものが整備されてから別に開発したほうが良い気がするものの、もしUIと連携させる計画があるとしたらここで開発してしまったほうが良い気もしますね

ただ、実現できそうということがわかったのは嬉しいです

少しやることが溜まっており、当分実装が競合する心配はないと思います（お力になれずすみません）

[bea4dev]

ありがとうございます、承知しました。

少しずつこちらの方で実装を進めておきますので、もし何かあればお声がけください。
対応させていただきます。

(完全に実装できるまでissueは開いたままにしておきます)

[aqiq-marine]

Psdの表示について提案があります。

Characterコンポーネントの増強として目パチやあいうえお口パクできるようなコンポーネントをがあるといいなと思うのですがどうでしょうか？

現状のCharacterは画像ファイルの切り替えによって口パクに対応していますが、目パチ口パクを合成したいとなるとpsdなどのレイヤーを持つ形式のほうが扱いやすいかなと思います。

またag-psd-psdtoolのrenderPsdはpsd、どのレイヤーを表示するかのオプション、レンダリングオプション（レンダリング先canvasなど）を受け取ってcanvasにpsdを描画する形式になっています。
そのため目パチをするコンポーネントと口パクをするコンポーネントをばらばらに作ってClipに入れてもモーションの合成はできません。

ということでPsdを管理する新たなコンポーネントが必要になるかと思います。
PsdCharacterというコンポーネントを作ってその中はDSLのようにするのはどうでしょうか？

またゆくゆくは音声合成機能を組み込むとしてもまずはwavなどの再生が技術的な障壁も少ないかなと思います。
口パクはrhubarbというツールがあり音声から口の形を時間に対応させるjsonを作れます。

次のような実装を想定しています

<Clip>
  <PsdCharacter psd="hoge.psd">
    <Voice src="hoge.wav">
      <Motion motion={async (frames) => {
        // 目パチなどに必要なpsdのオプションを返す
        return {}
      }}/>
      // Motionを返すコンポーネント
      <LipSync src="hoge.json"/>
    </Voice>
  </PsdCharacter>
  <PsdCharacter psd="huga.psd">
    // Motionを返すコンポーネント
    <Blink/>
  </PsdCharacter>
</Clip>

初issueなので変なところがあるかもしれませんがよろしくお願いします

[bea4dev]

非常に良いかと思います。
いくつかコメントさせてください。

Characterコンポーネントの増強として目パチやあいうえお口パクできるようなコンポーネントをがあるといいなと思うのですがどうでしょうか？
またag-psd-psdtoolのrenderPsdはpsd、どのレイヤーを表示するかのオプション、レンダリングオプション（レンダリング先canvasなど）を受け取ってcanvasにpsdを描画する形式になっています。 そのため目パチをするコンポーネントと口パクをするコンポーネントをばらばらに作ってClipに入れてもモーションの合成はできません。
ということでPsdを管理する新たなコンポーネントが必要になるかと思います。 PsdCharacterというコンポーネントを作ってその中はDSLのようにするのはどうでしょうか？
正しいと思います。このあたりは最初から専用コンポーネントが必要だと考えています。
ただ、DSLを新たに作成するのは流石に実装が重いかと思います。なので少なくとも最初はtsxでDSLっぽいものを書けるようにする、というのが妥協点になるかと思います。 (というかおそらくこれを想定されてのことでしょうか...？)

実装イメージについて

rhubarbというライブラリに関してはあまり知識がない状態なのでやや憶測が混ざりますが、jsonを作って渡すところはできれば統合して隠蔽したいです。経験則としてFile IOが絡むと特にWindowsでの並列レンダリング時に問題が露呈しやすく、ユーザーにできるだけ触らせない、というのがFrameScriptで取っている方針になります。

いつ実装するの？

実際に着手するのはもう少し先になりそうです。（それでもこの機能はできるだけ実装すべきであると考えています。それまではバグ修正や小さな改善に留める予定です。）
完全に私事で恐縮ですが、最近新たなプロダクトに取り組んでおり、そちらが落ち着き次第着手という形になりそうです。
もし、実装してみたいという要望がある際はご連絡いただければconflictを避けられるでしょう。

[aqiq-marine]

あまり活発な参加はできませんが実装したいです。

rhubarbというライブラリに関してはあまり知識がない状態なのでやや憶測が混ざりますが、jsonを作って渡すところはできれば統合して隠蔽したいです。

psdファイルの取得はSoundのようにバックエンドからFileQueryで行うということですね。

Characterとは別にPsdCharacterを実装しようと考えていますがどうでしょうか？
また一旦jsonによる口パクは保留し、バックエンドに変更を加えずにできるコンポーネントの追加を行いたいと思います。

[bea4dev]

Characterとは別にPsdCharacterを実装しようと考えていますがどうでしょうか？

良いと思います！ぜひともお願いしたいです。

やや断片的なアイデアで申し訳ないですが、音量等のパラメータ等を渡すための型を定義して、(時間ごとの音量等のステータス) => { return /* PSD状態 */ }という関数を引数として渡せるようにすればきれいに実装できるかもしれません（必ずしもこのアイデアを採用してほしいわけではなく、採用するかどうかはおまかせします）

[bea4dev]

大きく前進しました。
PsdCharacterが実際に追加されたことでゆっくり実況スタイルが作りやすくなりました。
実際にPSDファイルを取り込んで動かすことができます。
（最終はおそらくrhubarbのバックエンド統合か...？）