例：キューブを回転させる（GLKit+CoreAnimation） #OpenGL

GLKit

レンダリング

処理内容

具体的な手順

準備

頂点座標、テクスチャ座標、法線データ構造の定義

typedef struct {
 GLKVector3 positionCoord; //頂点座標
 GLKVector2 textureCoord; //テクスチャ座標
 GLKVector3 normal; // 
} CCVertex;

立方体の三角形を構成する頂点の数の定義

//  :各面は2つの三角形で構成され、6つの頂点を持つ2つの三角形、6つの面、立方体の頂点数は6である。*6= 36
static NSInteger const kCoordCount = 36;

GLKViewDelegateを実装します。

@interface CubeViewController () <GLKViewDelegate>
@end

GLKViewオブジェクトglkViewを定義します。


//GLKViewオブジェクトを定義する
@property (nonatomic, strong) GLKView *glkView;

GLKBaseEffectオブジェクトbaseEffectを定義します。;


//GLKBaseEffectオブジェクトを定義する
@property (nonatomic, strong) GLKBaseEffect *baseEffect;

データ構造配列verticesの定義


//データ構造の配列を定義する
@property (nonatomic, assign) CCVertex *vertices;

タイマー・オブジェクトの定義 displayLink;


//タイマー・オブジェクトを定義する
@property (nonatomic, strong) CADisplayLink *displayLink;

回転角度の記録変角


//回転角度変数を記録する
@property (nonatomic, assign) NSInteger angle;

頂点バッファID vertexBuffer


//頂点バッファID
@property (nonatomic, assign) GLuint vertexBuffer;

OpenGL ES関連する初期化 commonInit 関数

ビューの背景色の設定

self.view.backgroundColor = [UIColor blackColor];

2.コンテキストの初期化、現在のコンテキストの設定

//コンテキストを作成する
 EAGLContext *context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];
 //現在のコンテキストを設定する
 [EAGLContext setCurrentContext:context];

GLKViewの作成とプロキシの設定

CGRect frame = CGRectMake(0, 100, self.view.frame.size.width, self.view.frame.size.width);
 self.glkView = [[GLKView alloc] initWithFrame:frame context:context];
 self.glkView.backgroundColor = [UIColor clearColor];
 self.glkView.delegate = self;

ディープ・キャッシュの使用

self.glkView.drawableDepthFormat = GLKViewDrawableDepthFormat24;
 //デフォルトでは、正方形が画面の外を向くようにZ軸を反転させる。
 glDepthRangef(1, 0);

1. ビューが作成するレンダーバッファの設定

self.glkView.drawableColorFormat = GLKViewDrawableColorFormatRGBA8888;
 self.glkView.drawableStencilFormat = GLKViewDrawableStencilFormat8;
 self.glkView.drawableMultisample = GLKViewDrawableMultisample4X;

GLKViewにselfを追加.view

[self.view addSubview:self.glkView];

7.テクスチャデータの読み込み setUpTexture関数

テクスチャイメージパスの取得

NSString *imagePath = [[[NSBundle mainBundle] resourcePath] stringByAppendingPathComponent:@"meimei.jpg"];
 UIImage *image = [UIImage imageWithContentsOfFile:imagePath];

テクスチャパラメータの設定

NSDictionary *options = @{GLKTextureLoaderOriginBottomLeft : @(YES)};
 GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:[image CGImage] options:options error:NULL];

AppleのGLKitを使用してGLKBaseEffectを提供し、シェーダー作業を完了します。

self.baseEffect = [[GLKBaseEffect alloc] init];
 self.baseEffect.texture2d0.name = textureInfo.name;
 self.baseEffect.texture2d0.target = textureInfo.target;
 //照明効果をオンにする
 self.baseEffect.light0.enabled = YES;
 //色を拡散する
 self.baseEffect.light0.diffuseColor = GLKVector4Make(1, 1, 1, 1);
 //光源位置
 self.baseEffect.light0.position = GLKVector4Make(-0.5, -0.5, 5, 1);

8.イメージの頂点座標とテクスチャ座標の読み込み setUpVertexData関数

頂点配列の設定

//頂点データ空間を開く（データ構造SenceVertex size）* 頂点数 kCoordCount)
 self.vertices = malloc(sizeof(CCVertex) * kCoordCount);
 
 //  
 self.vertices[0] = (CCVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 0, 1}};
 self.vertices[1] = (CCVertex){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
 self.vertices[2] = (CCVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
 self.vertices[3] = (CCVertex){{-0.5, -0.5, 0.5}, {0, 0}, {0, 0, 1}};
 self.vertices[4] = (CCVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 0, 1}};
 self.vertices[5] = (CCVertex){{0.5, -0.5, 0.5}, {1, 0}, {0, 0, 1}};
 
 //  
 self.vertices[6] = (CCVertex){{0.5, 0.5, 0.5}, {1, 1}, {0, 1, 0}};
 self.vertices[7] = (CCVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 1, 0}};
 self.vertices[8] = (CCVertex){{0.5, 0.5, -0.5}, {1, 0}, {0, 1, 0}};
 self.vertices[9] = (CCVertex){{-0.5, 0.5, 0.5}, {0, 1}, {0, 1, 0}};
 self.vertices[10] = (CCVertex){{0.5, 0.5, -0.5}, {1, 0}, {0, 1, 0}};
 self.vertices[11] = (CCVertex){{-0.5, 0.5, -0.5}, {0, 0}, {0, 1, 0}};
 
 //  
 self.vertices[12] = (CCVertex){{0.5, -0.5, 0.5}, {1, 1}, {0, -1, 0}};
 self.vertices[13] = (CCVertex){{-0.5, -0.5, 0.5}, {0, 1}, {0, -1, 0}};
 self.vertices[14] = (CCVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, -1, 0}};
 self.vertices[15] = (CCVertex){{-0.5, -0.5, 0.5}, {0, 1}, {0, -1, 0}};
 self.vertices[16] = (CCVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, -1, 0}};
 self.vertices[17] = (CCVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, -1, 0}};
 
 //  
 self.vertices[18] = (CCVertex){{-0.5, 0.5, 0.5}, {1, 1}, {-1, 0, 0}};
 self.vertices[19] = (CCVertex){{-0.5, -0.5, 0.5}, {0, 1}, {-1, 0, 0}};
 self.vertices[20] = (CCVertex){{-0.5, 0.5, -0.5}, {1, 0}, {-1, 0, 0}};
 self.vertices[21] = (CCVertex){{-0.5, -0.5, 0.5}, {0, 1}, {-1, 0, 0}};
 self.vertices[22] = (CCVertex){{-0.5, 0.5, -0.5}, {1, 0}, {-1, 0, 0}};
 self.vertices[23] = (CCVertex){{-0.5, -0.5, -0.5}, {0, 0}, {-1, 0, 0}};
 
 //  
 self.vertices[24] = (CCVertex){{0.5, 0.5, 0.5}, {1, 1}, {1, 0, 0}};
 self.vertices[25] = (CCVertex){{0.5, -0.5, 0.5}, {0, 1}, {1, 0, 0}};
 self.vertices[26] = (CCVertex){{0.5, 0.5, -0.5}, {1, 0}, {1, 0, 0}};
 self.vertices[27] = (CCVertex){{0.5, -0.5, 0.5}, {0, 1}, {1, 0, 0}};
 self.vertices[28] = (CCVertex){{0.5, 0.5, -0.5}, {1, 0}, {1, 0, 0}};
 self.vertices[29] = (CCVertex){{0.5, -0.5, -0.5}, {0, 0}, {1, 0, 0}};
 
 //  
 self.vertices[30] = (CCVertex){{-0.5, 0.5, -0.5}, {0, 1}, {0, 0, -1}};
 self.vertices[31] = (CCVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, 0, -1}};
 self.vertices[32] = (CCVertex){{0.5, 0.5, -0.5}, {1, 1}, {0, 0, -1}};
 self.vertices[33] = (CCVertex){{-0.5, -0.5, -0.5}, {0, 0}, {0, 0, -1}};
 self.vertices[34] = (CCVertex){{0.5, 0.5, -0.5}, {1, 1}, {0, 0, -1}};
 self.vertices[35] = (CCVertex){{0.5, -0.5, -0.5}, {1, 0}, {0, 0, -1}};

頂点バッファのオープン

頂点バッファ識別子IDの作成

glGenBuffers(1, &_vertexBuffer);

頂点バッファのバインド

glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);

頂点配列のデータを頂点バッファにコピーします。

GLsizeiptr bufferSizeBytes = sizeof(CCVertex) * kCoordCount;
glBufferData(GL_ARRAY_BUFFER, bufferSizeBytes, self.vertices, GL_STATIC_DRAW);

読み取りチャネルをオープン

頂点座標データ GLKVertexAttribPosition

glEnableVertexAttribArray(GLKVertexAttribPosition);glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL + offsetof(CCVertex, positionCoord));

テクスチャ座標データ GLKVertexAttribTexCoord0

glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL + offsetof(CCVertex, textureCoord));

ノーマルデータ GLKVertexAttribNormal

glEnableVertexAttribArray(GLKVertexAttribNormal);
glVertexAttribPointer(GLKVertexAttribNormal, 3, GL_FLOAT, GL_FALSE, sizeof(CCVertex), NULL + offsetof(CCVertex, normal));

CADisplayLinkタイマーの追加 addCADisplayLink

タイマーの初期化とコールバックの設定


		//CADisplayLink タイマーと同様に、定期的な呼び出しを提供する。.QuartzCoreに属する.framework .
 //ブログを読むことができる https://..com/panyangjun/p/.html
 self.angle = 0;
 self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(updateAngle)];
 [self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

回転を設定し、再レンダリングのためにサブミットするタイマー・コールバック

//回転の度合いを計算する
self.angle = (self.angle + 5) % 360;
//baseEffectを修正する.transform.modelviewMatrix
self.baseEffect.transform.modelviewMatrix = GLKMatrix4MakeRotation(GLKMathDegreesToRadians(self.angle), 0.3, 1, 0.7);
//再レンダリングする
[self.glkView display];

リソースの解放

現在のコンテキストをnilに設定

if ([EAGLContext currentContext] == self.glkView.context) {
 [EAGLContext setCurrentContext:nil];
 }

データ構造の解放

if (_vertices) {
 free(_vertices);
 _vertices = nil;
 }

頂点バッファの削除

if (_vertexBuffer) {
 glDeleteBuffers(1, &_vertexBuffer);
 _vertexBuffer = 0;
 }

displayLink

[self.displayLink invalidate];

CoreAnimation

レンダリング

処理内容

具体的な手順

準備

IBOutletコンテナビュー


@property (weak, nonatomic) IBOutlet UIView *containerView;

IBOutlet 6


@property (strong, nonatomic) IBOutlet UIView *view0;
@property (strong, nonatomic) IBOutlet UIView *view1;
@property (strong, nonatomic) IBOutlet UIView *view2;
@property (strong, nonatomic) IBOutlet UIView *view3;
@property (strong, nonatomic) IBOutlet UIView *view4;
@property (strong, nonatomic) IBOutlet UIView *view5;

フェース配列フェースの配列


@property(nonatomic,strong)NSArray *faces;

タイマーオブジェクト


@property (nonatomic, strong) CADisplayLink *displayLink;

回転角度の記録


@property (nonatomic, assign) NSInteger angle;

viewDidLoad

立方体の6つの面の足し算

self.faces = @[_view0,_view1,_view2,_view3,_view4,_view5];

コンテナビューをX軸の周りに45度、Y軸の周りに45度回転させます。

/親ビューのレイヤー
 CATransform3D perspective = CATransform3DIdentity;
 //m34遠近関係に影響を与える https://..com/p/3dd14cfbdc53
 perspective.m34 = -1.0 / 500.0;
 perspective = CATransform3DRotate(perspective, -M_PI_4, 1, 0, 0);
 perspective = CATransform3DRotate(perspective, -M_PI_4, 0, 1, 0);
 //特記事項：回転時には6つのサブレイヤーで同時に動作する必要があるため、selfに注意すること。.animateCube.layer.sublayerTransform = transformtransformの代わりにsublayerTransformを使う。
 self.containerView.layer.sublayerTransform = perspective;

6つのビューを面配列に格納します。

1）顔1：正面 - Z軸に沿って正の方向に100単位の平行移動

CATransform3D transform = CATransform3DMakeTranslation(0, 0, 100);
 [self addFace:0 withTransform:transform];

2) 面 2：右面・・・X 軸の正方向に 100 単位平行移動した後、Y 軸に沿って反時計回りに 90 度回転。

transform = CATransform3DMakeTranslation(100, 0, 0);
 transform = CATransform3DRotate(transform, M_PI_2, 0, 1, 0);
 [self addFace:1 withTransform:transform];

3) 面 3：下・・・Y 軸に沿ってマイナス方向に 100 単位平行移動した後、X 軸に沿って反時計回りに 90 度回転。

transform = CATransform3DMakeTranslation(0, -100, 0);
 transform = CATransform3DRotate(transform, M_PI_2, 1, 0, 0);
 [self addFace:2 withTransform:transform];

4) 面4：上面---Y軸の正方向に100単位平行移動し、X軸に沿って時計回りに90度回転。

transform = CATransform3DMakeTranslation(0, 100, 0);
 transform = CATransform3DRotate(transform, -M_PI_2, 1, 0, 0);
 [self addFace:3 withTransform:transform];

5) 面5：左面・・・X軸をマイナス方向に100単位平行移動し、Y軸を時計回りに90度回転。

transform = CATransform3DMakeTranslation(-100, 0, 0);
 transform = CATransform3DRotate(transform, -M_PI_2, 0, 1, 0);
 [self addFace:4 withTransform:transform];

6) face 6:back・・・Z軸をマイナス方向に100単位平行移動し、Y軸を時計回りに180度回転。

transform = CATransform3DMakeTranslation(0, 0, -100);
 transform = CATransform3DRotate(transform, M_PI, 0, 1, 0);
 [self addFace:5 withTransform:transform];

-addFace:withTransform:

//フェイス・ビューを取得し、コンテナに追加する
UIView *face = self.faces[index];
[self.containerView addSubview:face];
//フェース・ビューをコンテナの中央に配置する。
CGSize containerSize = self.containerView.bounds.size;
face.center = CGPointMake(containerSize.width / 2.0, containerSize.height / 2.0);
//トランスフォームを追加する
face.layer.transform = transform;

タイマーとコールバック関数の追加

タイマーを初期化し、タイミング・コールバックを設定します。

self.angle = 0;
self.displayLink = [CADisplayLink displayLinkWithTarget:self selector:@selector(update)];
[self.displayLink addToRunLoop:[NSRunLoop mainRunLoop] forMode:NSRunLoopCommonModes];

コールバック処理

//回転の度合いを計算する
self.angle = (self.angle + 5) % 360;
//度数をラジアンに変換する
float deg = self.angle * (M_PI / 180);
// 単位行列を初期化する
CATransform3D temp = CATransform3DIdentity;
//セル行列を回転させる
temp = CATransform3DRotate(temp, deg, 0.3, 1, 0.7);
//コンテナのサブレイヤーを回転させる
self.containerView.layer.sublayerTransform = temp;

例：キューブを回転させる（GLKit+CoreAnimation）

GLKit

レンダリング

処理内容

具体的な手順

準備

OpenGL ES関連する初期化 commonInit 関数

CADisplayLinkタイマーの追加 addCADisplayLink

リソースの解放

CoreAnimation

レンダリング

処理内容

具体的な手順

準備

viewDidLoad

Read next

SSL&OpenSSL

正規表現の簡単な使い方

スパークのパーティショニング戦略

CocosCreatorスクリプト・プロパティの個人設定 - ドロップダウン・リスト・プロパティ, スライダー・プロパティ

コンピューター・ネットワークのレイヤー7、レイヤー4、レイヤー5モデル

OpenGL 2D テクスチャ・ユニットとテクスチャ・フリップの解決策