MMD on WebGL シェーダーが大体完成

輪郭がちゃんと付くようになった。

一昨日は悲惨だったこのアングルも…

ちゃんとできてる。

どうしても輪郭線がうまく行かなくて MMDAgent のソースを見てみると、

普通に頂点をレンダリングし、
次に Cull Face でオモテ面をバッサリ切って、
輪郭線のある頂点を法線のほうに少し引き伸ばして
再度裏面だけ黒でレンダリングする

というようなことをしてた。

一度この方法でやったこともあったんだけど、その時は線が太くなりすぎて諦めてた。太くなったり汚くなったりするのはシェーダーの微妙な違いによるものだったので、今回はたまたまうまく行った。（vec4 の w 要素を normalize の前に消すか消さないかとかそういう程度）

最終的にはだいたいこんな感じ。

    // vertex shader
    if (uEdge) {
      vec4 pos = uPMatrix * uMVMatrix * vec4(aVertexPosition, 1.0);
      vec4 pos2 = uPMatrix * uMVMatrix * vec4(aVertexPosition + aVertexNormal, 1.0);
      vec4 norm = normalize(pos2 - pos);
      gl_Position = pos + norm * uEdgeThickness * pos.w; // scale by pos.w to prevent becoming thicker when zoomed
    }

この pos.w というのは MMDAgent にはついてないんだけど、これを付けることによってズームしても輪郭が太くならない効果があり、より MMD に近くなる。