【问题标题】:Bitmap rendering methodology in OpenGL?OpenGL中的位图渲染方法?
【发布时间】:2012-12-20 16:48:21
【问题描述】:

我最近一直在用纯 C 语言开发位图解析器,只是为了了解更简单图像格式的低级工作原理。到目前为止,在位图文件上使用 Wikipedia 的 article,我已经能够(至少我认为)正确解析信息 - 至少,大部分信息。

问题是我不太确定从那里做什么:因为我一直在使用 3.1 环境,所以我可以访问更多现代化的功能,这很好,尽管我仍然迷路了。我用 GLFW 设置了一个窗口,但到目前为止还没有真正呈现任何东西,因为我一直专注于解析/低级细节。

由于我非常努力避免查看实际的代码示例,如果有人可以向我解释渲染位图所涉及的过程是什么,只使用 OpenGL/GLFW 和ISO C 标准库。

虽然我有几个着色器,并且可以毫无问题地加载它们,但我认为我需要做的是渲染一个符合尺寸(宽度、高度)的 [不可见] 四边形) 的图像本身,然后将像素数据传递给 OpenGL。然而,主要问题是着色器的设置如下:

顶点着色器

#version 150
#extension GL_ARB_separate_shader_objects : enable

layout(location = 0) in vec2 Position;
layout(location = 1) in vec2 UV_In;

out vec2 UV;

void main()
{
    gl_Position = vec4( Position, 0.0f, 1.0f );
    UV = UV_In;
}

片段着色器

#version 150
#extension GL_ARB_separate_shader_objects : enable

in vec2 UV;

out vec3 Output;

uniform sampler2D TheSampler;

void main()
{
    Output = texture2D( TheSampler, UV ).rgb;
}

而且我不确定如何获得着色器所需的实际 UV 坐标。我在想我需要生成顶点,将它们存储在一个数组中,然后按照glVertexAttribPointer(...) 的行调用一些东西来获取 UV 坐标,但我不确定我应该使用图像中的哪些数据来获取这个,甚至我是否已经在函数中解析了它。我想这将涉及使用内部/外部 for 循环(外部表示 x,内部表示 y)以行/列方式抓取图像。不过,我对此感到有些困惑,我不确定这是否是我需要的。

无论哪种方式,任何有关如何执行此操作的建议都将不胜感激。


解析图片的实际代码(HEADER_LENGTH = 54 bytes):

GLuint Image_LoadBmp( const char* fname, image_bmp_t* data )
{   
    uint8_t  header[ HEADER_LENGTH ];

    FILE* f = fopen( fname, "rb" );

    if ( !f )
    {
        printf( "ERROR: file \"%s\" could not be opened [likely] due to incorrect path. :/ \n", fname );

        return 0; // return false
    }

    data->filename = strdup( fname ); // TODO: write a wrapper for strdup which exits program on NULL returns

    const size_t num_bytes_read = fread( ( void* )header, sizeof( uint8_t ), HEADER_LENGTH, f );

    if ( num_bytes_read != HEADER_LENGTH )
    {
        printf( "ERROR: file \"%s\" could not be opened due to header size being " _SIZE_T_SPECIFIER " bytes; "\
                "this is an invalid format. \n", fname, num_bytes_read );

        return 0;
    }

    if ( header[ 0 ] != *( uint8_t* )"B" || header[ 1 ] != *( uint8_t* )"M" )
    {
        printf( "ERROR: file \"%s\" does NOT have a valid signature \n", fname );

        return 0;
    }

    data->image_size         = *( uint32_t* )&( header[ 0x22 ] );
    data->header_size        = ( uint32_t )( header[ 0x0E ] );
    data->width              = ( uint32_t )( header[ 0x12 ] );
    data->height             = ( uint32_t )( header[ 0x16 ] );
    data->pixel_data_pos     = ( uint32_t )( header[ 0x0A ] );
    data->compression_method = ( uint8_t )( header[ 0x1E ] );
    data->bpp                = ( uint8_t )( header[ 0x1C ] );

    // TODO (maybe): add support for other compression methods

    if ( data->compression_method != CM_RGB )
    {
        puts( "ERROR: file \"%s\" does NOT have a supported compression method for this parser; \n" \
              "\t Currently, the compression methods supported are: \n" \
              "\t - BI_RGB \n\n"
             );

        return 0;
    }



    return 1;
}

根据从当前图像收集的图像信息,我的调试输出如下所示:

Info for "assets/sprites/nave/nave0001.bmp" {  
     Size        = 3612      Header Size = 40  
     Width       = 27      Height      = 43  
     Pixel Array Address = 54      Compression Method  = 0  
     Bits Per Pixel      = 24
 }

【问题讨论】:

    标签: c opengl image-processing bitmap


    【解决方案1】:

    这里有很多,您可能需要将其分解为多个问题,但这里是概述:

    您不需要将实际的像素数据传递给着色器;您需要做的是使用像素数据预先在 GL 中创建一个纹理对象,然后在着色器中引用该纹理。您需要绘制的实际几何图形(正如您所怀疑的那样)只有一个四边形,它的四个角和相应的纹理坐标(在这种情况下是微不足道的,角上的每个轴只有 0.0 和 1.0)。

    着色器的神奇之处在于片段着色器将针对输出中的每个像素运行,您只需在 GL 提供给着色器的不同纹理坐标处对纹理进行采样。

    (如果您是 GL 新手,请先尝试以某种固定颜色绘制一个简单的四边形以使其正常工作,然后再尝试将 BMP 数据放入纹理中。)

    【讨论】:

      【解决方案2】:

      首先让我说:您阅读标题的方法几乎是完美的。唯一的缺点:您的代码不处理 Endianess,并且您正在截断标题的字段(对于任何尺寸大于 255 的图像,它都会中断。

      这里有一个修复

      data->image_size = (uint32_t)header[0x22] | (uint32_t)header[0x23] << 8 | (uint32_t)header[0x24] << 16 | (uint32_t)header[0x25] << 24;
      

      对于所有其他大于 8 位的字段,模式相同。每个标头字段的强制转换对于防止截断是必要的。将其转换为目标变量类型。也不必担心性能,现代编译器会将其转换为非常高效的代码。

      到目前为止,您的函数仍然缺少读取图像数据。我只是假设数据稍后会出现在 data-&gt;pixels 字段中。

      读入图像后,您可以将其传递给 OpenGL。 OpenGL 在所谓的“纹理对象”中管理其图像。通常的节是:

      1. 使用 glGenTextures 创建纹理对象名称
      2. 使用 glBindTexture 绑定纹理对象
      3. 在所有 GL_UNPACK_… 参数上使用 glPixelStorei 设置像素传输参数
      4. 使用 glTexImage2D 上传纹理 5.

        • 转向 mipmapping

        • 生成 Mipmap。

      如下

      GLuint texName;
      glGenTexture(1, &texName);
      glBindTexture(GL_TEXTURE_2D, texName);
      
      glPixelStorei(GL_UNPACK_SWAP_BYTES, GL_FALSE);
      glPixelStorei(GL_UNPACK_LSB_FIRST, GL_FALSE);
      glPixelStorei(GL_UNPACK_ROW_LENGTH, 0);   // could also be set to image size, but this is used only
      glPixelStorei(GL_UNPACK_IMAGE_HEIGHT, 0); // if one wants to load only a subset of the image
      glPixelStorei(GL_UNPACK_SKIP_PIXELS, 0);
      glPixelStorei(GL_UNPACK_SKIP_ROWS, 0);
      glPixelStorei(GL_UNPACK_SKIP_IMAGES, 0);
      glPixelStorei(GL_UNPACK_SKIP_ALIGNMENT, 4); // that one's pretty important. For TrueColor DIBs the alignment is 4
      
      GLenum internalformat;
      switch(data->bpp) {
      case 24:
          internalformat = GL_RGB; break;
      
      case 32:
          internalformat = GL_RGBA; break;
      }
      
      glTexImage2D(GL_TEXTURE_2D, 0, internalformat,
                   data->width, data->height, 0
                   GL_BRGA, GL_UNSIGNED_INT_8_8_8_8, data->pixels);
      
      glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
      

      GL_UNSIGNED_INT_8_8_8_8 类型需要解释。你看,DIB 将 32 位无符号整数视为复合颜色结构。事实上,在 Windows 中,您可以找到一种颜色类型,它是一个类型定义的整数。这就是 DIB 中包含的内容。通过使用具有 4×8 分量整数类型的 BGRA 格式,我们使 OpenGL 以该格式解压缩像素。

      【讨论】:

      • 感谢您的反馈/建议,这应该会有很大帮助。
      猜你喜欢
      • 2011-12-08
      • 1970-01-01
      • 2013-02-01
      • 1970-01-01
      • 1970-01-01
      • 1970-01-01
      • 2017-10-03
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多