ステレオ3Dビュー解説

このテキストはJavaScript Advent Calendar 2011 (WebGLコース) 12/6日 参加ブログとして書きました。

こちらのページで以前公開した、WebGLを使ったオブジェクトのステレオ3Dビュアーデモの技術解説です。

もともと勉強のためにゼロから作成したので、Three.js等のフレームワークは使用していない上に、ライブラリとしても整理されてませんが、いくつかの技術的ポイントを解説します。


構成ファイルは次のようになっています。以下の解説と併せてお読みください。

その他汎用ライブラリとしてjquery.jsとCanvasMatirix.jsを使っています。

ステレオ表示

ステレオ表示のための2枚の画像は、独立したcanvasを2つ用意して、それぞれをWebGLで初期化しています。モデルやシェーダの設定もそれぞれについて2回行なっています。処理的には1つのウィンドウの2倍の負荷になるわけです。

ステレオ表示にするポイントは、2つのカメラを微妙にずらすことです。ここでは、注視するオブジェクトが1つなので、カメラをずらすのではなく、オブジェクトの縦方向(y軸)の回転角を左右の画像で微妙にズラすことでステレオ効果を得ています。厳密なステレオビューのカメラとは異なりますが、十分な効果が得られます。

具体的には、レンダリングループである、sv_wgl.js内のrender関数の中で、モデルの変換行列であるmodelMatrixに、左右の画像で違う回転を与えています。

オブジェクトの計算生成

MMDもいいけど幾何的図形に萌える(w)私としましては、オブジェクトのモデリングも計算でやる、ということで図形生成用のライブラリを作成しました。

utl.jsにあるparametricModelというクラスは、関数によってパラメトリックなポリゴンモデルを生成するクラスです。この例では、sv_smpl1.htmlの頭の部分で、トーラスを生成しています。

parametricModelの使い方は、次のようになります。

var divu = 120 ; var divv = 30 ; var sp = new parametricModel() ; sp.make(sp1 , {start:0,end:1.0,div:divu}, {start:0,end:1.0,div:divv}, {rand:0.8} ) ;

makeメソッドの最初のパラメータが、図形を定義する関数です。関数はu,vの2次元パラメータに対して、頂点の座標を生成するよう定義します。二番目のパラメータは、uの値が変化する範囲とポリゴンの分割数を指定します。三番目は同様にvの変化範囲と分割数になります。最後のパラメータはオプションで、ここでは頂点座標を乱数で振らすパラメータを指定しています。

u方向の分割数が120、v方向が30なので、全部で121x31=3751頂点が生成されます。u方向が多いのは、トーラスの大円に沿った軸をuに、小円の円周方向をvのパラメータとしているためです。

図形を定義するsp1関数もsv_smpl1.htmlにあります。

sp1 = function(u,v) { 中略 var r = { px:px, py:py, pz:pz, mx:mx/ml, my:my/ml, mz:mz/ml, nx:0, ny:0, nz:0, mu:u*3, mv:v*1, cr:c.r, cg:c.g, cb:c.b, ca:c.a } return r ; }

u,vのパラメータを受け取り、座標計算をして、最終的にrのような構造体を返すように定義されています。px,py,pzは頂点の座標、mx,my,mzは後述の図形変形のためのベクトル、nx,ny,nzは法線ベクトル、mu,mvはテクスチャ座標、cr,cg,cb,caは頂点のカラーです。ここでは法線ベクトルを(0,0,0)としていますが、この場合はポリゴン生成時に自動的に計算するようになっています。

このようにして作成したspインスタンスを、sv_smpl1.html内のinitModel関数に渡し、頂点と三角ポリゴンをWebGLに登録しています。

頂点シェーダでの図形変形

せっかくリアルタイム3Dをやるのだから、図形を回転させるだけではなく、変形もさせたい・・・ということで、頂点シェーダーでオブジェクトの各頂点を移動させて図形を変形アニメーションしています。

変形させるためのパラメータが、図形定義関数の戻り値にあったmx,my,mzのベクトルです。各頂点を、このベクトルの方向に変化させて図形を変形しようというわけです。

sv_kaisetu.htmlにある頂点シェーダーのコードの抜粋です

uniform mat4 mvpMatrix; uniform vec3 vofs ; attribute vec3 position; attribute vec3 mod ; vec3 pos = position + mod.xyz * vofs ; gl_Position = mvpMatrix * vec4(pos, 1.0) ;

頂点毎の変形ベクトルをattributeとして渡し、時間軸で変化する共通パラメータのvofsと掛けた上で、頂点座標であるpositionに加えています。これでリアルタイムの、頂点座標移動による変形を実現しています。

Chromeアプリ化

Chromeアプリはhtmlをパッケージしてダウンロード、インストールできるようにしたものです。当然WebGLも使えるのですね。というわけで、Chromeアプリ化してみたのがこちらです

WebGL StereoView

作り方は至って簡単で、構成するhtmlとjsファイルに加え、Chromeアプリ用のマニフェストファイルをパッケージするだけです。動作としては、サイト上のページと同じですが、完全オフラインで動作します。

ライブラリ化へ・・

というわけで要点を簡単に解説しましたが、このままでは汎用的に使うには何かと不便です。もう少し各部分をブラッシュアップして汎用的なライブラリにできたらな・・・と思っています。



WebGLトップ