はじめに

動画プレイヤーを作ったので、今度は HTML の Video をいじってみたい!
その中で、手頃で便利な処理といえば、アプコン (アップコンバート) ですね!
というわけで、アニメで顕著な効果が出るといわれている Anime4K を使ってみたい!

でも、探したはいいものの 4系 (4.0.1) の WebGL 移植が見当たらない!
3系の昔の実装はありましたが、4系に関しては全然見当たりません...

じゃあ、やってしまえということで、Anime4K 4系 (4.0.1) を WebGL に移植した!
という記事になります。

成果物

Anime4K.js という形で作りました。
静止画、動画のアップコンバートをサポートしています。

読み込むと、こんな感じで window に Anime4KJS が生えて、アップスケーラを作れます。
現時点では video の信号の 2倍アップスケールができます。

const upscaler = new Anime4KJS.VideoUpscaler(30 /* TARGET FPS */, Anime4KJS.ANIME4KJS_SIMPLE_M_2X /* PROFILE */);
upscaler.attachVideo(videoElement, canvasElement);
upscaler.start(); // start upscaling
// ...
upscaler.stop(); // stop upscaling

この辺の敵

浮動小数点数テクスチャ

Anime4K は CNN の演算結果を、そのままテクスチャに入れ、次の層へ伝搬していきます。
このため、テクスチャが小数に対応していないと、切り捨てが発生し丸められます。
その結果として、整数で処理を行うと、層が進むたびに切り捨てられてしまいます。

なので、浮動小数点数テクスチャを使って、整数への丸めを回避する必要がありました。

WebGL1 の場合

WebGL1 で浮動小数点数テスクチャを扱う場合には、以下の拡張を使う必要があります。

OES_texture_float: 32bit 精度の浮動小数点数テスクチャ
OES_texture_half_float: 16bit 精度の浮動小数点数テスクチャ

OES_texture_float 拡張を使う場合には、このようにデータを書き込みます。

gl.getExtension('OES_texture_float'); // 1度やればいい, get で有効化って微妙じゃない?
// 実際にデータを入れるときに gl.FLOAT を指定する
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA, width, height, 0, gl.RGBA, gl.FLOAT, null);

OES_texture_half_float の場合は、以下のようになります。
拡張のオブジェクトの中の HALF_FLOAT_OES を使うと半精度 (16bit) になります。

const ext = gl.getExtension("OES_texture_half_float");
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA,  width, height, 0, gl.RGBA, ext.HALF_FLOAT_OES, null);

WebGL2 の場合

WebGL2 では、浮動小数点テスクチャはサポートされています。
ただ描画する際には EXT_color_buffer_float 拡張が必要です。

gl.getExtension('EXT_color_buffer_float'); // 1度やればいい, get で有効化って微妙じゃない?

// 32bit float
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA32F, width, height, 0, gl.RGBA, gl.FLOAT, null);
// 16bit float
gl.texImage2D(gl.TEXTURE_2D, 0, gl.RGBA16F, width, height, 0, gl.RGBA, gl.HALF_FLOAT, null);

MPV のフック形式の自動変換

Anime4K は MPV のフック形式でフラグメントシェーダーを記述しています。
これは、勝手に頂点シェーダーやシェーダーの変数定義を行ってくれる便利なものです。
また、フックタイミングを記載でき、様々な処理に割り込んでシェーダーを適用できます。

ただ、WebGL に移植する際には、この機能を自前で補完しなければなりません。
シェーダーの量が多いため、ここは自動で TypeScript + glsl に変換するコードを書きました。

基本的に Anime4K 4系 (4.0.1) は、以下のフックで構成されています。
(昔は YUV に対するフックなどがありましたが、4系では見当たりませんでした)

MAIN フック: YUV から RGB に変換された後で、リサイズ前
PREKERNEL フック最終出力前

この部分を TypeScript + WebGL でフック処理するように変換しています。

課題

処理の最適化

オリジナルは 4ms でアップスケールできるようなのですが、14ms くらいかかってしまいます。
なぜか 1 テスクチャ書き込みに 1ms かかってしまうみたいです。
テスクチャを 12 個くらい書いてるので、14 ms かかってしまっているという感じです。

最適化が足りてないのだろうと思っているので、今後改善したいところです。

まとめ

Anime4K 4系 (4.0.1) を WebGL に移植して、ブラウザでアップコンバートしました。
浮動小数点数テクスチャや MPV (libplacebo) のフックを勉強するいい機会になりました。

こんどは、アニメ向けではないアップスケーラも挑戦してみたいところです。