画像処理ライブラリ
1. 要件
JavaScriptから呼び出せる
WebAssemblyであることは必須ではないと思う
WebAssemblyに圧倒的な高速化をもたらすことは期待していない
ffmpegなどの既存の資産を使えることのほうが重要
Reactから呼び出せる?
ここが自分でもよく分からない
普通、通常、コンポーネントはロジックを持たず、ロジックは hooks の中に分離される
React の中で使われるロジックはどのようなものが許容されるのか?
なんか自分の中にある偽の美意識が、複雑なロジックの呼び出しを許していない気がする
説明しよう!!
言説「useEffectは極力使うべきではない」
これはなぜ?
この言葉が語られたときのコンテキストを忘れている気がする
多分間違いではない
Reactコンポーネントを、一つの式と見立てたとき、副作用が存在することは、式の冪等性を殺してしまうことに等しい
冪等性のある副作用(???)があればいい?
なんじゃそりゃ
これがあるから副作用はContainer Componentの責務にしたほうがいいですよっと。
WebWorkerの呼び出し方法が分からない
個人的にもやもやしているのは、JavaScript以外のファイルのバンドルについてだと思う
CSSや画像を import したり、Comlinkのような抽象化が原因で、Reactの世界観にこれらをうまく取り込めていない
react-web-workerみたいのもあったけど、自分からすると更に抽象化されて何をしているのかわからない
中身を読んでみたほうがいいぞ!!!そのほうが安全だぞ!!!!!
あれはなぜ動くのか?
あと、パスを指定したらそのJavaScriptファイルが使える仕組みもわからない。
HTMLでは、<script src > に書かれたファイルがGETされて、読み込まれると思う
読み込まれるって解像度低いなあ。どうなるの?
ChatGPTに聞いた
Chromeに限った話をする
Chromeは複数のプロセスで成り立っている
Browserプロセス
通信など、コアな部分はここに隠蔽されている
タブごとに「Rendererプロセス」がある
プロセスを分離することで、ブラウザのコアな実装をタブ側から隠蔽することができる
Rendererプロセスは次の構成で成り立っている
仮想マシン
V8エンジン
Blink
DOMツリー
BlinkはDOMツリーの描画を行う。
V8エンジンではJavaScriptが動作し、DOM APIを介してDOMツリーオブジェクトに変更を加えたり、読み取ったりできる
ここから考えて、<script>タグが描画されるとき、その中身をBlinkが読んで、V8エンジンにそれを実行させるという実装になっていると思う。
V8エンジンはJavaScriptを動かす環境としての役割しかないから、文法的に正しいJavaScriptであれば、そのスクリプトの発生源には興味がない
だから、V8エンジンに<script>の中身を渡せばBlink側の仕事は終わりだ
<script src>の場合、GETが完了したらやることは同じ。V8エンジンにJavaScriptを渡すだけ。
自分の中のReactの世界観にあるのは、JS/TSで書かれたコンポーネントと、例で見るような簡単なフックだけで、何百行というロジックを書くことをしてこなかった
どこに入れるのが正解なの?
WebAssemblyの呼び出し方がわからない
WebAssembly
機能の仕組みを実例付きで説明できるようになろう・・・・。
必要な機能
動画
フレーム画像生成
2. 分析
次の種類がある
Canvasに描画する
react-art
react-konva
描画しない
描画しない場合どういうふうにデータは渡されるのか?
(予想)画像のビットマップ情報、JavaScript側ではArrayBufferで扱う
photon
WebAssemblyベースの画像処理
今後調べること
動画処理の最適化方法
どのように動画を読み込み、圧縮させるのか
そもそも動画編集アプリで次のスタイルを取るのは一般的なのか?
1. 動画を取得
2. バイト列でメモリ上に持つ
動画情報を全部メモリに乗せる実装は正しいの?
特定ビットの読み取りは高速だろうけど、メモリ不足になる気がする
ffmpeg.wasmもオンメモリだから大きなファイルを扱えない
https://zenn.dev/mryhryki/articles/2020-12-18-ffmepg-wasm#大きなファイルを扱えない
正しくないのなら、普通どう実装されるの?
現在フレームに近いフレームを一括で読み込んで、不要になったらメモリから破棄する?
部分的に読み込める仕組みが必要
3. 特定フレームにおけるフレーム画像を生成
動画編集アプリでは、フレーム画像を都度生成する?
効率的な方法はなんだろう
でもプレビューするにあたって、こうなるのは仕方ないか
4. 他エンティティと画像を合成
ここも分からない
Aviutlの実装では、フレームバッファが存在し、それに透過されたレイヤー画像を書き込んでく形を取っている
これなら、各レイヤーをcanvasと見立てて、そこに書き込むという方法でも代替可能だよね
あるいは、各レイヤーのOffScreenCanvasを作って、描画完了したらプレビュー画面のcanvasに集約するか
ffmpegにはoverlayというオプションがある
画像処理ライブラリで、各エンティティのフレーム画像(透過済)を順番に書き込むことでも可能
5. 書き出す際は、全フレーム画像を生成して連番画像として圧縮させる。
これは正しいの?
プレビュー画面でフレーム画像を生成するのは当然だけど、書き出しには別の方法を使ったりする?
各フレームは非同期に生成できるの?
できるとしたら、マルチスレッドで複数フレーム同時に生成したほうが速いね