個人開発動画編集ソフト「Beutl」の紹介

はじめに

こんにちは。yutotuyです。

今回は、わたしが個人開発している動画編集ソフト、Beutlを紹介していきます。
また、次回以降の記事からはBeutlの開発中に発生した課題と解決策を載せていきます。

https://github.com/b-editor/beutl

https://beutl.beditor.net

背景

私が動画編集ソフトの開発を始めたのは、中学生の頃にさかのぼります。当時、趣味で動画編集をしていた私は、使っていたAviUtlというソフトのスクリプト言語を通じてプログラミングに興味を持ちました。
コロナ禍で自宅にいる時間が増えたこともあって、「もっと性能が良く、安定した動画編集ソフトがあったらいいな」という単純な思いから、プログラミングの勉強と並行して「BEditor」（Beutlの前身）の開発を開始しました。実は、開発する前はAviUtlの利用を便利にするソフトの開発を行っていましたが、AviUtl本体のパフォーマンスや安定性に根本的な課題を感じ、ゼロから新しいソフトを作ることを決めました。
あれから5年、紆余曲折を経て、Beutlは現在に至ります。

Beutlの現在

UI

ダークモードを基調としたUIです。ドッキングUIを採用しておりユーザーが自由にレイアウトを変更できるようにしています。
デフォルトのレイアウトでは、プロパティエディタを縦長に配置して、一目で設定がわかるようにしています。

対象ユーザー

Beutlの対象ユーザーは以下の通りで、Adobeで例えるとPremiere Proというより、After Effectsをよく使うような層を対象にしています。

• アニメーションやエフェクトを組み合わせた動画を作成したい人
• モーショングラフィックスを作りたい人
• (AviUtlのようなソフトをmacOSやLinuxで使いたい人)

主要機能と特徴

現在実装されている主な機能と特徴は以下の通りです。

• クロスプラットフォーム対応: AviUtlがWindows専用だったのに対し、BeutlはWindows、macOS、Linuxで動作します。これにより、OSの選択に縛られることなく自分の好みの環境で編集作業を行えます。
• キーフレームアニメーション: 直感的なキーフレーム設定により、オブジェクトの動き、透明度、サイズなどをアニメーション化できます。
  
• 豊富なエフェクト:
  • 基本的なエフェクト: 色フィルター、ぼかし、シャドウ、LUT（Look Up Table）など
  • 高度なエフェクト: 縁取り、内側シャドウ、ロングシャドウなど一般的な編集ソフトではあまり見かけないエフェクトも実装
• 拡張機能システム: プラグインのような形で機能を拡張できます。
  • エフェクトの追加
  • 新しいオブジェクトの追加
  • コーデックの追加
  • UIのカスタマイズ
• ジオメトリエディタ: 図形を直感的に編集できる専用エディタです。Figmaのペンツールのような感じです。
  

技術スタック

• 開発言語: C#
  • 開発当時はVisual StudioとWPFで簡単にUIが作ることができるという理由で選択していました。
  • 現在はクロスプラットフォーム対応、ポインタを操作できる点、高いパフォーマンス、豊富なライブラリ群が利用できることからC#の利用を続けています。
• UIフレームワーク: Avalonia
  • C#でクロスプラットフォームUIを実現するためのフレームワークです。
  • C#版のデスクトップ寄りのFlutterだと思っていただければ
  • 選定理由はWPFと書き方などが似ているためです
• 動画入出力:
  • 主にFFmpeg（libav*）
  • 特定の条件下ではプラットフォーム固有のAPIも活用:
    • Windows：MediaFoundation
    • macOS：AVFoundation
• 描画処理:
  • SkiaSharp: Google製の高速なグラフィックスライブラリ、Avaloniaの内部でも使われている
  • 独自実装のSceneGraph: 効率的な描画フローを構築
  • 一部のエフェクト処理にはOpenCVを活用

アーキテクチャ

Beutlのアーキテクチャは、事前に設計したものではなく、開発を進める中で自然とできていました。国産オーガニックソフトウェアなのです()
大まかなレイヤー構造

1. 最下層: Beutl.Core

• システムの基盤を形成する層
• CoreObjectとCorePropertyクラスによるオブジェクトとプロパティの統一的な管理
• シリアライズ/デシリアライズ機能
• ログ管理システム
• 階層構造のためのHierarchicalクラス
• Undo/Redoを実現するコマンドパターンの実装

2. 中層: Beutl.Engine

• コアエンジン機能を提供
• キーフレームアニメーションシステム
• 音声処理
• 描画処理・画像処理（SkiaSharp、独自SceneGraph、OpenCVの統合）
• 各種メディアファイルの入出力（FFmpeg、MediaFoundation、AVFoundationとの連携）

3. 中層: Beutl.ProjectSystem

• プロジェクト管理システム
• Project > Scene > Elementの階層構造
• タイムライン管理

4. 上層: Beutl.Extensibility

• 拡張機能のためのインターフェース
• プラグイン管理
• エフェクト、オブジェクト、コーデックなどの拡張クラス定義

5. 最上層: Beutl (UI)

• AvaloniaによるUIの実装
• MVVM（Model-View-ViewModel）パターンを採用
• ViewとViewModelのみを担当（ModelはBeutl.Core〜Beutl.ProjectSystemが担当）

パフォーマンス、安定性

パフォーマンスと安定性の課題は、以下の工夫により解決しています、たぶん:

パフォーマンス

• GPUの活用
  • SkiaのバックエンドにOpenGLを使用するように設定することで実現しています
• 描画ノードキャッシュ:
  • 描画処理をSceneGraphのノードに変換し、そのノードが前回描画した時と同じかどうかを比較します
  • 同じ状態が続いた場合、そのノードの描画結果をキャッシュに保存します
• フレームキャッシュ
  • 画面全体の描画結果を毎回キャッシュに保存します
  • ユーザーが編集処理を行ったら、その編集された時間範囲のキャッシュを消去します
  • 描画ノードキャッシュと比べるとメモリを多く消費しますが、比較処理をしないので簡単に実装できます。
  • Beutlではメモリ消費を抑えるために、画像サイズの縮小やピクセルフォーマットの変換を行っています。

安定性

• 自動保存機能
  • クラッシュしても編集内容が消失しないように自動保存機能を実装しています。

BEditorからBeutlへ

動画編集ソフト開発当初はBEditorという名前で公開していましたが、いくつかの大きな変更があったためBeutlに変更しました。

変更点

• 3D機能の廃止: BEditorでは3D機能で立体的なオブジェクトを描画可能でしたが、Beutlでは2Dのみ対応しています
• 描画フローの変更: BEditorではオブジェクトが描画されているBitmapを直接後続エフェクトやトランスフォームの処理に渡すような感じだったが、Beutlではより抽象化し描画関数を渡していく形にしました
• BEditorはAviUtlとの互換性を意識していましたが、Beutlはあまり意識していません
• BEditorにはBeutlほどの高機能なキャッシュ機能を実装していませんでした

ちなみにBeutlという名前は正確には私が決めたのではなく、Google Formsで募集したものです。AnyFlex, BeUtl, OCEStudio (Opus Composing Editing Studio), Folio Studioの回答が集まり、 Twitterのアンケート機能で最終的にBeUtlに決まりました。
しかし、BeUtlはさすがにAviUtlを意識しすぎだと思ったので、Uを小文字にしてBeutlに変更しました。

開発中に直面した問題

解決策を含めたバージョンは別の記事として投稿する予定です。技術的な課題というより、自分のスキル不足によるものがほとんどでした。ここには載せていませんが、過去に自分が作った仕様のせいで苦しめられるということも多々ありました。

• 動画の入出力の実装が難しい
• OpenGLが単一スレッドでしか使えない
• プラグインで拡張したクラスのシリアライズができない
• 日本語フォントが描画できない
• 改行を含むテキストのレンダリング

今後の展望

今後の展望としては以下の機能の実装を予定しています。

• 音声処理の強化
  • 現在の音声処理の仕様は最低限の機能しかないので、より拡張性を持たせられるように仕様そのものを変更しようと考えています。（2年前から計画）
• メディアマネージャ
  • 動画、音声、画像、フォントファイルなどを一元的に管理できる機能を実装しようと思っています
• 3D機能
  • BEditorに搭載していた3D機能をより強化して、Beutlに組み込みたいと考えています。（検証中）
• 音声読み上げ
  • 拡張機能として、VOICEVOX COREを使用した音声読み上げ機能を実装しています。（リリースはまだ）

おわりに

まだまだ発展途上ではありますが、一人の中学生だった私の小さな不満から生まれたプロジェクトが、今では多くの人に関心を持っていただけるソフトウェアに成長したことを嬉しく思います。
次回以降はBeutlの開発中に直面した問題と解決についてを投稿していきます。
よろしくお願いします🙏