2026/05/10(日) [n年前の日記]
#1 [opentoonz] 画像のズームイン/アップスケールが気になる
BS11で放送されてるTVアニメ「こめかみっ！ガールズ」を毎週視聴しているのだけど、ED映像の一部のカットが気になってる。女の子が画面の奥から手前にじわじわとゆっくりとズームイン？ ドリーイン？ トラックアップ(T.U.)？ アップスケール？ してくるカットなのだけど…。
フツーの解像度の素材画像を無理矢理アップスケールしてしまったのか、カメラに近づくにつれて画質がどんどん荒れて(?)いって…。ドットが見える…。しかもゆっくりズームしているから、しっかり観察できてしまって…。
あれは笑いをとりたくてわざとやっているのか、それとも予算もスケジュールも無くて修正作業がもうできないのか、つまりは計算でやっているのか、天然でなっちゃったのか、それすら判断がつかなくてもやもやする…。
ズームインを綺麗に見せるにはどうすればいいのだろう。以下の2つのどちらかになるのかな。
ただ、Adobe After Effects (AE) あたりなら、低解像度の画像素材しかなくてもオプション項目を変更するだけでどちらの処理も内部でやってくれそうな気もする…。いや、自分、AE は使ったことないから知らんのだけど。たしか、ズームした時に画像が荒れないようにできるよ、みたいな話をどこかで見かけたような…。偽記憶かな…。
Adobe Flash (Adobe Animate) なら、ベクターデータで描いておけば拡大しても線の太さを変えないようにすることができたはず。ズームインした時の印象が変わるというか…。
フツーの解像度の素材画像を無理矢理アップスケールしてしまったのか、カメラに近づくにつれて画質がどんどん荒れて(?)いって…。ドットが見える…。しかもゆっくりズームしているから、しっかり観察できてしまって…。
あれは笑いをとりたくてわざとやっているのか、それとも予算もスケジュールも無くて修正作業がもうできないのか、つまりは計算でやっているのか、天然でなっちゃったのか、それすら判断がつかなくてもやもやする…。
ズームインを綺麗に見せるにはどうすればいいのだろう。以下の2つのどちらかになるのかな。
- アップスケールに耐えるぐらいに高解像度の素材をあらかじめ用意して処理をする。
- 素材画像をベクターデータで用意して処理をする。
ただ、Adobe After Effects (AE) あたりなら、低解像度の画像素材しかなくてもオプション項目を変更するだけでどちらの処理も内部でやってくれそうな気もする…。いや、自分、AE は使ったことないから知らんのだけど。たしか、ズームした時に画像が荒れないようにできるよ、みたいな話をどこかで見かけたような…。偽記憶かな…。
Adobe Flash (Adobe Animate) なら、ベクターデータで描いておけば拡大しても線の太さを変えないようにすることができたはず。ズームインした時の印象が変わるというか…。
◎ AEにも罠があるらしい :
AE関係についてググってみたら気になる記事を見かけた。
_After Effectsでベクタ形式の画像を拡大すると画像がぼやけた表示になる - After Effects Tips | iPentec
「連続ラスタライズ」が有効になっていると、せっかくベクターデータを扱っていても、アップスケール時にラスター画像をアップスケールしたような悲惨(?)な結果になってしまうらしい…。そんな罠が…。AE怖い…。
「アップスケール (ディティールを保持)」というエフェクトもあって、それを使うとクッキリ感が増すらしい？
_アップスケール (ディティールを保持) を利用して画像を高画質で拡大する - After Effects Tips | iPentec
_【After effects】アップスケール(ディテールを保持) - YouTube
_アップスケール(ディテールを保持)とは - ディストーション | Vook(ヴック)
AIでアップスケールプラグインも存在しているらしい？ でもこれは動画全体にかけるプラグインなのだろうか…。
_ScaleUp - Flashback Japan Inc
_REZup V2 - Flashback Japan Inc
_【AfterEffects】Scaleupのテスト2【プラグイン】 - YouTube
AEは持ってないし使ったこともないから本当にできるのか知らんのだけど…。方法はいくつかあるらしいなと…。
_After Effectsでベクタ形式の画像を拡大すると画像がぼやけた表示になる - After Effects Tips | iPentec
「連続ラスタライズ」が有効になっていると、せっかくベクターデータを扱っていても、アップスケール時にラスター画像をアップスケールしたような悲惨(?)な結果になってしまうらしい…。そんな罠が…。AE怖い…。
「アップスケール (ディティールを保持)」というエフェクトもあって、それを使うとクッキリ感が増すらしい？
_アップスケール (ディティールを保持) を利用して画像を高画質で拡大する - After Effects Tips | iPentec
_【After effects】アップスケール(ディテールを保持) - YouTube
_アップスケール(ディテールを保持)とは - ディストーション | Vook(ヴック)
AIでアップスケールプラグインも存在しているらしい？ でもこれは動画全体にかけるプラグインなのだろうか…。
_ScaleUp - Flashback Japan Inc
_REZup V2 - Flashback Japan Inc
_【AfterEffects】Scaleupのテスト2【プラグイン】 - YouTube
AEは持ってないし使ったこともないから本当にできるのか知らんのだけど…。方法はいくつかあるらしいなと…。
◎ OpenToonzで試してみた :
OpenToonz 1.8.0 pre で、Toonzベクターレベル(ベクター画像)とToonzラスターレベル(ラスター画像)を用意して、ズームインして画質がどうなるかチェックしてみた。左がベクター。右がラスター。
ベクターレベル(ベクターデータ)を使えば、ズームインしても画質が悪くなることはない、と分かった。
ただ、ちょっと問題が…。
ベクターレベル(ベクターデータ)を使えば、ズームインしても画質が悪くなることはない、と分かった。
ただ、ちょっと問題が…。
◎ ベクターへの変換が難しい :
素材が低解像度のラスター画像しかない状態で、OpenToonzのベクターレベルを使いたい場合は、どうにかしてラスター画像をベクター画像に変換しないといけない。しかし、どうやって変換するかが難問で…。
今回の実験で使った画像は、Stable Diffusion web UI + SDXL (A-mix) で生成したラスター画像。
_girl_src.png (640 x 839, 348KB)
これをベクター画像にしようとして四苦八苦。結局自動ではイイ感じに処理できなくて、ベクターレベル上で手作業でトレースしてしまった…。これでは時間がかかってしまってマズイだろう…。何かイイ感じのベクター変換方法は無いものか…。
有償サービスを使ってもいいなら、Vectorizer.AI が良さそうなのだけど…。
_Vectorizer.AI
今回の実験で使った画像は、Stable Diffusion web UI + SDXL (A-mix) で生成したラスター画像。
_girl_src.png (640 x 839, 348KB)
これをベクター画像にしようとして四苦八苦。結局自動ではイイ感じに処理できなくて、ベクターレベル上で手作業でトレースしてしまった…。これでは時間がかかってしまってマズイだろう…。何かイイ感じのベクター変換方法は無いものか…。
有償サービスを使ってもいいなら、Vectorizer.AI が良さそうなのだけど…。
_Vectorizer.AI
◎ 高解像度化するほうが楽かも :
ベクター変換は期待した結果を得るまでの調整がちょっと難しいので、単にラスター画像を高解像度化して使ったほうがいいのかもしれない。
以下は、Upscayl 2.15.0 というツールを使って4倍にアップスケールした画像。
_girl_src_upscayl_4x_digital-art-4x.png (2560 x 3356, 2.67MB)
_元画像 girl_src.png (640 x 839, 348KB) と比べれば、それっぽく拡大できてることが分かる。このぐらいの解像度があれば動画編集ソフト上でズームイン/アップスケールしても粗が目立たないのではないか…。目立たないといいなあ…。
Upscayl はAIで画像を拡大できるツール。無料で利用できる。
_Upscayl - AI Image Upscaler
最近の Photoshop ならAIで拡大処理ができる「スーパーズーム」なる機能があるらしい…？ 持ってないから知らんけど。
_Photoshopで解像度を上げる スーパーズームの使い方 | 321web
以下は、Upscayl 2.15.0 というツールを使って4倍にアップスケールした画像。
_girl_src_upscayl_4x_digital-art-4x.png (2560 x 3356, 2.67MB)
_元画像 girl_src.png (640 x 839, 348KB) と比べれば、それっぽく拡大できてることが分かる。このぐらいの解像度があれば動画編集ソフト上でズームイン/アップスケールしても粗が目立たないのではないか…。目立たないといいなあ…。
Upscayl はAIで画像を拡大できるツール。無料で利用できる。
_Upscayl - AI Image Upscaler
最近の Photoshop ならAIで拡大処理ができる「スーパーズーム」なる機能があるらしい…？ 持ってないから知らんけど。
_Photoshopで解像度を上げる スーパーズームの使い方 | 321web
◎ 余談 :
低解像度の素材画像を無理矢理拡大してボケボケになっちゃうソレは、昔のプリキュアでもやらかしてた時期があって…。次回予告の冒頭で、タイトル画像が拡大された状態から通常サイズに急速ズームアウトするのだけど、拡大されてるフレームではめっちゃボケボケジャギジャギなタイトル画像になっちゃってて…。
でもまあ、この場合、メインの視聴者層であろう幼女さん達がそんなの気にするわけないし、急速ズームアウトをしてるから一瞬で目の前から消えてくれるしで、コマ送りでもしないと気づかない部分だから、視聴体験が損なわれることもないし、どうでもいい部分なのだけど…。
とは言え、一度気づいてしまうと、毎週毎週流れるから、気になって、気になって…。自分のような素人ですら、「これを1年間流し続けるのか…いいのかなあ…」「デジタルに全然詳しくない演出家さんが担当しちゃったのかなあ…」と、もやもや…。
ちなみに今のプリキュアはもうそんなことにはなってないです。かなり前の作品からどのフレームを切り取っても綺麗なタイトル画像になっていて…。どこかの時点でノウハウを会得したのかなあ、と…。
余談その2。「笑いをとるためにあえてボケボケの画質を披露することなんてあるの？」と思われるかもしれないけれど、「ハッカドール」というTVアニメでソレをやってた記憶が…。チープ感を増したくて、げそいくお監督がそういうカットを発注したら、撮影監督さんが気を利かせて綺麗に拡大したカットを出してきちゃって、「違うんだよ。そうじゃねえんだよ」と監督自らAE使ってボケボケ低画質カットを作ったけど作業中に「俺一体何をやってるんだ…？」、という裏話を監督がTwitterで披露していた記憶が…。つまり、天然じゃなくて計算でやってる場合も稀にあるわけです。 *1
「ハッカドール」は名作なので、機会があれば是非視聴して欲しい…。せめて「キャベツ検定」回と「KUROBAKO」回だけでも見てほしい…。フツーのアニメは正の方向の映像を作ろうとこだわるけど、「ハッカドール」は負の方向の映像再現へのこだわりが凄くて…。ゲリラ戦ってこういう感じなんだろうなあと…。
余談その3。「ハッカドール」を見てしまうと、「こめかみっ！」は戦い方からして間違えちゃってる気もするなと…。フツーのアニメを作ろうとして全然届いてない映像って悲しさが滲んでしまうので、どうせフツーのアニメは作れないんだからフツーのアニメがやらないことをやってやる、みたいな姿勢でもあれば…。いや、そんなこと考えてる余裕も無さそうだけど…。
でもまあ、この場合、メインの視聴者層であろう幼女さん達がそんなの気にするわけないし、急速ズームアウトをしてるから一瞬で目の前から消えてくれるしで、コマ送りでもしないと気づかない部分だから、視聴体験が損なわれることもないし、どうでもいい部分なのだけど…。
とは言え、一度気づいてしまうと、毎週毎週流れるから、気になって、気になって…。自分のような素人ですら、「これを1年間流し続けるのか…いいのかなあ…」「デジタルに全然詳しくない演出家さんが担当しちゃったのかなあ…」と、もやもや…。
ちなみに今のプリキュアはもうそんなことにはなってないです。かなり前の作品からどのフレームを切り取っても綺麗なタイトル画像になっていて…。どこかの時点でノウハウを会得したのかなあ、と…。
余談その2。「笑いをとるためにあえてボケボケの画質を披露することなんてあるの？」と思われるかもしれないけれど、「ハッカドール」というTVアニメでソレをやってた記憶が…。チープ感を増したくて、げそいくお監督がそういうカットを発注したら、撮影監督さんが気を利かせて綺麗に拡大したカットを出してきちゃって、「違うんだよ。そうじゃねえんだよ」と監督自らAE使ってボケボケ低画質カットを作ったけど作業中に「俺一体何をやってるんだ…？」、という裏話を監督がTwitterで披露していた記憶が…。つまり、天然じゃなくて計算でやってる場合も稀にあるわけです。 *1
「ハッカドール」は名作なので、機会があれば是非視聴して欲しい…。せめて「キャベツ検定」回と「KUROBAKO」回だけでも見てほしい…。フツーのアニメは正の方向の映像を作ろうとこだわるけど、「ハッカドール」は負の方向の映像再現へのこだわりが凄くて…。ゲリラ戦ってこういう感じなんだろうなあと…。
余談その3。「ハッカドール」を見てしまうと、「こめかみっ！」は戦い方からして間違えちゃってる気もするなと…。フツーのアニメを作ろうとして全然届いてない映像って悲しさが滲んでしまうので、どうせフツーのアニメは作れないんだからフツーのアニメがやらないことをやってやる、みたいな姿勢でもあれば…。いや、そんなこと考えてる余裕も無さそうだけど…。
*1: 大地丙太郎総監督＋桜井弘明監督の「十兵衛ちゃん」でも似たような演出があったような…。セルとフィルムで作ってた時代、だった気がするけど、わざと盛大にセル塗りをミスしたカットを出して、そのキャラの精神がとんでもなく混乱してることを伝えてた記憶が…。
[ ツッコむ ]
#2 [opentoonz] OpenToonzでsvgをインポートできるか実験中
OpenToonz 1.8.0 pre で svg をインポートできそうか試しているところ。環境は Windows11 x64 25H2。
Vtracer という、ラスター画像からベクター画像に変換するツールを使って svg を作成。
_VTracer
_visioncortex/vtracer: Raster to Vector Graphics Converter
作成した svg を Inkscape 1.4.3 で開けることは確認できた。しかし、OpenToonz上で「レベルを読み込み」で svg を読み込んでみたら OpenToonz が固まってしまった…。
最初から Inkscape で作成して、プレーンsvgとして保存した svg なら、OpenToonz で開くことができたのだけど…。
もしかしてプレーンsvgで保存するのがコツなのだろうか。読み込めなかった svg を Inkscape で開いて、プレーンsvgで保存して、OpenToonz で読み込もうとしてもダメだった。
読み込めた svg は 4KB。読み込めなかった svg は 1.2MB。複雑な svg は読み込めないということだろうか。
OpenToonz上でベクターデータの作成はしたくないんだけどな…。なんだか操作がやりづらいし、何故か色が塗れなくなる時もあるし…。しかし OpenToonz で読み込めるベクターデータと読み込めないベクターデータがあるのでは…。
Vtracer という、ラスター画像からベクター画像に変換するツールを使って svg を作成。
_VTracer
_visioncortex/vtracer: Raster to Vector Graphics Converter
作成した svg を Inkscape 1.4.3 で開けることは確認できた。しかし、OpenToonz上で「レベルを読み込み」で svg を読み込んでみたら OpenToonz が固まってしまった…。
最初から Inkscape で作成して、プレーンsvgとして保存した svg なら、OpenToonz で開くことができたのだけど…。
もしかしてプレーンsvgで保存するのがコツなのだろうか。読み込めなかった svg を Inkscape で開いて、プレーンsvgで保存して、OpenToonz で読み込もうとしてもダメだった。
読み込めた svg は 4KB。読み込めなかった svg は 1.2MB。複雑な svg は読み込めないということだろうか。
OpenToonz上でベクターデータの作成はしたくないんだけどな…。なんだか操作がやりづらいし、何故か色が塗れなくなる時もあるし…。しかし OpenToonz で読み込めるベクターデータと読み込めないベクターデータがあるのでは…。
[ ツッコむ ]
以上、1 日分です。