OpenGLプログラミング

1. OpenGLプログラミン
グ
Cocoa勉強会 関東 Swift勉強会 2018-01
2018/1/19 Bitz Co., Ltd. 村上幸雄

2. • 埼玉県朝霞市でソフトハウスを起業。
• macOSやiOS、Androidのアプリケーション開発を主に請け負う。
• 自社アプリの製作。
• Twitter: @m_yukio
• Facebook: yukio.murakami
• GitHub: murakami
• http://www.bitz.co.jp/weblog/

3. BUKURO.swift
• macOS/iOS/watchOS/tvOSプログラマーのための勉強会。
初心者大歓迎。
• Cocoa勉強会 関東とMOSAの合同勉強会。
ほぼ毎月、池袋コワーキングスペース OpenOffice FOREST
で開催。
• 申し込みは、connpassから。
https://cocoa-kanto.connpass.com/
• プログラマーが楽しくプログラミングできるように
• 勉強会に参加された方全員が学び得る場を提供！
• 勉強会に参加できない方も学び得るよう、勉強会の成果を
アウトプットする！
• プログラマーの拠り所となる！

4. GLUTでサンプルを事
項したらエラーとなる
https://github.com/murakami/workbook/tree/master/mac/IRIS

5. void display(void)
{
/* カラーバッファの初期化 */
glClear(GL_COLOR_BUFFER_BIT);
/* モデリング変換、z軸の負の方向に幾何形状を4単位移動する。 */
glLoadIdentity(); /* 単位行列 */
glTranslatef(0.0f, 0.0f, -4.0f);
/* 幾何形状を描画する。 */
glCallList(gListID);
/* バッファの入れ替え */
glutSwapBuffers();
assert(glGetError() == GL_NO_ERROR);
}

6. void resize(int w, int h)
{
/* ウィンドウ・サイズとOpenGLの座標を対応づける */
glViewport(0, 0, w, h);
/* 投影行列とアスペクト比を更新する */
glMatrixMode(GL_PROJECTION);
glLoadIdentity();
gluPerspective(50.0, (GLdouble)w / (GLdouble)h, 1.0, 10.0);
/* 表示ルーチン用にモデルビューモードに設定する */
glMatrixMode(GL_MODELVIEW);
assert(glGetError() == GL_NO_ERROR);
gWidth = w;
gHeight = h;
}

7. void init(void)
{
/* ディザ処理を無効にする */
glDisable(GL_DITHER);
std::string ver((const char*)glGetString(GL_VERSION));
assert(! ver.empty());
std::istringstream verStream(ver);
int major, minor;
char dummySep;
verStream >> major >> dummySep >> minor;
const bool useVertexArrays = ((major >= 1) && (minor >= 1));
/* 三角形の頂点を定義する */
const GLfloat data[] = {
-1.0f, -1.0f, 0.0f,
1.0f, -1.0f, 0.0f,
0.0f, 1.0f, 0.0f
};
if (useVertexArrays) {
glEnableClientState(GL_VERTEX_ARRAY);
glVertexPointer(3, GL_FLAT, 0, data);
}
/* ディスプレイリストを作成する。 */
gListID = glGenLists(1);
glNewList(gListID, GL_COMPILE);
assert(glGetError() == GL_NO_ERROR);
if (useVertexArrays) {
glDrawArrays(GL_TRIANGLES, 0, 3);
}
else {
glBegin(GL_TRIANGLES);
glVertex3fv(&data[0]);
glVertex3fv(&data[3]);
glVertex3fv(&data[6]);
glEnd();
}
glEndList();
/* 描画 */
glutDisplayFunc(display);
/* リサイズ処理 */
glutReshapeFunc(resize);
}
エラー

8. int main(int argc, const char * argv[])
{
@autoreleasepool {
glutInit(&argc, (char **)argv);
/* RGBカラーモード ダブルバッファ */
glutInitDisplayMode(GLUT_RGB | GLUT_DOUBLE);
/* 初期ウィンドウ・サイズ */
glutInitWindowSize(gWidth, gHeight);
/* 初期ウィンドウ位置 */
glutInitWindowPosition(500, 100);
/* タイトルバー */
glutCreateWindow("IRIS GL");
/* 初期化 */
init();
/* 主ループ（イベント駆動） */
glutMainLoop();
}
return 0;
}

9. シェーダを使い方法で
再挑戦

10. 雛形CocoaAppを選択

11. フレームワークを追加
//
// MyGLView.m
// Crimson
//
// Created by 村上幸雄 on 2018/01/03.
// Copyright © 2018年 Bitz Co., Ltd. All rights reserved.
//
@import GLKit;
@import OpenGL;
#import <OpenGL/OpenGL.h>
#import <OpenGL/gl3.h>
#import <OpenGL/glu.h>
#import "MyGLView.h"

12. NSOpenGLViewを継承したカ
スタムビューを組み込む
class ViewController: NSViewController {
override func viewDidLoad() {
super.viewDidLoad()
// Do any additional setup after loading the view.
/* 細かな背邸を行うため、コードで生成。 */
let viewFrame = self.view.frame
let glView = MyGLView(frame: viewFrame)
/* ウィンドウの大きさに追従して合わせる */
glView.translatesAutoresizingMaskIntoConstraints = true
glView.autoresizingMask = NSView.AutoresizingMask(rawValue:
NSView.AutoresizingMask.RawValue(
UInt8(NSView.AutoresizingMask.width.rawValue)
| UInt8(NSView.AutoresizingMask.height.rawValue)))
self.view.addSubview(glView)
}
override var representedObject: Any? {
didSet {
// Update the view, if already loaded.
}
}

13. カスタムビュー
#import <Cocoa/Cocoa.h>
@interface MyGLView : NSOpenGLView
@end
• わざわざSwiftは意味ないでしょう。
• 分かりやすい構成にするため、便利コードは控えます。

14. 内部変数など
@interface MyGLView ()
@property (nonatomic, assign) GLuint program;
@property (nonatomic, assign) GLuint vertexShader;
@property (nonatomic, assign) GLuint fragmentShader;
@property (nonatomic, assign) GLuint vbo; /* vertex buffer object */
@property (nonatomic, assign) GLuint vao; /* vertex array object */
- (GLchar *)readResource:(NSString *)name ofType:(NSString *)ext;
@end

15. 初期化
- (instancetype)initWithFrame:(NSRect)frame
{
NSOpenGLPixelFormatAttribute attrs[] = {
NSOpenGLPFAAllowOfflineRenderers,
/* If present, this attribute indicates that offline renderers may be used. */
NSOpenGLPFAAccelerated, /* require hardware-accelerated pixelformat */
NSOpenGLPFADoubleBuffer, /* require double-buffered pixelformat */
NSOpenGLPFAColorSize, 32, /* require 32 bits for color-channels */
NSOpenGLPFADepthSize, 32, /* require a 32-bit depth buffer */
NSOpenGLPFAMultisample,
NSOpenGLPFASampleBuffers, 1,
/* Value is a nonnegative number indicating the number of multisample buffers. */
NSOpenGLPFASamples, 4,
/* Value is a nonnegative indicating the number of samples per multisample buffer. */
NSOpenGLPFANoRecovery,
NSOpenGLPFAOpenGLProfile, NSOpenGLProfileVersion3_2Core, /* OpenGO最新版を指定 */
/* The requested profile must implement the OpenGL 3.2 core functionality. */
0
};
NSOpenGLPixelFormat *pixelFormat = [[NSOpenGLPixelFormat alloc] initWithAttributes:attrs];
self = [super initWithFrame:frame pixelFormat:pixelFormat];
if (self) {
[self setWantsBestResolutionOpenGLSurface:YES]; /* Retina Display対応 */
}
return self;
}
Storyboardだとインスペクラでの設定になっ
てしまうのをコードで設定。

16. シェーダを取り込む
- (void)prepareOpenGL
{
[super prepareOpenGL];
NSOpenGLContext *glContext = [self openGLContext];
self.vertexShader = glCreateShader(GL_VERTEX_SHADER); /* 頂点シェーダ・ハンドル */
const GLchar *vertexSource = [self readResource:@"MyShader" ofType:@"vsh"]; /* シェーダのソースコードの読み込み */
glShaderSource(self.vertexShader, 1, &vertexSource, NULL); /* シェーダのソースコードを設定 */
glCompileShader(self.vertexShader); /* コンパイル */
free((void *)vertexSource);
self.fragmentShader = glCreateShader(GL_FRAGMENT_SHADER); /* フラグメント・シェーダ・ハンドル */
const GLchar *fragmentSource = [self readResource:@"MyShader" ofType:@"fsh"]; /* シェーダのソースコードの読み込み */
glShaderSource(self.fragmentShader, 1, &fragmentSource, NULL); /* シェーダのソースコードを設定 */
glCompileShader(self.fragmentShader); /* コンパイル */
free((void *)fragmentSource);
self.program = glCreateProgram(); /* プログラム・ハンドル */
glAttachShader(self.program, self.vertexShader); /* プログラムに頂点シェーダを割り当てる */
glAttachShader(self.program, self.fragmentShader); /* プログラムにフラグメント・シェーダを割り当てる */
glLinkProgram(self.program); /* リンク */

17. vertex buffer object
glGenBuffers(1, &_vbo); /* VBOを作成 */
glBindBuffer(GL_ARRAY_BUFFER, self.vbo); /* 頂点シェーダに渡すデータ配列 */
GLfloat data[] = {
-0.8f, -0.8f, 0.0f, /* 頂点の座標 */
1.0f, 0.0f, 0.0f, 1.0f, /* 頂点の色情報 */
0.8f, -0.8f, 0.0f, /* 頂点の座標 */
0.0f, 1.0f, 0.0f, 1.0f, /* 頂点の色情報 */
0.0f, 0.8f, 0.0f, /* 頂点の座標 */
0.0f, 0.0f, 1.0f, 1.0f, /* 頂点の色情報 */
};
glBufferData(GL_ARRAY_BUFFER, sizeof(GLfloat) * 7 * 3, data, GL_STATIC_DRAW);
/* GPUに転送 */

18. vertex array object
glGenVertexArrays(1, &_vao); /* VAOを作成 */
glBindVertexArray(self.vao); /* OpenGLコンテキストに結びつける */
glVertexAttribPointer(0, 3, GL_FLOAT, GL_FALSE,
sizeof(GLfloat) * 7, (GLfloat *)0);
/* インデックス0: 頂点の色情報 */
glVertexAttribPointer(1, 4, GL_FLOAT, GL_FALSE,
sizeof(GLfloat) * 7, ((GLfloat *)0) + 3);
/* インデックス1: 頂点の色情報 */
glClearColor(0.2f, 0.4f, 0.6f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
[glContext flushBuffer];
}

19. 描画
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
glUseProgram(self.program); /* レンダリングで使用するシェーダを設定 */
glClearColor(0.2f, 0.4f, 0.6f, 1.0f);
glClear(GL_COLOR_BUFFER_BIT);
glBindVertexArray(self.vao); /* VAOを結びつける */
glEnableVertexAttribArray(0); /* 頂点属性を指定 */
glEnableVertexAttribArray(1); /* 頂点属性を指定 */
glDrawArrays(GL_TRIANGLES, 0, 3); /* レンダリング */
[[self openGLContext] flushBuffer];
}

20. ビューポートを設定
- (void)drawRect:(NSRect)dirtyRect {
[super drawRect:dirtyRect];
/* ビューポートのサイズ */
NSSize size = dirtyRect.size;
size = [self convertSizeToBacking:size]; /* Retina対応 */
glViewport(0, 0, size.width, size.height); /* ビューポートの指定 */

21. 頂点シェーダ
#version 410
layout (location=0) in vec3 vertex_pos; /* 0番目の入力: 頂点の座標 */
layout (location=1) in vec4 vertex_color; /* 1番目の入力: 頂点の色情報 */
out vec4 color; /* フラグメント・シェーダに渡す色情報 */
void main()
{
gl_Position = vec4(vertex_pos, 1.0);
/* 受け取った座標をそのままの位置に表示する */
color = vertex_color;
}
/* End Of File */

22. フラグメント・シェー
ダ
#version 410
in vec4 color; /* 頂点シェーダから渡された色情報 */
layout (location=0) out vec4 frag_color; /* ピクセルの色 */
void main()
{
frag_color = color; /* 渡された色情報をそのまま出力 */
}
/* End Of File */

24. 固定パイプライン
ローカル座標系
モデル変換
ワールド座標系
ビュー変換
視点座標系
投影変換
クリッピング座標系
クリッピング
ビューポート変換
走査変換
画素の陰影付け
隠面消去処理
画像

25. シェーダ
バッファオブジェクト
頂点シェーダ
ジオメトリックシェーダ
クリッピング
スクリーンマッピング
ラスタライザ
フラグメントシェーダ
ラスタオペレーション
フレームバッファ
映像出力