光沢のある球面の表現 at AEP Project

AEP Night vol.2のプチコンペティション応募作品を題材に、そのアプローチと実際の方法をご紹介します。

今回とりあげるのはこのシーンの球面の表現です。こちらはAfterEffects完結（標準プラグインのみ）で作っています。エフェクト一つ一つは単純ですし、複雑なエクスプレッションを書いてるわけでもありません。表面的な部分よりも内面的なアプローチ・考え方を重点的に扱います。

汎用性を度外視しているので実用的ではないかもしれませんが、お役に立てれば幸いです。

アプローチ

「それっぽく見えれば良い」が基本方針です。手を抜いてもよいという意味ではありません。
この表現の目的は「リアル感」です。このとき、重視すべきは「リアルに近いか」ではなく、「視聴者がリアルと感じやすいかどうか」というのがポイントです。場合によっては3Dのレイトレーシングや実写より効果的な表現もあるでしょう。

球を作る

まずは球の形状を感じさせるため、以下のステップを踏むことにしました。実際はこれに到るまで写真や3DCG等をよく見比べ、なぜ球と感じるかを考えます。実物のビー玉などがあれば理想的です。
私は光学やレンダリングに詳しくないので誤解を招く表現かもしれませんが、仮に各ステップを以下のように呼びます。

基本色
アンビエントライト
ハイライト
映り込み

AfterEffectsの機能は主にカラーカーブ、CC Sphereを使います。

基本色

球そのものの色です。光源を意識しつつ、カラーカーブの放射状をベースに適当に作ります。

アンビエントライト

こちらも円とカラーカーブで。モードを加算にしています。
周りがある程度明るいという前提が元になります。ちなみに個人的には4つのステップのうち最も納得しづらかった部分です。いわゆるWeb2.0風アイコンやMacOSのUIなど、認識が記号化されているのかもしれません。

ハイライト

白色の平面を引き、適当にマスクを切ります。電気や太陽など、一点の光源を見慣れているという前提を用います。

映り込み

映り込ませる画像を別コンポ作り、CC Sphereで丸めます。この画像のアスペクト比を2:1にすると扱い易いです。解像度はかなり大きめに。
画像内容は情報がないので、正解がありません。
まず窓や建物など、四角形のものが身の回りに多いという前提で、平面にCC Grid Wipeをかけたものを置いています。
加えて付近の別の球を想定し、似たような円を作っておきます。このとき左右反転をしておきましょう。また、文字などなるべく「左右逆になっている」ことがわかりやすい情報をもたせると効果的です。

これらは独立しているので、それらが独立していることを認識させるために多少ばらばらに動かします。

透明度やCC Sphereの回転も基本的にトライアンドエラーで調整していきます。

球の凹みをつくる

次に凹み部分を作るため、以下のステップを踏みます。

境界付近の反射の歪み
凹み部分
文字部分

主にCC RadialWipeと3Dレイヤーを使います。

境界付近の反射の歪み

今回、最も印象を左右するポイントです。
調整レイヤーで全体にCC Radial Wipeをかけ、穴をあけます。この効果によって歪みを認識させ、centerを動かすことで擬似的に球の回転を認識させます。もちろん動かせる範囲が限られますし、パースもかかりません。一次近似になります。振り子の運動は単振動と扱えるのと同じです。
ハイライトや映り込みを巻き込むような動きになると効果的です。

凹み部分

円を作り、cc Radial Wipeの Centerに重ね、穴が見えなくなるよう動かします。「円」エフェクトを使い、エクスプレッションでそれぞれのcenterを揃えると調整しやすいです。
境界部分をぼかし、色の変化もトライアンドエラーでつけていきます。

文字部分

この部分だけ3Dレイヤーの回転を使っています。
先程のcenterと見た目上の動きを揃えます。
文字にベベルをかけて、文字が刻み込まれていることを認識させます。（今回は「ベベルアルファ」を使っています）
最終的にわずか数1,2pxの線になりますが、印象が大きく異なるポイントです。
徐々に光源の相対角度が変わることになるので、それを相殺するようにベベルの角度を変化させるとベターです。

おわりに

最後にコンポを複製し、環境光的な要素は全て同じに、互いの映り込みや回転は独立に動きをつけていきます。被写界深度や色調補正も重要な要素です。
ある表現を狙うとき、なぜそのような認識に繋がるのかを常に考えることが大切なのではないかと思います。

他のシーンについて
http://www.yama-ko.net/blog/?p=181
これを作ることになった経緯みたいなもの
http://www.yama-ko.net/blog/?p=178

Download

Version: AfterEffects CS4
License: Free for all