Ssaw08 0610

SSAW08 第7回Jitter入門 ⅡOpenGLを用いた3Dグラフィクス2008年6月10日

今日の内容

• OpenGLを用いた3Dグラフィクスの描画：基本編• OpenGLについて• OpenGL描画の基本• 3Dプリミティブ図形の生成• ライティングとシェーデイング• 物体の大きさ、位置、色の設定• より詳細な色の設定• 視点の移動、視野角の変更• テクスチャの使用

• OpenGLを用いた3Dグラフィクスの描画：応用編• 複数の物体を一括して描画するには？• jit.noise + jit.iterをもちいて、物体を複製• MSPのオブジェクトを用いて、物体の場所をあるごリズミックに決定• jit.nurbを使ってみる• jit.nurbをサウンドファイルで変形させる

OpenGLとは

• Silicon Graphics社が中心となって開発された、グラフィックス処理のためのプログラミングインターフェース。

• SGIのワークステーション向けに開発されたGLをベースに、ハードウェアやOSに依存しない形に改良したもの

• 3次元グラフィックスに関する機能が充実している• テクスチャマッピングやZバッファ法、グローシェーディングなど

• パソコンに3Dグラフィックスアクセラレータが搭載されている場合は、OpenGLでハードウェアを直接制御して、その持てる機能を最大限に生かすことができる• 比較：DirectX

OpenGL描画の基本

• jit.gl.renderオブジェクト• JitterにおけるすべてのOpenGLグラフィックスは、jit.gl.renderオブジェクトを用いて描画される

• 使い方：「jit.gl.render 送り先の名前」• 例：「 jit.gl.render hoge」helloという名前の送り先ウィンドウに描画するjit.gl.render オブジェクトを生成

• jit.qt.movieと同様に"bang"を第１インレットに受けると、描画を更新する• qmetroを用いて定期的に描画を更新• ただし、一度描画した内容は、"erase"メッセージを入力しないとクリアされない

• triggerを用いて、"bang"と"erase"を交互に送る工夫が必要となる

OpenGL描画の基本

jit.gl.gridshapeオブジェクト

• jit.gl.gridshapeオブジェクト• 単純な3Dジオメトリを生成する• 扱える図形• sphere、torus、cylinder、opencyclinder、cube、opencube、plane、circle

• 生成された結果を、jit.gl.renderオブジェクトに接続する• 影や光沢の無い）3D図形が描かれるはず

3Dプリミティブ図形の生成

ライティングとシェーデイング

• 光線の設定や影の付け方の設定• jit.gl.gridshapeオブジェクトに「lighting_enable 1」というメッセージを送る• 物体に環境光があてられる→陰影がつく

• jit.gl.gridshapeオブジェクトに「smooth_shading 1」というメッセージを送る• 図形の曲面を滑らかに塗る（スムース・シェーディング）

ライティングとシェーデイング

マウスで物体を回転・移動

• jit.gl.handleオブジェクト• マウスで3Dモデルを回転・移動させることができる• 画面上でドラッグすることで回転• 画面上でcommand-clickで位置の移動• 画面上でoption-clickで拡大縮小

• 出力をjit.gl.gridshapeに送る• jit.gl.gridshapeに「autorotate 1」というメッセージを送ると、設定した回転が持続する

マウスで物体を回転・移動

基本パッチの完成

物体の大きさ、位置、色の設定

• jit.gl.gridshapeオブジェクトにメッセージを送る• 物体の大きさ「scale xスケール yスケール zスケール」x, y, zは1.0を基準とした比率

• 物体の位置「scale x y z」x, y, z軸状の位置• 物体の色「scale r g b」r, g, bは赤・緑・青の混ぜる割合

物体の大きさ、位置、色の設定

より詳細な色の設定

• シェーディングの原理• 拡散反射（diffuse）：光沢の無い物体表面で起こる反射、すべての方向に一様に散乱する

• 鏡面反射（specular）：鏡の面の反射のように、法線に対して入射光の反対方向に強く反射する成分

• 環境光反射（ambient）：光源からの直接光の他に２次反射、３次反射により全ての方向から照らされる光の成分

• この３つの成分を調整して物体の色、質感を細かく設定できる


• 物体そのものの色、物体を照らす光線、それぞれに設定できる• 物体そのものの色• mat_diffuse：拡散反射• mat_specular：鏡面反射• mat_ambient：環境光反射• 色の設定をjit.gl.gridshapeオブジェクトにメッセージとして送る


• 物体を照らす光線の色• light_diffuse：拡散反射• light_specular：鏡面反射• light_ambient：環境光反射• 色の設定をjit.gl.renderオブジェクトにメッセージとして送る


• 画面書き換えの際の色：erase_color• qmetroによる画面の更新の際に更新する色を指定することが可能• alphaの値を1より小さくすると、フェードがかかったような効果が得られる


視点（カメラ）の設定

• jit.gl.renderにメッセージを送る• 「camera x y z」：xyz軸上のカメラの位置を指定• 「up x y z」：xyz軸をそれぞれ回転軸にしたカメラの向き• 「lookat x y z」：注視点• lens_angle：視野角の設定、値が大きいほど広角レンズのようなゆがみが生じる

• ortho：オーソグラフィックプロジェクションのon/off、onにした場合、カメラ位置によってオブジェクトの大きさが縮小されない。3DCADの画面のような状態•

視点（カメラ）の設定

テクスチャの使用

• テクスチャとは• ジオメトリを覆う画像• テクスチャに名前をつけて、jit.gl.renderオブジェクトが持つ• jit.gl.renderオブジェクトと結び付いた描画コンテキストに加えられた他のオブジェクト（jit.gl.gridshapeなど）は、その jit.gl.renderオブジェクトが持つ名前が付いた任意のテクスチャを使えるようになる


• テクスチャ貼付けの手順• テクスチャの生成：jit.gl.renderに「textuer picture 128 128」のようにメッセージを投げる

• 数字はテクスチャのサイズ、大きいほど解像度の細かい画像となる、2の階数を用いる

• jit.gl.gridshapeに「texture picture」というメッセージを送る• 物体にテクスチャが貼られる


• マッピングモード• ３つのモードがある• object linear：テクスチャをオブジェクト座標系に対して固定した形式で貼り付け

• eye linear：視覚の座標系に対して固定した形式でテクスチャを貼り付け

• sphere map：一般に環境マッピングと呼ばれる効果を生み出し、オブジェクトは周囲の環境を反射したかのようにレンダリングされ、テクスチャが周囲の環境のスフェアマッピングされたイメージを含んでいるように見せる


• テクスチャの向き• ２つの向き：4次元の均一な座標における各ベクトル• tex_plane_s：水平方向のベクトル• tex_plane_t：垂直方向のベクトル


複数のOpenGLジオメトリの生成

• 複数のジオメトリ（物体）を一つの画面に描くには• 一番単純な方法：複数のjit.gridshapeを作成し、同じ名前を名付けてjit.renderに送る

• 色や位置、形態などを変化させると複数の物体が描画されていることが確認できる

• 全ての物体を書き出すのは、面倒…



3Dジオメトリのパラメータ管理

• 複数の物体を生成する、もっと賢い方法はないか？• 基本となる形をもとに、位置、色などのパラメータだけ変化させて、指定した数だけ複製する

• 以下の機能が必要• パラメータ設定 x 物体の個数、を格納する機能• パラメータを変化させながら物体を設定した個数分複製していく機能


• ３Dオブジェクトに関する膨大なパラメータをどのように管理すればよいのか？

• 例えば、物体の位置(position x, y, z)の場合• 3 x [物体の個数]　のパラメータが必要

x

y

z

(x,y,z)

(x,y,z)

(x,y,z)

(x,y,z)


• よくみると、表形式のデータになっている• マトリクスで表現できるのではないだろうか？

x y z

0.132 0.335 0.612

0.52 0.667 0.982

1.546 0.224 0.541

0.336 0.246 0.998

... ... ...


• 「1 x [ジオメトリの個数] x 3 plane」というマトリクスで物体の位置情報を管理してみる

• それぞれのplaneの濃度が、(x, y, z)の位置に相当する

R：x座標を格納

G：y座標を格納

B：z座標を格納

物体の個数


• 1x10の、ランダムに生成されたRGBのプレーンから成るマトリクスを生成してみる

• jit.noiseを使用


• position x, y, zのデータとして使用するには、マトリクスに格納された情報をリストに分解して取り出さなくては成らない

• jit.iterを使用する• マトリクスの一つ一つの情報を、プレーンに分解し、リスト形式でマトリクスの数だけ繰り返し出力する


• jit.noiseで生成したマトリクスを、jit.iterを用いてposition x y z の形式のリストに分解


• 下記の順序で、ランダムな座標のcubeを複製する• jit.noiseでランダムな値のマトリクスを生成• マトリクスの値を整える（オフセット、範囲）• 情報をマトリクスに格納• jit.iterを用いて、位置情報のリストに変換• 変換した座標の位置に、git.gridshapeを用いてcubeを生成する• jit.renderで表示




• 座標変化の際の動きをスムーズに補完したい• jit.slideを用いる• 座標の変化の差分をslide_up、slide_downを設定、滑らかに補完する



シグナルでマトリクスをコントロール

• MSPでシグナルを生成し、その情報でアルゴリズミックに物体の位置をコントロールする

• 例えば、cycle~を用いて、x, y, z座標それぞれを別々の周波数でコントロールしてみる

• シグナルをマトリクスに変換する• jit.poke~を用いる• jit.poke~ マトリクス名次元１次元２...

• x, y, zそれぞれ周波数の違うsin波の値を座標に適用


x座標（R）

y座標（G）

z座標（B）

• sin波で計算した座標を適用するマトリクスを、phasor~（鋸形波）で順番にスキャンしていく

シグナルでマトリクスをコントロールマトリクスの個数



NURB曲面を使ってみる

• NURB曲面とは• 非一様有理Bスプライン（Non-Uniform Rational B-Spline）の略• ベジェ曲線のように、コントロールポイントによって曲面の形状を制御できる

• 少数のコントロールポイントで、滑らかで、正確な形状をつくることができる

• 自動車などの工業製品のモデリングにも使用されている


• JitterでNURB曲面を生成する• jit.gl.nurbsを使用する• 4つのプレーンから成るマトリクスをコントロールポイントとして指定する

• (x, y, z, w) ※w → weight（重み）

• 例）コントロールポイントが４つある場合• 4 x 4のマトリクスが必要


x y z w

0.124 0.981 0.593 0.442

0.536 0.832 0.4221 0.874

0.981 0.536 0.593 0.442

0.593 0.442 0.124 0.832


• jit.noiseで、NURBのコントロールポイントをランダムに生成する• jit.slideを用いて、値の変化を補完する• 生成したマトリクスをそのままjit.gl.nurbのコントロールポイントに• prepend ctlmatrixする



サウンドファイルのシグナル情報をNURB曲面に変換する

• sfplay~を用いて、サウンドファイルのシグナルを読み込み、その情報をもとにNURB曲面を生成してみる


• 生成の手順• サウンドを512フレームずつマトリクスへ• さらに30 x 10のマトリクスに変換• マトリクスを３列に分解• 分解した列をRGBのプレーンに対応させて10x10のマトリクスに再合成

• サウンドのマトリクスを取り出し• 滑らかに変化を補完• 全体の値を増幅• コントロールポイントに当てはめる• NURB曲面の生成



Documents

Ssaw08 0610