美文网首页
2.给三角形贴纹理

2.给三角形贴纹理

作者: 花神Flora | 来源:发表于2016-03-26 15:38 被阅读150次

只有一个单色的三角形,总归是不好看,下面就往上面粘贴一个图片。纹理贴图会引入映射、UV坐标等概念。

#import "GameViewController.h"
#import <OpenGLES/ES2/glext.h>
//将顶点坐标和UV纹理坐标放入同一个数据中
typedef struct {
    GLKVector3 positionCoords;
    GLKVector2 textureCoords;
} VertexType;

//三角形顶点数据
static const VertexType vertices[] = {
    {{-0.5f, -0.5f, 0.0f}, {0.0f, 0.0f}},
    {{0.5f, -0.5f, 0.0f}, {1.0f, 0.0f}},
    {{-0.5f, 0.5f, 0.0f}, {0.0f, 1.0f}}
};

@interface GameViewController () {
    GLuint vertexBufferID;
}
//用于设置通用的OpenGL ES环境
@property (strong, nonatomic) GLKBaseEffect *baseEffect;
//OpenGL ES上下文
@property (strong, nonatomic) EAGLContext *context;
@end

@implementation GameViewController

- (void)viewDidLoad
{
    [super viewDidLoad];
    
    //使用支持OpenGL ES2的上下文
    self.context = [[EAGLContext alloc] initWithAPI:kEAGLRenderingAPIOpenGLES2];

    if (!self.context) {
        NSLog(@"Failed to create ES context");
    }
    
    GLKView *view = (GLKView *)self.view;
    view.context = self.context;
    view.drawableDepthFormat = GLKViewDrawableDepthFormat24;

    [EAGLContext setCurrentContext:self.context];
    
    self.baseEffect = [[GLKBaseEffect alloc] init];
    //启用元素的默认颜色
//    self.baseEffect.useConstantColor = GL_TRUE;
    //设置默认颜色
//    self.baseEffect.constantColor = GLKVector4Make(0.0f, 1.0f, 1.0f, 1.0f);
    
    //生成纹理,由于UIKit的坐标系Y轴与OpenGL ES的Y轴刚好上下颠倒,因此如果图片不加任何处理的话,在贴图后将是颠倒显示
    CGImageRef imageRef = [UIImage imageNamed:@"1.jpg"].CGImage;
    GLKTextureInfo *textureInfo = [GLKTextureLoader textureWithCGImage:imageRef options:NULL error:nil];
    self.baseEffect.texture2d0.name = textureInfo.name;
    self.baseEffect.texture2d0.target = textureInfo.target;
    
    //设置背景色
    glClearColor(0.0f, 1.0f, 0.0f, 1.0f);
    
    //1. 生成缓存ID
    glGenBuffers(1, &vertexBufferID);
    //2. 
    glBindBuffer(GL_ARRAY_BUFFER, vertexBufferID);
    //3. 
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertices), vertices, GL_STATIC_DRAW);
}

- (BOOL)prefersStatusBarHidden {
    return YES;
}

#pragma mark - GLKView and GLKViewController delegate methods

- (void)glkView:(GLKView *)view drawInRect:(CGRect)rect
{
    [self.baseEffect prepareToDraw];
    
    glClear(GL_COLOR_BUFFER_BIT | GL_DEPTH_BUFFER_BIT);
    //4. 顶点坐标(x, y, z)
    glEnableVertexAttribArray(GLKVertexAttribPosition);
    //5. 类型,成员个数,类型,归一化,间隔,偏移
    glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(VertexType), NULL + offsetof(VertexType, positionCoords));
    //4.1 纹理坐标(u, v)
    glEnableVertexAttribArray(GLKVertexAttribTexCoord0);
    //5.1
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, sizeof(VertexType), NULL + offsetof(VertexType, textureCoords));

    //6. 绘制
    glDrawArrays(GL_TRIANGLES, 0, 3);
}

- (void)dealloc
{
    if ([EAGLContext currentContext] == self.context) {
        [EAGLContext setCurrentContext:nil];
    }
    
    glDeleteBuffers(1, &vertexBufferID);
    vertexBufferID = 0;
}

- (void)didReceiveMemoryWarning
{
    [super didReceiveMemoryWarning];
    
    if ([self isViewLoaded] && ([[self view] window] == nil)) {
        self.view = nil;
        
        if ([EAGLContext currentContext] == self.context) {
            [EAGLContext setCurrentContext:nil];
        }
        self.context = nil;
        
        glDeleteBuffers(1, &vertexBufferID);
        vertexBufferID = 0;
    }
}
@end

UIImage获取的CGImageRefY坐标方向与OpenGL ES的Y坐标相反,因此看到的图片是反的。

难点是glVertexAttribPointer(GLKVertexAttribPosition, 3, GL_FLOAT, GL_FALSE, sizeof(VertexType), NULL + offsetof(VertexType, positionCoords));的参数含义:

  1. 顶点属性类型
  2. 该类型每个顶点所含数据个数
  3. 数据类型
  4. 是否归一化
  5. 每个顶点数组间的间隔(即每个顶点的数据所占空间大小)
  6. 该类型的数据起始位置相对于起点的偏移量

offsetof用来获取结构体的成员positionCoords在整个结构体VertexType中的偏移量。

相关文章

  • Android OpenGL添加纹理

    1 相关基础 1.1 贴纹理原理简单概述 其实贴纹理的原理非常简单,就是给每个三角形贴上图片即可。那么如何给三角形...

  • 2.给三角形贴纹理

    只有一个单色的三角形,总归是不好看,下面就往上面粘贴一个图片。纹理贴图会引入映射、UV坐标等概念。 UIImage...

  • OpenGL 给图形贴纹理(金字塔,隧道案例)

    前言:我们知道在OpenGL中,图形都是通过一个或多个三角形来绘制的,所以给图形贴纹理,我们就需要把图形拆分为多个...

  • OpenGL中的纹理

    什么是纹理 纹理(texture),通常来说,纹理就是一张二维的图片。给一个模型贴一个纹理,就像在iOS代码中添加...

  • OpenGL笔记八:2D纹理坐标解析

    前言 期待您移步上篇:OpenGL笔记七:纹理常用API(二) 纹理采样 为了能够把纹理映射(Map)到三角形上,...

  • OpenGL 2D纹理坐标解析

    为了能够把纹理映射(Map)到三角形上,我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着...

  • 九、纹理坐标的理解

    为了能够把纹理映射(Map)到三角形上,我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着...

  • OpenGL学习--关于纹理坐标

    为了能够把纹理映射(Map)到三角形上,我们需要指定三角形的每个顶点各自对应纹理的哪个部分。这样每个顶点就会关联着...

  • OpenGL 纹理

    纹理常用的函数 纹理只是一种能够应用到场景中的三角形上的图像数据。它经过过滤的纹理单元(texel,相当于基于纹理...

  • OpenGL-基础纹理概览

    纹理是一种能够应用到场景中的三角形上的图像数据 纹理通过经过滤的纹理单元(texel,相当于纹理的像素)填充到实心...

网友评论

      本文标题:2.给三角形贴纹理

      本文链接:https://www.haomeiwen.com/subject/gcmdlttx.html