二次元美少女グラフィックスにおける、鼻の構成要素

目は口程に物を言う

前回のエントリでは目の構成要素を分解してみた。目というのは、人間にとって最も認知しやすいパーツである。

それゆえ、デフォルメすることで認知しやすさを上昇させる二次元グラフィックスにおいては、非常に記号化され、わかりやすい構成要素を持つパーツとなっていた。

鼻や口なども二次元グラフィックスにおいては強くデフォルメされる。まずはその一方で目への認知を阻害しないこととが求められるが、一方で表情を作り上げるためのパーツとして十分に役割を果たすことも求められる。

この絶妙なバランス感は、絵を描く人ごとに異なっており、それがいわゆる絵の味というものを構成すると思う。

よって非常にパラメータ化や合成が難しいパーツであるだろうと予想した。

しかしこのパーツを生産できなければ、二次元グラフィックスの生産は難しくなる。そのため、失敗なども覚悟し、余計に手を動かす手間をさけるためにも、目の描画コードを書くより先に、鼻の構成要素の分解に挑むことにした。

鼻の描画によりもたらされるもの

人間の横顔で、最も座標が大きい値を示すのは、鼻の頂点である。つまり、鼻を描画することで、陰影をなるべく省きデフォルメされた二次元グラフィックスの顔に立体感を与えることができる。

また、鼻は上下方向に対して大きな形状の差異のあるパーツである。鼻筋、というくらいであり、人の顔の認知の縦方向の軸を決定する役割もあるだろう。

二次元美少女グラフィックスの、鼻の構成要素の分解

鼻のそれぞれの特徴的点の位置決定

正面から見た顔の平面写像の取得

顔は平面である、などというと絵を描いている人に失礼かもしれないが…。

まず、人の顔を正面から見て、二次元上にプロットすると、顔の輪郭と言えるような形状が得られる。

平面写像の上下中央付近に鼻を示す立体の起点の設定

人の顔を正面から見たときの平面の上下方向に対して中央付近に、目頭が配置される。

その目頭の、鼻パーツの立体の起点は概ね一致する。

ここに起点となる値を設定する。

鼻の頂点となる位置の決定

概ね、上記立体の起点位置から、顔の1/4~1/5程度、下方向に座標をずらすと鼻の頂点位置になる。

鼻の終点となる位置の決定

頂点位置に対して若干のずれを下方向に設定する。

鼻の高さと幅の決定

鼻の高さ・幅を決定する。

幅は概ね鼻の頂点位置から横方向に顔の輪郭の幅を計った際の、1/3~1/4程度である。

高さは、鼻の幅半分程度の値である。

全ての値に対するずれパラメータ

これらすべてに対してずれのパラメータが設定できるはずである。

鼻の曲線決定

鼻の起点から頂点までに、また頂点から終点までに対して任意の数の点を配置して、その点を補完して結ぶ。

この曲線によって、よりそれらしい輪郭を用いて描画手法を適用できる。

鼻の描画

ハイライト、影、線の手法があるだろう。

組み合わせても良い。

まず顔の三次元的向きを決定する。それに応じて、顔の輪郭平面と、それに従う鼻の曲線の座標を計算する。

鼻の頂点を通る、起点から終点までの線を、パラメータによる任意の長さに制限して描画する。

パラメータの制限値が最も大きければ頂点の一点になる。

また、鼻の三次元曲線を二次元にプロットした曲線の法線方向に、位置をずらすことができる。

これによって鼻の最も高く強調して見える主線を表現することができる。

ハイライトと影

光源の顔に対する横方向位置と、ハイライトの向きは一致する。

光源の位置が遠くなれば、ハイライトの描画範囲は増え、平坦で薄いハイライトを描画する

影の位置関係はハイライトの逆であり、描画範囲と平坦さは同じものを用いる。

ハイライト・影の計算

鼻を構成する座標の起点と終点を結んだ直線を求める。

その直線と、鼻の曲線で結ばれた領域が、ハイライトあるいは影のうちどちらかの基本領域になる。

この基本領域は、起点と終点を結んだ直線の角度、またその位置を変化させることで拡縮が可能である。

逆方向ハイライト・逆方向影

ハイライトあるいは影の描画をせずに、逆方向に影あるいはハイライトを描画することで、反対側にハイライトあるいは影を描画したかのように見せることが可能である。

例として以下のグラフィックスを挙げる。

ハロウィンLiPPS - 森倉円*ティア118:す43a - pixiv

逆方向ハイライト・逆方向影の計算

このハイライトの描画のための計算手法の一つとしては、三次元的な鼻の曲線を二次元にプロットして、その二次元プロットした曲線の法線の向きに対して拡張した領域を、逆方向ハイライト・逆方向影の領域として用いることが考えられる。

鼻の曲線のもっとも描画する位置をずらし、そのずらした方向とは逆側に逆方向のハイライト・影を描画する。

その他のメソッド

最初に書いた通り、鼻に関しては様々な表現が考えらえる。リアルさやデフォルメ感を表現されやすいのは、鼻と口だろう。

そのためほかの描画の手法も、今後追加していきたいと思う。

二次元美少女グラフィックスにおける眼球、特に黒目部分の構成要素の分解

絵を描きたがる人は最初に目を描きたがるという

当たり前である。楽しそうなことをしたい、自然な欲求だ。それを笑うのは苦労は美徳的価値観に染まりすぎていると思う。

そもそも人が人の体を認識する時に抱く感想の語彙は乏しい。人は人の顔をよく認識できるようにできていて、人の顔に対する感想の語彙は豊富だ。

よく認識できる何かを描けるようになったほうがコストパフォーマンスがいいと言うものだ。

二次元美少女グラフィックスの目のうち、眼球、特に黒目部分の構成要素

画風と言うものに流行り廃りはあるものなので、ここで記すのは概ね2016年のものになる。

まずpixivに行き、トップページにある流行っていそうな画像を5枚ほど開く。

trick or kiss - ソンソソ - pixiv

★ - SUKJA - pixiv

狐白206 - やる気のない夕海 - pixiv

智絵里ちゃん - 蒼都利音@お仕事依頼はHPまで - pixiv

JS観察してたら防犯ブザー構えられた。。。 - かがやんぬ - pixiv

どれも綺麗で良い。

これらをざっと見て、二次元美少女の目、その中でも眼球がどのようなものから構成されているか見ていく。

全体形状

まず、デフォルメの結果、目は大きく見せることになる。一方で、顔のみを切り出した場合、三次元に対して、縦横の比率は概ね維持されている。

以上のような理由により、縦方向に目が引き伸ばされ、特に色がついて見える黒目の部位は縦に引き伸ばされるというより横に押し潰されたかのような形状を取る。

このような形状を再現するため、また座標計算を簡易に行うため、生成時は円形状のものを用い、最終的に縦横比を変更する処理をするのが良いだろう。

光彩と瞳孔

光彩と瞳孔の表現のため、同心円を配置することになる。

この同心円の配色によってキャラクターの個性を表現している。

一般に外側を明るく、内側を暗くした配色を用いる。

同心円には輪郭を付ける場合がある。これはより強く暗くした配色で、若干だけサイズの違う同心円を配置することで代用もできる。

同心円の配色にはグラデーションを上からかぶせ、明るさの配置をなだらかにすることで湾曲した眼球の表面を自然に表現できる。

ある1つの円形状は以下のどちらかの工程から出来上がる。

    • 単色円形状のリサイズとカラーリング
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2あるいは3で作った円形状2つを合成
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2で作った円形状の幅を調整する

1も2も3もどちらも1つの円形状の最終出力になれる。

ガラス的透過表現

目の透き通るような表現をするために、目の下部にさらに円形状を配置する。

これは光彩と瞳孔の表現で作った円形状の外側に近いもの(光彩の表現)で切り取られ、また同様に、その内側に近いもの(瞳孔の表現)の下に配置される。

この円形状の1つ1つは以下の工程から出来上がる

    • 単色円形状のリサイズとカラーリング
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2あるいは3で作った円形状2つを合成
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2で作った円形状の幅を調整する

1も2も3も全て1つの円形状の最終出力になれる。

この円形状の配置は黒目部分の下部に、円形状の上部がかかるような位置になる。

必要な出力は1つの場合が多いが、さらに複雑に光彩と瞳孔で生成した円形状と合成したいときはその限りではない。

ガラス的反射表現

目の輝くような表現をするために、黒目の任意の位置に、任意の幅を調整して、任意の角度をつけて、一般に強い明度で低い彩度の色をした円形状を配置する。

このための円形状の1つ1つは以下の工程から出来上がる。

    • 単色円形状のリサイズとカラーリング
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2あるいは3で作った円形状2つを合成
    • 必要であればグレースケールな円形状グラデーションを任意のサイズと任意の中間位置で作成しかぶせる
    • 1あるいは2で作った円形状の幅を調整する
    • 3で作った円形状の角度を調整する

1~4どれも1つの円形状の最終出力になれる。

必要な出力は2つないし1つ、多くとも3つのことが多いが、表現の幅によってはさらに多く生成しちりばめたりする。もっとも、それは人力による後処理で行ったほうがよいかもしれないが。

以上をコードに落とすと

次のエントリにしたいと思う。

まだ実装法が未定なので。

たぶん、javascriptで適当につなげられるようなUIを描いたのち、何らかの中間式に変換して、最終的にはImageMagickを動かすシェルスクリプトの形式にすると思う。

最初の記事

描画革命

わたしがエンジニアなせいなのか、あまり二次元の女の子などに興味がないせいなのか、それともワビサビがわからないせいなのか、思うのだけど、いわゆるpixivで描かれているような美麗な絵というのは、そろそろ安価に生産が可能な時代に入ってきているのではないかと、最近思う。

制作でも製作でもなく、生産が可能なのではないかと。

なのにどうしてなのか誰もやらないので、みんなの中に何か協定のような、つまり、絵は手で書こう、というような、取り決めがあるんじゃないかなと、疑っているくらいである。

そんなことは言っても、幾度も起きた人類史上における機械化による革命は、確実に世界を豊かにしてきた。

これ以上、人類をペンタブの上で芯と一緒に消耗させていてはいけないのだと、わたしは思うのだ。

伝統芸能

わたしは絵を描かない。今まで描こうと思ったことは多々あるが、なんというか、体育会系の気質に嫌気がさしてしまって興味が続かずにやめた。

何が鉛筆を手に持ち線を引く練習だ、と思った記憶がある。ベジェ曲線でもB-スプラインでもなんでもいい、点間の補完メソッドはいくらでもある。

その次の章は人体の構造を学び、人を描けるようになりましょう、と書いてあった。見事な手段と目的の混同だと思った。人の頭が足先についていることはごく稀な事象なのに、なんでそこら辺にうじゃうじゃいる人間の形を手で描けるようにならなきゃいけないんだろう。

いや、描きたいならいい。好きにすればいい。君の興味関心を阻害する気はない。ただそれは、もうこの現代において職人の技というものだ。

わたしだって職人のことは尊敬している、しかしそろそろ職人の技が置き換えられる時期が来ているとわたしは思っている。

CDD(Code Driven Drawing)

最初に書いた通り、美麗な絵のうち少なくないものが、安価に生産可能だというわたしの見立てがある。

どうやって生産するかについては色々あるが(最近は深層学習による画像の生成というものまであるらしい)、現実的に言って通常のプログラミングを用いたい。

今後は、コードを書くことも、絵を描いたと言えるようにしたいと思う。