はじめに
今回は、3DCGの反転オフセットポリゴンで線画が表示される理由を解説します。
反転オフセットポリゴンの概要
まず、イメージを掴んでもらうため、概要をまとめます。
↓ここに普通の球を用意しました。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-01-3.jpg)
反転オフセットポリゴン法は、この球を膨らませて、暗い色で着色します。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-02-3.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
暗い色はBlenderなら別マテリアル、Unityなら1マテリアル内のシェーダーの設定で作られることが多いです。
そして、この2つのモデルをいい感じに処理して重ねます。
すると、線画が現れます。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-11-6.jpg)
これが、反転オフセットポリゴン法です。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
次はこのいい感じの処理のやり方について見ていきます。
反転オフセットポリゴンの仕組み
3DCGの面には向きがあります。
詳細はこちらで解説。
普通の3Dモデルは原則表向きです。
↓この図の球も表向きとします。(青色)
![](https://signyamo.blog/wp-content/uploads/2024/05/image-03-7.jpg)
Blenderは表向きの面を青色で表示されます。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-04-6.jpg)
そして、反転オフセットポリゴンは表にもう1層厚みをつけた3Dモデルを作ります。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-02-3.jpg)
この厚みをつけた3Dモデルがあると、普通は重なって中の面が見えません。
そこで「面の向き」を反転させます。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-05-7.jpg)
こんな感じで、外側の「面の向き」を反転。
Blenderは、裏を向いてる面は赤く表示されます。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-06-6.jpg)
そして、このモデルに「背面カリング」という裏面を非表示にする処理を入れます。
これは、裏側を向いた線を非表示にする処理です。
![](https://signyamo.blog/wp-content/uploads/2024/05/add-01-1.jpg)
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
↑の図だと、赤い所が非表示になったので…
透けてます。
すると、表示される部分は下図のようになります。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-07-7.jpg)
厚みを付けたモデルの表面は背面カリングで消えます。
そして、中にあった元の球が表示されます。
さらに、その奥にある厚みを付けたモデルの内側が表示されます。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-08-4.jpg)
まとめると、下図のようになります。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-09-7.jpg)
そして、この2つに違う色を割当てると…
設定次第で線画表現のような見え方がになります。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-11-6.jpg)
外側(奥)に暗い色の設定。(マテリアルなど)
内側(前)には普通の色を設定。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-10-7.jpg)
あとは、厚みの付き方の差を作れば…
線の細さを変えれます。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-12-4.jpg)
以上が、反転オフセットポリゴンの仕組みです。
反転オフセットポリゴンの弱点
反転オフセットポリゴンは、厚み付けなどでフチを作ってる関係上…
凹み型のモデルに弱いです。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-13-4.jpg)
このようなモデルでは、少し表示が崩れます。
![](https://signyamo.blog/wp-content/uploads/2024/05/image-14-4.jpg)
それでも、処理の簡単さと動作の軽さから、VRChatを含めたゲーム系の3DCGで使われます。
![](https://signyamo.blog/wp-content/uploads/2023/02/pd0ogJ64_400x400-150x150.jpg)
リアルタイム系の3DCGはこの方法が主流だと思います。
(というより、他に方法が思いつかない)
※参考資料
このあたりは、昔動画で解説したので…
その時の動画を参考資料を乗せます。
ーーーーー
画像や映像書き出しを前提とした、非リアルタイムであれば…
他に2つぐらい方法があります。
あと、Blenderは厚み付けに頂点ウエイトを使えて…
これをものすごく頑張れば、線幅に差をつけれます(非実用レベル)
まとめ
今回は、3DCGの反転オフセットポリゴン法で線画が表示される理由を解説しました。
・普通のモデルに厚み付け系処理で厚みを作る
・厚みを作ったモデルの色を暗い色にする
・厚みを作ったモデルの面の向きを反転させる
・厚みを作ったモデルのマテリアル設定で裏面を表示しないようにする
・すると… 元のモデルの裏側に厚み分の差が線画のように表示される
また、他にも3DCGについて解説してます。
![](https://signyamo.blog/wp-content/uploads/2024/03/dc3ee87ef36f8aef46a0fe859f673171-1-320x180.jpg)
![](https://signyamo.blog/wp-content/uploads/2024/04/dcb87e9a4eaca4a79b3123f932d472b4-320x180.jpg)
ぜひ、こちらもご覧ください。
コメント