動画をデータモッシュ風に加工する
MP4・WebMを読み込み、残像、ブロックずらし、横スライス、RGB分離、ノイズ、フレーム停止を調整してWebMへ保存できます。Codec内部は変更しません。
動画データモッシュ・グリッチ加工ツールを開く結論：方式、素材、設定の順に切り分ける
最初にCodec内部を編集したのか、Decoded Frameを加工したのかを確認します。Canvas方式で静止画に近いSceneを選ぶと、前後Frameの差が小さくFeedbackの効果も弱く見えます。動きやScene切替を含む数秒へ範囲を移し、発生頻度と残像を上げて確認します。
Codec方式ではKeyframeが頻繁に参照画像を更新したり、対象Codecが加工Toolに対応していなかったりすると期待した伝播が起きません。Container名だけで判断せず、実際のVideo CodecとFrame構造を調べます。
症状別の確認表
| 症状 | DevelopToolsで確認 | Codec方式で確認 |
|---|---|---|
| ほぼ元動画のまま | 強度、頻度、残像、動きの量 | Codec対応、Keyframe間隔 |
| 一瞬だけ変わる | 加工範囲、頻度、Sceneの長さ | 新しいIntra/Key Frame |
| 色ずれだけ見える | Block・Slice・Feedbackを上げる | 操作したBitstream情報 |
| 毎回違う | Seedと設定値を固定 | Encoderと加工Scriptを固定 |
DevelopToolsでの確認順
- 加工範囲を動きのある3～5秒へ設定します。
- 残像重視Presetを選びます。
- 発生頻度と残像を上げてPreviewします。
- BlockとSliceを一つずつ上げます。
- 同じSeedで元動画と完成WebMを比較します。
DevelopToolsでできる加工と、できない加工
現行ツールはMP4・WebMを1件読み込み、デコード済みの各フレームをCanvasへ描画して、前フレームの残像、矩形ブロックの横ずらし、水平スライス、RGB分離、ノイズ、ランダムなフレーム停止を合成します。軽いグリッチ、VHS風、激しいデータモッシュ、RGB崩壊、残像重視のプリセットに加え、強度、発生頻度、ブロックサイズ、横ずれ量、RGB分離量、残像、ノイズ、ランダムシードを個別に調整できます。
| 項目 | 現行ツールの対応 |
|---|---|
| 入力 | MP4・WebMを1ファイル。実際の再生可否はContainer内のCodecとBrowserに依存 |
| 効果 | Feedback、Block Displacement、Horizontal Slice、RGB Shift、Noise、Frame Hold |
| 範囲 | 開始秒・終了秒を指定し、現在の再生位置を開始・終了へ設定 |
| 出力 | 元・1080p・720p・480p、15・24・30・60fps、3段階の品質、音声保持の選択、WebM保存 |
| 確認 | 元動画と最大960px幅の加工Preview、進捗、Cancel、完成WebMの再生 |
| 処理場所 | Canvas、MediaRecorder、Web AudioをBrowser内で実行。入力と結果を外部APIへ送信しない |
Iフレーム削除、GOPやKeyframe Intervalの変更、P/Bフレーム参照の書換え、Motion Vector編集、Scene Change検出、Bitstream破壊、FFmpeg、FFmpeg.wasm、FFglitch、Custom Codec Parserは実装していません。現行ツールはCodec内部へ手を加えるDatamoshingではなく、同じ見た目を安全なFrame加工で近づける「データモッシュ風」ツールです。
Codec DatamoshとCanvasグリッチを区別する
Codec Datamoshは、圧縮動画で前後Frameを予測する仕組みや参照関係、Motion Vector、Bitstreamの情報を意図的に変え、別Sceneの動きが以前の画像へ伝わるような崩れを作る手法です。CodecとEncoder設定によってFrame Typeや参照構造が異なるため、「Iフレームを消せば必ず成功する」と単純化できません。
DevelopToolsは圧縮済みBitstreamを壊しません。Browserが正常にDecodeした画像をCanvasへ描き、前Frameの合成やBlock移動でDatamosh風の見た目を作り、MediaRecorderで新しいWebMとしてEncodeします。Codec研究やFFglitchの操作を説明する記事でも、この処理差を明記します。
記事内の「Codec Datamosh」は一般的な圧縮構造の加工、「DevelopToolsの加工」はCanvasによる視覚的な近似を指します。操作手順として案内するのは現行ツールに実装されたCanvas効果だけです。
ブラウザで安全にグリッチ動画を作る基本手順
- 元動画を複製して保管し、MP4またはWebMを1件読み込みます。
- 元動画が最後まで再生でき、再生時間、解像度、形式が取得できることを確認します。
- 開始・終了位置を短い範囲へ設定し、弱いPresetから加工Previewを再生します。
- 主効果を残像・Block・Slice・RGBの一つに決め、強度と発生頻度を一項目ずつ調整します。
- 解像度、FPS、品質、音声保持を選んでWebMを作成し、先頭・中央・末尾を再生確認して別名保存します。
長時間・高解像度・60fpsほどCPUとMemoryを多く使います。最初は数秒、720p、24または30fpsで表現を決め、必要な場合だけ設定を上げます。
再生互換性・音声・時間を確認する
拡張子はContainerを表すだけで、内部のVideo CodecやAudio Codecまでは保証しません。同じMP4でもBrowserがDecodeできないCodecなら入力Previewを再生できず、同じWebMでも再生環境が対応しないCodecなら完成動画を開けません。元動画と完成動画を別のBrowserやPlayerでも確認します。
現行ツールはCanvas Streamへ元動画のAudio Trackを接続して録画します。音声を残す設定でもBrowserのWeb AudioやMediaRecorderの対応状況によって音声を含められない場合があります。開始・終了位置、FPS、Tabの負荷によっても見かけの音ずれが生じ得るため、波形や尺の数値だけでなく口の動きや打音など分かりやすい同期点を再生して確認します。
- 元動画を上書きせず、加工結果は日時付きの別WebMとして保存する
- 完成動画のDurationが指定範囲と大きくずれていないか確認する
- 音声保持時は先頭だけでなく末尾付近の同期も確認する
- 投稿先や編集SoftwareがWebMを受け付けるか事前に確認する
CodecとBrowser APIの一次資料
Frame Type、GOP、Motion Vector、Encoder OptionはCodecと実装で差があるため、FFmpegとFFglitchの公式資料を基準にします。Browser処理についてはMediaRecorderとCanvas Captureの仕様を参照し、現行ToolのSource Codeと実機結果を優先します。
具体例：静かなSceneで効果が見えない原因を確認する
カメラが固定されたSceneと大きく動くSceneを同じ動画から選びます。元動画は変更せず、まず数秒の範囲で表現と処理負荷を確認します。
同じSeedとPresetを使い、動きの量だけが異なる二つの範囲を比較します。完成後は残像、Block位置、Scene差、完成WebMの再現性を確認し、問題があれば一項目だけ変更して再作成します。
- 元動画を別名で保管し、Toolへ1件読み込みます。
- 短い加工範囲を決め、元動画と加工Previewを比較します。
- 目的に関係する設定を一つずつ変更し、Random Seedを記録します。
- 出力解像度、FPS、品質、音声保持を選び、WebMを作成します。
- 完成動画を最後まで再生し、別名で保存します。
Codec内部を編集する例とCanvas加工を同じ結果として扱わず、使用した方式と設定を記録してください。
よくある質問
- DevelopToolsはIフレームやMotion Vectorを変更しますか？
- 変更しません。BrowserでDecodeしたFrameへCanvas効果を加え、正常なWebMとして録画するデータモッシュ風加工です。
- 選択した動画はサーバーへ送信されますか？
- 送信されません。入力、Frame加工、録画、Preview、保存はBrowser内で完結します。