MMD on WebGL デモページを用意した

試せるようにしたほうがいいと言われたので、マウス操作などの機能をつけてちゃんと形にした。

もしかしたら将来は別の所に移動するかも。とりあえず暫定。

• http://edv.sakura.ne.jp/mmd/

Chrome でしか使えません。Firefox は早く DataView を実装してください。David Flanagan さんの DataView.js を使えば Firefox でも動かせると教えてもらったので Firefox でも動くようにした。

Shift+Drag で移動なんだけど、文字選択されてるときは Chrome だとおかしなことになる。説明文を書いてないときは問題なかったのに！ちょっと不満。

マウス操作とキーボード操作以外の変更点は、軸と中心点を付けたこと。

中心点は Point Sprite という方法でやった。（それ以外にどうやればいいのか知らないけど）

↓このへんを見たらだいたいわかる。

• 床井研究室 - シェーダで Point Sprite
• Some particle effects | Learning WebGL

床井研究室の解説にある glEnable(GL_VERTEX_PROGRAM_POINT_SIZE); と glEnable(GL_POINT_SPRITE); は、WebGL ではしなくてもいいらしい。Learning WebGL の方にはVERTEX_PROGRAM_POINT_SIZE が無かったので gl.enable(0x8642) とか書いたら動いたぜ…ってあるけど、このハックは既に最近の WebGL では必要ないらしい。

やることは、JS 側ではこんだけで、

  gl.bufferData(gl.ARRAY_BUFFER, new Float32Array(this.center), gl.STATIC_DRAW);
  gl.drawArrays(gl.POINTS, 0, 1);

Vertex Shader では（いつもの座標変換以外では）こういうことをする。

      gl_Position.z = 0.0; // always on top
      gl_PointSize = 16.0;

z 座標を0にすることによってモデルに隠れてしまわないようにしてる。

gl_PointSize を指定すると Fragment Shader で gl_PointCoord が使える。描かれる点は、drawArrays(gl.POINTS で与えた点を中心とし、縦横の長さが gl_PiointSize ピクセルの正方形で、常に正面を向いている。gl_PointCoord はその正方形内の座標で、原点が正方形の左上で、右下が (1, 1) になる。

      vec2 uv = gl_PointCoord * 2.0 - 1.0; // transform [0, 1] -> [-1, 1] coord systems
      float w = dot(uv, uv);
      if (w < 0.3 || (w > 0.5 && w < 1.0)) {
        gl_FragColor = vec4(1.0, 0.0, 0.0, 1.0);
      } else {
        discard;
      }

discard を呼んだところは色を付けないのでそのまま後ろが見える。

中心点を置いてみたはいいけど、どうせ画面の中心だし、別に要らないかも。MMD っぽい雰囲気を出すためということで…