グラフィックを知る

アウトライン

Outline別名：輪郭線、線画、縁取り

概要

3D の物体の輪郭や折れ目に線を描き足し、イラストや漫画のような見た目にする表現。物体を裏返して膨らませた形を線の色で描く背面法と、描き終えた画像から縁を探して線を引く後処理の二つが代表的な方法である。

デモ

デモを読み込んでいます
白い線を左右にドラッグすると、輪郭線なしとありを見比べられます。手法を切り替えると、背面法は物体の外側の輪郭に、後処理は箱の角や部品の継ぎ目のような内側の折れ目にも線が出ることが分かります。

使われる場面

  • トゥーン調のゲームやアニメ

    キャラクターや背景に線を付け、セル画や漫画のような見た目にする。陰影を段階的に塗るトゥーンシェーディングと組み合わせることが多い。

  • 選択や強調の表示

    選択中の物体、拾えるアイテム、敵を、色の付いた輪郭線で縁取って目立たせる。

  • 図解や説明図

    機械や建物の形を、線で分かりやすく見せる。部品の境目に線が入ると、形の構造が読み取りやすくなる。

  • 3D を下書きにした 2D の絵

    3D で配置した場面から線を取り出し、イラストや漫画の背景の下書きにする。

判断基準

こういうときこうする
キャラクターの外側の輪郭だけに線を付けたい背面法を使う。物体ごとに線の太さや色を変えやすい。
箱の角や服のしわのような、内側の折れ目にも線がほしい後処理で、深度と法線の差から縁を検出する。または、線を引きたい辺にあらかじめ印を付けておき、その辺だけに線を描く。
背面法で、角のところの線が途切れる角で頂点が分かれていて、膨らませる向きがばらばらになっている。線に使う形だけ、頂点の法線を平均してから膨らませる。
遠くの物体まで太い線で描かれて、画面がうるさい距離に応じて線を細くする。背面法なら、画面上の太さではなく物体の大きさを基準にした太さにする。
後処理で、平らな床や壁に余計な線が出る縁と判定する深度や法線の差のしきい値を上げる。浅い角度から見る面は深度の変化が大きく、誤って縁と判定されやすい。

こう見えたら

  • 絵に輪郭の線がなく、イラストらしさが足りない形と陰影
  • 輪郭の線が、角のところで途切れている形と陰影
  • 遠くの物体まで太い線で描かれて、ごちゃごちゃする細部とちらつき

指示の例

  • キャラクターにアニメ調の輪郭線を付けて。背面法で、線の太さは画面上で 2 ピクセルくらい

  • 輪郭線が外側にしか出ていない。箱の角や服の折れ目にも線がほしいので、深度と法線から縁を検出する後処理に切り替えて

  • 遠くの建物まで太い輪郭線で描かれてうるさい。距離に応じて線を細くして

  • 輪郭線が角のところで途切れている。線に使う形は、頂点の法線を平均してから膨らませて

詳細

線が必要になる場所

手描きの線画では、物体と背景の境目（シルエット）、物体どうしが重なる境目、面が急に折れ曲がる場所（折れ目）に線を引く。3D の描画は面を塗るだけなので、線は出ない。アウトラインは、これらの場所を何らかの方法で見つけ、線を描き足す表現である。

背面法

背面法は、物体をもう一つ、法線の向きに少し膨らませた形で描く。膨らませた形は裏側の面だけを線の色で描くので、手前にある元の物体に隠れ、はみ出した縁だけが線として残る。頂点の位置 p\mathbf{p} を、法線 n\mathbf{n} の向きに線の太さ ww だけ押し出す。

p′=p+w n\mathbf{p}' = \mathbf{p} + w\,\mathbf{n} 
// 裏側の面だけを描くマテリアルで使う頂点シェーダー
vec3 p = position + normal * outlineWidth;
gl_Position = projectionMatrix * modelViewMatrix * vec4(p, 1.0);

線が出るのは、物体の外側の輪郭と、物体どうしが重なる場所である。平らな面が接する箱の角のような折れ目には、膨らませた形が表に出ないので線が出ない。物体ごとに太さや色を決められる反面、物体を二回描くので、物体の数だけ負荷が増える。

後処理

後処理の方法は、場面を描くときに、画素ごとの深度（カメラからの距離）と法線も別の画像に描いておく。そして全画面の画素について、周りの画素と比べて次のどちらかを満たす画素を線にする。深度 zz が大きく飛んでいれば別の物体との境目、法線 n\mathbf{n} の向きが大きく変わっていれば折れ目である。

∣z1−z0∣min⁡(z0,z1)>tz,1−n0⋅n1>tn\frac{|z_1 - z_0|}{\min(z_0, z_1)} > t_z, \qquad 1 - \mathbf{n}_0 \cdot \mathbf{n}_1 > t_n

tzt_z と tnt_n は、縁と判定するしきい値である。物体の数によらず一回の処理で画面全体に線が引け、背面法では出ない内側の折れ目にも線が出る。ただし、線の色や太さを物体ごとに変えるには、物体を区別する情報も別に描いておく必要がある。

見分け方と落とし穴

背面法の線は外側の輪郭に沿って出て、角のある物体では角で途切れやすい。角で頂点が分かれていると、面ごとに違う向きへ膨らむので、すき間が空くためである。デモで「線用の法線を平均する」を切ると、箱の角の線が割れるのが分かる。

後処理の線は、内側の折れ目にも出て、画面上の太さがそろう。一方で、浅い角度から見る床や壁では深度が急に変わるので、しきい値が低いと余計な線が出る。

線の太さの基準も手法で異なる。画面上で一定の太さにすると、遠くの小さな物体まで太い線で囲まれて、ごちゃごちゃして見える。物体の大きさを基準にすると、遠くの線ほど細くなり、奥行きが出る。デモの「距離で太さを変える」で、この違いを比べられる。

関連