Successfully reported this slideshow.
Your SlideShare is downloading. ×

Basic knowledge of 3d

Ad

2014-06-21
俺とBasic Knowledge of 3D
PhlanXware Masayuki KaToH

Ad

Profile
Name!
ふぁらお加藤 / PharaohKJ!
Job & Works!
PhalanXware (Freelancer)!
OCR system .com / .net!
ISDB-T MFC / Linux C++!
S...

Ad

01
WebGL
Demonstration
z=x^2+y^2 でおググりください!
by Chrome or Firefox

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Ad

Loading in …3
×

Check these out next

1 of 24 Ad
1 of 24 Ad
Advertisement

More Related Content

More from Masayuki KaToH (20)

Advertisement

Basic knowledge of 3d

  1. 1. 2014-06-21 俺とBasic Knowledge of 3D PhlanXware Masayuki KaToH
  2. 2. Profile Name! ふぁらお加藤 / PharaohKJ! Job & Works! PhalanXware (Freelancer)! OCR system .com / .net! ISDB-T MFC / Linux C++! Social Game PHP / Java! SNS! twitter - @PharaohKJ! facebook - pharaohkj
  3. 3. 01 WebGL Demonstration z=x^2+y^2 でおググりください! by Chrome or Firefox
  4. 4. About three.js など 便利なライブラリがあります。
 が、ここではOpenGL/WebGLの基礎を紹介、 まとめます。
  5. 5. 01 Matrix 1999年の映画! 世界がデジタルデータに見える様?
  6. 6. 01 3D CG 画像は! http://www20.atpages.jp/katwat/wp/?p=3929! より! http://www20.atpages.jp/katwat/three.js_r58/ examples/mytest27_pmx/menu.html! のレンダリング結果
  7. 7. 01 3D CG 構成している頂点座標の集まり。
  8. 8. 01 CG XY平面上にカラーのピクセルの集まり。
  9. 9. 01 つまり 表示したい頂点座標の集まり= 素材を! ! 画面上のXY平面ピクセルにする! ! それが3D CG。
  10. 10. 素材からOpen/WebGLへ送り込む
  11. 11. ∼変換てどうやんの? 4x4の行列変換でやります。数学です。! 俺には無理。! ライブラリがやってくれますので用語と英語! 抑えておけば基本的なことはなんとかなります。
  12. 12. 素材の座標は決まった こうやって計算した頂点座標を! OpenGL/WebGLに送り込み! Shader を用いて 画面にXY平面の画像を作る
  13. 13. Shader / シェーダ ✤ WebGL/OpenGLではGLSLで書く! ✤ GLSL = OpenGL Shading Language の 略! ✤ C like なプログラム! !
  14. 14. 代表的なシェーダ ✤ Vertex Shader! ✤ 頂点シェーダとも! ✤ Fragment Shader! ✤ フラグメントシェーダ、ピクセルシェーダとも
  15. 15. VertexShader ✤ 全頂点ごとに呼ばれる。1ポリゴン3頂点だと3回! ✤ こちらからはuniform変数を使って値を渡す。! ✤ 頂点情報などは規定の変数名と型を宣言することでOpenGL/WebGL からattribute/in として値を取り出すことができる。! ✤ 値を後に渡すときは varying / out としておく。(C言語でいうextern的 な感じ)! ✤ OpenGL/WebGLへ値を設定するにはgl_xxxという変数へ代入する
  16. 16. VertexShader ✤ シンプルな実装! 頂点の場所 gl_Position は! モデルビュー変換と投影変換をした場所です。こんだけ。
  17. 17. VertexShader ✤ なんの役に立つの???! ✤ ここで計算した頂点の場所値などを後の FragmentShaderにvarying/outで渡すことで、表現 力があげられるらしい。! ✤ 例えば、ライトからの距離が近いかどうか?とか、 光がどの角度であたってるか?とか。
  18. 18. FragmentShader ✤ ピクセルシェーダとも呼ばれる通り、ビューポート(表 示したい画面)の1ピクセルごとに呼ばれます。! ✤ つまり、1920x1080 の FullHD だと 2,073,600回!! ✤ 60FPS 描画だと124M / Sec! ✤ 結局このピクセルが画面上で何色かを決める
  19. 19. FragmentShader ✤ シンプルな実装! 最終的なピクセルの色 gl_FragColor は、! OpenGL/WebGLが計算した gl_Color です。こんだけ。
  20. 20. 01 御降臨 これで素材があなたのPCのXY座標にピク セルとして表現され、大天使が御降臨さ れました。
  21. 21. まとめ ✤ 3Dプログラミングの基礎である以下について簡単に解 説した! ✤ 4x4行列計算の用法と用語! ✤ Vertex/FragmentShaderの超基本! ✤ 頂点を画面にうつすまでについて簡単にまとめた
  22. 22. ご清聴ありがとうございました。 PhalanXware Masayuki KaToH
  23. 23. 参考文献 ✤ マルチプラットフォームのためのOpenGL ES入門! ✤ 山下武志 著! ✤ Win32 API による OpenGL 3D プログラミング! ✤ 伊藤雄 著! ✤ DirectXシェーダプログラミング 仕組みからわかるゲームエフェクトテクニッ ク ! ✤ N2Factory 著
  24. 24. 参考URL ✤ Lighthouse3d.com! ✤ http://www.lighthouse3d.com/tutorials/glsl- tutorial/shader-examples/! ✤ 【MMD】ちびあぴミク配布:時のカケラ 【MikuMikuDance】! ✤ http://www.nicovideo.jp/watch/sm19980352

×