Wtidev0227 tmokita

780 views
665 views

Published on

過去の遺産

0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total views
780
On SlideShare
0
From Embeds
0
Number of Embeds
4
Actions
Shares
0
Downloads
1
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Wtidev0227 tmokita

  1. 1. 3DBasics @tmokita12年11月17日土曜日
  2. 2. 自己紹介 • 沖田知彦 @tmokita • 以前はゲームとか組み込みとか • 今はフリーランスでiPhoneアプリ その他いろいろ12年11月17日土曜日
  3. 3. ざっくり内容 • 小難しい計算の説明はしません • 3Dのとっかかりに必要な用語を説明する ので興味をもったら調べてください • 計算とか用語などにつまずかないで 頭のなかでイメージできるかが大事 • なので3D概論入門みたいな内容です12年11月17日土曜日
  4. 4. 目次 • 用語とかの基礎知識 • サンプルデモ、説明 • プログラムするときのポイント 的な • Appendix12年11月17日土曜日
  5. 5. なんで3Dに見えるのか? • 2D:奥行きが無い • 3D:奥行きがある • 一点透視 • つまりは 比 の計算12年11月17日土曜日
  6. 6. ベクトル こんなのとか こんなの12年11月17日土曜日
  7. 7. ベクトル • 3次元ベクトルまでイメージできればOK • x,y,z 成分で構成されるベクトル • 数学的にはn次元ベクトルというものがある が、まあ別に知らなくてもOK • ベクトルの計算は、加算、減算、 長さ、内積、外積、ノーマライズ、位わかって ればOK12年11月17日土曜日
  8. 8. 行列12年11月17日土曜日
  9. 9. あたまいたいぉ12年11月17日土曜日
  10. 10. 行列 • 4x4行列までわかっていればOK • 横が行、縦が列 • 単位行列、逆行列、転置行列 • 行列の計算は 加算、減算、乗算、が分かっていればOK • 乗算するには条件がある12年11月17日土曜日
  11. 11. 行列 • 単位行列:数字の1と同じ:e • どんな行列に掛けても元と同じ • 逆行列:A-1 • かけたら単位行列になる行列 • 転置行列:A t • x成分とy成分を交換した行列12年11月17日土曜日
  12. 12. ベクトルと行列の関係 • 行列はベクトルを並べたもの • ベクトルは行列の一種 • ベクトルと行列は計算できる • 1 3 行列と 3 3 行列は計算できる • 結果は 1 3 行列になる12年11月17日土曜日
  13. 13. ちょっとだけ • (1,1)を45度回転させる12年11月17日土曜日
  14. 14. 2次元での回転12年11月17日土曜日
  15. 15. 頂点 • 3D空間における座標(位置)を 表したベクトル • x,y,z、または x,y,z,w で表す • とりあえず最初のうちはwは オマケ程度に考えておけばOK • 「wってなにそれwwww」くらいで12年11月17日土曜日
  16. 16. 法線12年11月17日土曜日
  17. 17. 法線 • ある線や面に対して垂直なベクトル • 線に垂直:傾きを掛けると-1になる • 面に垂直:2辺の外積を求める • 主に光源ベクトルとの内積を求めて 明るさの計算につかう12年11月17日土曜日
  18. 18. 光源12年11月17日土曜日
  19. 19. 光源 • 環境光(Ambient) 距離や向きに関係なく当たる光 • 点光源(Point) 距離は関係なく一点から球状に放出される光 • 平行光(Directional) 距離は関係なく平行して放出される当たる光 • スポット光(Spot) 距離は関係なく円錐状に放出される光(スポットライト)12年11月17日土曜日
  20. 20. 陰と影12年11月17日土曜日
  21. 21. 陰と影 • 陰:シェード(Shade) • 影:シャドウ(Shadow)12年11月17日土曜日
  22. 22. シェーディング 左:フラット 右:グーロー 左:フラット 右:フォン12年11月17日土曜日
  23. 23. シェーディング • フラットシェーディング:面単位 • 法線情報は面ごと • グーローシェーディング:頂点単位 • 法線情報は頂点ごと • フォンシェーディング:ピクセル単位 • 法線情報はピクセルごと12年11月17日土曜日
  24. 24. フレームバッファ Zバッファ(デプスバッファ) • フレームバッファ: ピクセルを描画するバッファ • Zバッファ、デプスバッファ: 奥行き情報を描画するバッファ →奥行きを考慮して描画する為に必要12年11月17日土曜日
  25. 25. マテリアル • マテリアル(material):質感 描画するときのパラメータ • 色、テクスチャ情報、 光源計算に関するパラメータ など • Diffuse,Specular,Emmisive とかとか12年11月17日土曜日
  26. 26. 座標系 • 右手座標系:Zが手前 OpenGL など • 左手座標系:Zが奥 Direct3D など12年11月17日土曜日
  27. 27. カメラ(視点) • 「見える」時の情報 • 視点の位置 • アスペクト比、画角 などなど12年11月17日土曜日
  28. 28. ニアクリップ ファークリップ12年11月17日土曜日
  29. 29. ニアクリップ ファークリップ • ニア(near)クリップ: これ以上手前のものは描画しない • ファー(far)クリップ これ以上奥のものは描画しない12年11月17日土曜日
  30. 30. 以上をふまえて12年11月17日土曜日
  31. 31. ぽいんと1 • ぱくる(INSPIRE、RESPECT) • 表示させないと楽しくないのでとりあ えずなんか表示できるようなコードを 参考にして自分のモデルとかを表示さ せて回転させたり拡縮させたりしてみ る12年11月17日土曜日
  32. 32. ぽいんと2 • OpenGLとかDirectXとか使えば大抵勝手に計算して くれるので小難しい計算(透視変換とか回転行列の 計算など)を自前でやる必要はないです • むしろハードのスペックを活かしたい場合は下手な コード書くよりはライブラリをフルに使う方がいい 結果がでます • iPhoneならiOSHacksなどに載っているARMのコード 使えば速くなるかも12年11月17日土曜日
  33. 33. あらためて12年11月17日土曜日
  34. 34. 3Dプログラムの流れ • レンダリング・Zバッファの作成 • カメラ(視点)の設定 • ライティングするなら:光源の設定 • 頂点や法線の設定 • 描画12年11月17日土曜日
  35. 35. Demo12年11月17日土曜日
  36. 36. ポイント1 PG • 可能なものは先に全部計算しておく • というかデータを最適化しておく • OpenGLに対応した頂点配列 • 法線情報 などなど12年11月17日土曜日
  37. 37. ポイント2 PG • マテリアル毎に描画する • テクスチャの切り替えなどは負荷が大 きいため同じテクスチャのものは一気 に描画する12年11月17日土曜日
  38. 38. ポイント3 ここからはやってないですゴメンなさい PG • TRIANGLESよりSTRIPをつかう 頂点情報を減らすため • ダミーの頂点をはさんでSTRIPで一気に 描画する • 一般的に描画命令が一番処理が重いの でその呼出し回数を出来る限り減らす12年11月17日土曜日
  39. 39. ポイント4 Designer • 頂点、面 などのデータを減らす • ライティングもテクスチャで代用 • 透明度のあるものを減らす • 半透明のモノを描画する時は順番を 考える12年11月17日土曜日
  40. 40. ポイント5 PG/Designer • そもそも見えないものは描画しない • 完全に透明なもの • 明らかに画面からはみ出している だろうと思われるもの12年11月17日土曜日
  41. 41. Appendix • アニメーションさせたい場合 →クウォータニオン(四元数、複素数)っていうものがあるよ →ボーン、ウェイトの計算をする必要があるよ • 影(本気)をつけたい場合 →ステンシルバッファっていうものがあるよ • 影(擬似)をつけたい場合 →射影行列っていうものがあるよ • まじめに数学勉強したければ ベクトル・行列→代数学、幾何学 アフィン変換→幾何学 微分積分→解析学 らへん12年11月17日土曜日
  42. 42. これでOK!!12年11月17日土曜日
  43. 43. ありがとうございました • 大雑把な内容過ぎてごめんなさい • tmokita at gmail.com • @tmokita12年11月17日土曜日

×