プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4
-
Upload
melvin-holman -
Category
Documents
-
view
29 -
download
8
description
Transcript of プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4
![Page 1: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/1.jpg)
プロジェクト演習Ⅳインタラクティブゲーム制作
プログラミング 42012/11/21
Inside of 3DCG
![Page 2: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/2.jpg)
今日の内容
• リアルタイム 3DCGの描画処理の流れを知ろう– FKの内側を少しだけ解剖します
• ネット上のサンプルや、他のライブラリとの連携がやりやすくなる!–シェーダプログラミングもやりやすいはず
![Page 3: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/3.jpg)
描画処理の流れ• 多くのライブラリは「描画」しかできない– OpenGL、 Direct3Dはもちろん、 XNAや DXライブラリもそう
• これらのライブラリを用いた場合は、自分で右の流れを組む必要がある
1. 画面をまっさらに塗りつぶす
2. カメラの位置と向き、その他諸々をセット
3. 描画したいモデルの座標系をセットする
4. 三角形をたくさんたくさんたくさん描画する(3,4をモデルの個数分 )
5. 描き上がった画面をまるっと差し替え
![Page 4: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/4.jpg)
FKの最大の特長
• 形状 -モデル -シーン -ウィンドウからなる階層構造–なかでもモデルの存在は大きい• 同じ形状を複数描画する際の効率化• 位置、姿勢、スケールの柔軟な制御• シーンへの登録制による描画処理のカプセル化
• 他にも特長はあるが、あまりゲーム向きではない–形状自体の高度な変形、編集操作など
![Page 5: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/5.jpg)
FKのデメリット
• カプセル化しすぎてて、融通を利かせるのがちょっと難しい–形状ごとに描画処理内容が固定されており、自由に実装することができない
–一般的な描画処理の流れが隠蔽されており、処理のイメージをつかみづらい
• これらを紐解きつつ、自分でいじりたいところのいじり方を伝授したい
![Page 6: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/6.jpg)
描画処理の解剖
• エントリーした順に画面上の領域を塗りつぶしていく– 画面上のどの位置を塗りつぶすかは、カメラの座標系とモデルの座標系で決まる
– どのような色、画像で塗りつぶすかはマテリアルやテクスチャの設定と、光源と法線ベクトルで決まる
!?
![Page 7: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/7.jpg)
何故こうならずに済むのか?
• エントリー順に塗りつぶすのであれば、右のようになってしまうはず
• 奥のものから順番にエントリーしないといけないようだが、実際は大丈夫
• 何故か?
![Page 8: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/8.jpg)
デプス (深度 )テスト
• 塗りつぶす際に、そのピクセルがカメラからどのくらいの距離かを記録していく– 色で表すと右図のようなモノクログラデーションになる
• 実際に塗りつぶす前にピクセル単位で距離を比較し、手前の位置にくる部分だけを塗りつぶす
![Page 9: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/9.jpg)
半透明との組み合わせによって起きる問題
1. 手前に半透明物体を描く– この時点では奥に何も描かれてないので、背景とのブレンド結果で塗りつぶす
– 当然デプス値にも手前の距離を書き込む
2. 奥に物体を描く– 上で手前の距離値が書き込まれている部分は塗りつぶされない
– 半透明物体を描いた領域は「背景とのブレンド結果のまま」になる
!?
![Page 10: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/10.jpg)
考えられる対策
• 半透明物体の描画順を後回しにする– 半透明物体同士の順番も、出来るだけカメラから遠い順になるようにする
• カメラの最前面に来るような物体 (パラメータやメッセージなど )はオーバーレイ描画を使う– FKならば entryOverlayModel()を使えばよい
• 半透明物体はデプス値に影響を与えないようにする– 今後もちょくちょく使うテクニック
![Page 11: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/11.jpg)
2段階のデプス値制御命令
• これから描く物体は「デプス値に従って前後関係を解決する」 or 「その場所がいかなる距離でも無視して上書きする」– glEnable(GL_DEPTH_TEST)– glDisable(GL_DEPTH_TEST)
• これから描く物体は「描画する際にデプス値も一緒に更新する」 or「描画する際にデプス値は参照するが更新はしない」– glDepthMask(GL_TRUE)– glDepthMask(GL_FALSE)
![Page 12: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/12.jpg)
目的別デプス制御状態まとめ
• 通常の描画–デプステスト有効、デプス値書き込み有効
• オーバーレイ描画–デプステスト無効、デプス値書き込み有効
• 背景の後書きを邪魔しない半透明描画–デプステスト有効、デプス値書き込み無効
![Page 13: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/13.jpg)
アルファ値の扱いについて
• マテリアルとテクスチャで 2段階のアルファ値 (透明度 )が扱える
• アルファ値は 0で完全透過を表す– アルファ値 0のピクセルは描画領域から除かれるようになっており、デプステストからも外れる
– これをアルファテストと呼ぶ• FKではデフォルトで有効になっている
• 1で完全不透明となり、その間の値は半透明としてブレンド処理が行われる– FKの場合は fk_Sceneでの設定が必要
![Page 14: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/14.jpg)
制御命令ぶっ込みポイント
• 先ほどの処理の流れに注目
• fk_Modelを継承するとこのポイントに割り込みが可能
• preでいじって postで戻せば無問題!
1. 画面をまっさらに塗りつぶす
2. カメラの位置と向き、その他諸々をセット
3. 描画したいモデルの座標系をセットする
4. 三角形をたくさんたくさんたくさん描画する(3,4をモデルの個数分 )
5. 描き上がった画面をまるっと差し替え
preShader()
postShader()
![Page 15: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/15.jpg)
どんな命令を突っ込めるか?
• デプス値制御命令• アルファブレンド制御命令– glBlendFunc()
• (GL_SRC_ALPHA, GL_ONE_MINUS_SRC_ALPHA)がデフォ• (GL_ONE, GL_ONE)にすると加算ブレンドになる
• シェーダ処理命令• 独自の描画処理命令
• preでいじった状態値は postで戻すこと
![Page 16: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/16.jpg)
とても参考になるサイト
• PROJECT ASURA– http://asura.iaigiri.com/top.html
– XNA中心ですが、 OpenGLによる実装サンプルも豊富です
–あくまでターゲットにするスペックの範囲でやれることを探してみるのも良いでしょう
![Page 17: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/17.jpg)
まとめ
• 一般的な 3DCGプログラミングにおける処理の流れを把握
• 描画処理の各段階において何が行われているかを知る
• デプス、アルファなどの挙動と制御• 正しい見た目の表現と、外部サンプルをうまく取り込むための基礎知識
![Page 18: プロジェクト演習 Ⅳ インタラクティブゲーム制作 プログラミング 4](https://reader035.fdocument.pub/reader035/viewer/2022071807/56813113550346895d975f48/html5/thumbnails/18.jpg)
今日の課題
• 「 PROJECT ASURA」に掲載されているエフェクトのサンプルのうち、自分たちで使いそうなものを FK上で利用できるように移植してみよう–煙のサンプルについては移植した例があるので、そちらを参考にするとよい