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

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. 01
WebGL
Demonstration
z=x^2+y^2 でおググりください!
by Chrome or Firefox

4. About
three.js など 便利なライブラリがあります。
が、ここではOpenGL/WebGLの基礎を紹介、
まとめます。

5. 01
Matrix
1999年の映画!
世界がデジタルデータに見える様？

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. 01
3D CG
構成している頂点座標の集まり。

8. 01
CG
XY平面上にカラーのピクセルの集まり。

9. 01
つまり
表示したい頂点座標の集まり= 素材を!
!
画面上のXY平面ピクセルにする!
!
それが3D CG。

10. 素材からOpen/WebGLへ送り込む

11. ∼変換てどうやんの？
4x4の行列変換でやります。数学です。!
俺には無理。!
ライブラリがやってくれますので用語と英語!
抑えておけば基本的なことはなんとかなります。

12. 素材の座標は決まった
こうやって計算した頂点座標を!
OpenGL/WebGLに送り込み!
Shader を用いて 画面にXY平面の画像を作る

13. Shader / シェーダ
✤ WebGL/OpenGLではGLSLで書く!
✤ GLSL = OpenGL Shading Language の 略!
✤ C like なプログラム!
!

14. 代表的なシェーダ
✤ Vertex Shader!
✤ 頂点シェーダとも!
✤ Fragment Shader!
✤ フラグメントシェーダ、ピクセルシェーダとも

15. VertexShader
✤ 全頂点ごとに呼ばれる。1ポリゴン3頂点だと3回!
✤ こちらからはuniform変数を使って値を渡す。!
✤ 頂点情報などは規定の変数名と型を宣言することでOpenGL/WebGL
からattribute/in として値を取り出すことができる。!
✤ 値を後に渡すときは varying / out としておく。(C言語でいうextern的
な感じ)!
✤ OpenGL/WebGLへ値を設定するにはgl_xxxという変数へ代入する

16. VertexShader
✤ シンプルな実装!
頂点の場所 gl_Position は!
モデルビュー変換と投影変換をした場所です。こんだけ。

17. VertexShader
✤ なんの役に立つの？？？!
✤ ここで計算した頂点の場所値などを後の
FragmentShaderにvarying/outで渡すことで、表現
力があげられるらしい。!
✤ 例えば、ライトからの距離が近いかどうか？とか、
光がどの角度であたってるか？とか。

18. FragmentShader
✤ ピクセルシェーダとも呼ばれる通り、ビューポート(表
示したい画面)の1ピクセルごとに呼ばれます。!
✤ つまり、1920x1080 の FullHD だと 2,073,600回！!
✤ 60FPS 描画だと124M / Sec!
✤ 結局このピクセルが画面上で何色かを決める

19. FragmentShader
✤ シンプルな実装!
最終的なピクセルの色 gl_FragColor は、!
OpenGL/WebGLが計算した gl_Color です。こんだけ。

20. 01
御降臨
これで素材があなたのPCのXY座標にピク
セルとして表現され、大天使が御降臨さ
れました。

21. まとめ
✤ 3Dプログラミングの基礎である以下について簡単に解
説した!
✤ 4x4行列計算の用法と用語!
✤ Vertex/FragmentShaderの超基本!
✤ 頂点を画面にうつすまでについて簡単にまとめた

22. ご清聴ありがとうございました。
PhalanXware Masayuki KaToH

23. 参考文献
✤ マルチプラットフォームのためのOpenGL ES入門!
✤ 山下武志 著!
✤ Win32 API による OpenGL 3D プログラミング!
✤ 伊藤雄 著!
✤ DirectXシェーダプログラミング 仕組みからわかるゲームエフェクトテクニッ
ク !
✤ N2Factory 著

24. 参考URL
✤ Lighthouse3d.com!
✤ http://www.lighthouse3d.com/tutorials/glsl-
tutorial/shader-examples/!
✤ 【MMD】ちびあぴミク配布：時のカケラ
【MikuMikuDance】!
✤ http://www.nicovideo.jp/watch/sm19980352