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