Introduction to OpenGL ES2.0 from new view. OpenGL ES2.0の新しい切り口からの入門です。

1. OpenGL ES2.0 一問一答
もんぐり

2. 最初に
・私はOpenGLや3Dグラフィックスについてはまだまだ勉強中です。
誤った言葉づかいや間違った説明をしたときは優しく優しくご指摘ください。
・私よりも詳しい方は社内におられると思います。私はグラフィックス関連
の技術や理論が大好きなので是非ご指導ご鞭撻いただきたく。
・この分野が好きな人は一緒に何かして遊びましょう

3. OpenGLとは？
「標準化団体Khronosグループが策定しているグラフィックスハードウェア
用のAPI。2次元・3次元コンピュータグラフィックス両方が扱える。」
・仕様がオープン。
・APIを実装するのはGPUのベンダー。
・OpenGL ESは、組み込み機器向けのサブセット。
・cocos2d-xやUnityは、iOSとAndroidではOpenGL ES2.0を使用している。

4. ここでいうグラフィックスハードウェアとは？
ディスプレイ描画や画像処理や3D処理を担当するハードウェア。
GPU、VRAMなどで構成される。
・PCのグラフィックスハードウェア
価格や用途により複数パターンあり
-ビデオカード（グラフィックカード）としてマザーボードと独立
-オンボードとしてマザーボードに一体化
-VRAMやGPU自体が独立して存在せずメインメモリやCPUと一体型
・スマホのグラフィックスハードウェア
-GPUはCPUと別だがVRAMがメインメモリと物理的に一体というケース
が多い。

5. 「Graphics Processing Unit（グラフィックス プロセッシング ユニット、略してGPU）とは、パー
ソナルコンピュータやワークステーション等の画像処理を担当する主要な部品のひとつ。
現在の高機能GPUは高速のVRAMと接続され、グラフィックスシェーディングに特化した演算器を複
数搭載するマイクロプロセッサとなっている。」
GPUとCPUの関係はサーバとクライアント、
GPUはCPUに画像処理を委託され、従属して動作する。
OpenGLはGPU制御用のAPIと考えて良い。
GPUとは？
CPU
GPU
メイン
メモリ
VRAM兼用
ディス
プレイ

6. iPhone5SのプロセッサA7の画像
CPU:デュアルコア1.3GHz ARMv8、GPU:PowerVRG6430
※画像出典
EE TimesJapan
「iPhone 5sのプロセッサ「A7」
を解析」

7. GPUとCPUの違いって？
CPU GPU
コア数 一、二桁（2コア） 三、四桁（100程度）
できること 豊富 浮動小数点ベクトル演算くらい
（）内はA7の例
GPUは3Dモデルや画像データ（どちらも浮動小数点ベクトルデータ）の大量
並列演算に特化している

8. GPUって本当に必要なのか？
ゲームをすべてCPUで処理するとどうなるか
・全頂点の位置計算
例：社内製スマホ3Dゲームのキャラクター3Dモデル
一体、3000〜5000頂点
・画面の全ピクセルでのブレンドやz座標を考慮した表示色の計算
例：iPhone4S
640×960 = 65万ピクセル
60FPS=0.016秒以内でこれらの浮動小数点数ベクトルのデータをつぎつぎに
扱う
大量並列演算のできる専用のハードウェアを使わないと負荷が大きい

9. スマホのGPUは？
Tegraシリーズ（NVIDIA）
Nexus7など
Maliシリーズ（ARM）
Galaxy S3αなど
Adrenoシリーズ（Qualcomm）
Nexus5など
PowerVRシリーズ（Imagination Technolygies）
Galaxy Nexus、iOS端末一般など
※cocos2d-xでは起動時にGPUのプロファイルをログ出力するよ！
※PCではGPU市場はNVIDIAとAMDの寡占状態

10. OpenGL ES2.0で何ができるのか？
・点、線、三角形を描画する
・テクスチャをはりつける
他にもいろいろあるが、主要な機能はこんなもの。低レベルなAPI。
低レベルAPIだからこそハードウェアの性能を引き出せるし、カスタマイズが
きく
→ ハイエンドだったりリアルタイムなグラフィックスレンダリング向き
（OSの用意した高レベルグラフィックスAPIやウィンドウシステムは遅く、
カスタマイズに制限がある）

11. OpenGL以外のGPU用APIは？
・DirectX（Direct3D）
MicrosoftのAPI
・Metal
iOS8と同時に発表されたiOSデバイス専用の薄いAPI
・GPUベンダーの自社製品用に開発されたAPI
CUDA（NVIDIA）、Mantle（AMD）など

12. OpenGL ES2.0の描画の手順って？
最終的に、ディスプレイに表示するピクセルデータ（フレームバッファ）を
用意すればよい。
①フレームバッファのクリア
②3Dモデルごとにレンダリングパイプラインを実行してフレームバッファに
描画していき、最終的画面描画を完成させる
③フレームバッファのディスプレイへの反映
※これはOpenGL ES2.0の仕事ではなく、OSのAPIを用いる
上記を毎フレーム行う。2Dの場合もz座標がないだけで流れは同じ。
※厳密にはフレームバッファを直接ディスプレイには反映しない（ダブルバ
ッファリング）

13. レンダリングパイプラインとは？
グラフィックスハードウェアの中で起こっている処理とデータの流れのこと
※1と2はCPU処理
※画像出典
マイナビニュース
「3Dグラフィックス・マニアッ
クス」

14. OpenGL ES2.0のAPIにはどんなのがある？
頂点配列の設定 glVertexAttribPointer
テクスチャの設定 glBindTexture
使用するシェーダプログラムの設定 glUseProgram
フレームバッファへの描画の実行（ドローコール） glDrawXxx
ドローコールによって、設定した各種データを用いてレンダリングパイプラ
インが実行される

15. シェーダとは？
レンダリングパイプラインにおいて、頂点単位の処理、ピクセル単位の処理
をカスタマイズするためのプログラムのこと。
（元は名前どおり陰影処理から来ているが、それ以外のいろいろな表現用途
に使うことができる）
OpenGL ES2ではバーテックスシェーダとフラグメントシェーダの2箇所でパ
イプライン処理をカスタマイズ可能
※OpenGL ES1系では、この部分がAPIで指示できる範囲の決め打ちの処理に
なっており、カスタマイズ不能だった

16. バーテックスシェーダとは？
頂点パイプラインで実行するシェーダ
→ バーテックスシェーダ
GPUの複数コアで頂点単位で並列実行

17. フラグメントシェーダとは？
ピクセルパイプラインで行うシェーダ
→ フラグメントシェーダ（ピクセルシェーダ）
GPUの複数コアでピクセル単位で並列実行

18. バーテックスシェーダとは？2
例：cocos2d-x
attribute vec4 a_position;
attribute vec2 a_texCoord;
attribute vec4 a_color;
varying lowp vec4 v_fragmentColor;
varying mediump vec2 v_texCoord;
void main()
{
gl_Position = CC_MVPMatrix * a_position;
v_fragmentColor = a_color;
v_texCoord = a_texCoord;
}
cocos2d-xで一番良く使われるバーテックスシェーダ。
座標変換行列で画面上の頂点位置計算、頂点色とテクスチャのUV座標のフラグメントシェーダへ
の受け渡しをしている。
各3Dモデルの頂点の数だけ実行される。
※レンダリングパイプラインのES1系でのデフォルトの処理をしているのと変わらない

19. バーテックスシェーダとは？3
例：フラットシェーディング、グーローシェーディング
両者、ライティング（光の陰影計算）の技法で、法線と光の方向をバーテッ
クシェーダーに与えて表面色への係数を計算する
・フラットシェーディング
ポリゴンごとに一意な法線ベクトルを持たせる
・グーローシェーディング
頂点ごとに法線ベクトルを持たせる。フラットシェーディングの発
展。
※画像出典
マイナビニュース
「3Dグラフィックス・マニ
アックス」など

20. フラグメントシェーダとは？2
例：cocos2d-x
varying vec4 v_fragmentColor;
varying vec2 v_texCoord;
void main()
{
gl_FragColor = v_fragmentColor * texture2D(CC_Texture0, v_texCoord);
}
cocos2d-xで一番良く使われるフラグメントシェーダ。
バーテックスシェーダから与えられたテクスチャのUV座標を使ってテクスチャから取り出したテ
クセルに、やはり与えられた頂点色（ラスタライズによって補間）を乗算しているだけ。
各3Dモデルのポリゴンのピクセルごとに実行される。
※レンダリングパイプラインのES1系でのデフォルトの処理をしているのと変わらない

21. フラグメントシェーダとは？3
例：バンプマッピング
ライティング（光の陰影計算）の技法で、RGBAベクトルでなく法線ベクトル
をピクセルごとに定義したテクスチャをフラグメントシェーダに与え、ピク
セルごとに表面色を計算する

22. デザイナのためにシェーダを作成する必要があ
るのか？
シェーダは表現に関わる部分なのでデザイナに調整させたい。
→最近のゲームエンジンではシェーダ作成をGUIツール化してデザイナに提供
している。
・用意されたシェーダにパラメータを調整するもの
・処理をノードベースの操作で組み立てるもの

23. スマホにおけるOpenGLESの最適化手法は？
3Dにも2Dにも適用できる手段で定番のものを3つ。
①描画する頂点やテクスチャの容量を減らす
②ドローコールの数を減らす。
③バーテックスバッファなどのVRAMバッファを使用する。
②について
なるべく一回のドローコールで多くのポリゴンを描画する。
定番の手法はテクスチャアトラス（スプライトシート）。
3Dではマテリアルの切り替えを頻繁に行わないようなモデル作りを意識する
と良い。
2Dではノードツリートラバースでテクスチャの切り替えが多くならないよう
なツリー構成を意識すると良い。

24. おまけ：
シェーダ同好会的なのを作りたいなー
作ったシェーダを自慢するだけとか
3Dグラフィックスやゲームの基幹技術が好きな人と遊べる場を何らかの形で
用意できればいいなと思っています。