OpenGL 渲染图片

作者: 孙健会员 | 来源:发表于2016-10-10 12:12 被阅读955次

    1.顶点坐标(-1 ~ 1)

    static GLfloat vertex[8] = {
          1,    1, //右上V1
        -1,  1,//左上 V0
        -1,-1,//左下  V2
        -1,-1,//右下 V3
    }
    

    逆时针为正
    将顶点坐标传到GPU中

    //1.在GPU中 申请一个内存标识
    glGenBuffers(1, &_verTextureBuffer);
    //2.让这个标识去绑定一个内存区域,但此时,这个内存没有大小
    glBindBuffer(GL_ARRAY_BUFFER, _vertexBuffer);
    //3.根据顶点数组的大小,开辟内存空间,并将数据加载到内存中
    glBufferData(GL_ARRAY_BUFFER, sizeof(vertex), &vertex, GL_STATUS_DRAW);
    //4.启用这块内存
    glEnableVertexAttribArray(GLKVertexArrtibPosition);
    //5. 告诉GPU,定点数据在内存中的格式是怎样的,应该如何去用
    glVertexAttribPointer(GLKVertexAttribPosition, 2, GL_FLOAT, GL_FALSE, 8 , NULL);
    

    2.纹理坐标(取值范围0~1)

    static GLfloat textureCoords[8] = {
      1,   1,//对V1
      0,   1,//对V0
      0,   0,//对V2
      1,   0,//对V3
    }
    

    将纹理坐标传到GPU中

    1.在GPU中申请一个内存
    glGenBuffers(1, &_textureCoordBuffer);
    2.让这个标示去绑定一个内存区域,但是此时,内存大小为0
    glBindBuffer(GL_ARRAY_BUFFER, _textureCoordBuffer);
    3.根据纹理坐标数组的大小,开辟内存空间,并将数据加载到内存中
    glBufferData(GL_ARRAY_BUFFER, sizeof(textureCoords), textureCoords, GL_STATUS_DRAW);
    4.启用这块内存,标记为位置
    glEnableVertexAttribArray(GLKVertexAttribTextureCoord0);
    5.告诉GPU,定点数据在内存中国年的格式是怎样的,应该如何去使用
    glVertexAttribPointer(GLKVertexAttribTexCoord0, 2, GL_FLOAT, GL_FALSE, 8, NULL);
    

    3.加载纹理图片像素数据

    - (void *)getImageData:(UIImage *)image{
        CGImageRef imageRef = [image CGImage];
       size_t imageWidth = CGImageGetWidth(imageRef);
       size_t imageHeight = CGImageGetHeight(imageRef);
       GLubyte * imageData = (GLubyte *)malloc(imageWidth * imageHeight * 4);
       memset(imageData, 0, imageWidth * imageHeight * 4);
    CGContextRef imageContextRef = CGBitmapContextCreate(imageData, imageWidth, imageHeight, 8, imageWidth * 4, CGImageGetColorSpace(imageRef), kCGImageAlphaPremultipiled);
    CGContextTranslateCTM(imageContextRef, 0, imageHeight);
    CGContextScaleCTM(imageContxetRef, 0, imageHeight);
    CGContextDrawImage(imageContextRef, CGRectMake(0.0, 0.0, (CGFloat)imageWidth, (CGFLoat)imageHeight), imageRef);
    CGContextRelease(imageContextRef);
    return imageData;
    }
    

    4.加载像素数据

    - (void)loadTexture{
      1.将着色器中的纹理采样器和纹理区域0进行关联
      glUniform1i(_textureBufferf, 0);
      GLuint text1;
      2.激活纹理单元1
      glActiveTexture(GL_TEXTURE0);
      3.申请内存
      glGenTextures(1, &text1);
      4.将内存和激活的纹理绑定
     glBindTexture(GL_TEXTURE_2D, text1);
      UIImage *image = [UIImage imageName:@"2.png"];
      GLubyte * imageData = [self getImageData:image];
      5.将图片像素数据,加载到纹理区域0 中去
      glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA , image.size.width,   image.size.height, 0, GL_RGBA, GL_UNSIGNED_BYTE, imageData);
      6.设置图片在渲染时的一些配置
      glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER,   GL_LINEAR);
      glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
      glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
      glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
    }
    

    5.绘制

    - (void)glkView:(GLKView *)view drawInRect:(CGRect)rect{
      1.设置清除颜色
      glClearColor(1, 1, 1, 1);
      2.清除颜色缓冲区
       glClear(GL_COLOR_BUFFER_BIT);
      3.使用着色去源程序
       [self.shaderManager useProgram];
       4.绘制
       glDrawArrays(GL_TRANGLE_FAN, 0, 4);
    }
    

    6.顶点着色器

    attribute vec4 position;//顶点位置
    attribute vec2 texCoord0;//纹理坐标
    varying vec2 texCoordVarying;//片段着色器的输入变量
    void main()
    {
        gl_Position = position;
        texCoordVarying = texCoord0;
    }
    

    7.片段着色器

    precision medium float ;
    varying vec2 texCoordVarying;
    uniform sample2D sam2DR;
    void main ()
    {
      low vec4 reba = vec4(0, 0, 0, 1);
      reba = texture@d(sam2DR, texCoordVarying);
      gl_FragColor = rgba;
    }
    

    相关文章

      网友评论

        本文标题:OpenGL 渲染图片

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