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