如何使用NPOT图像作为纹理与libpng和OpenGL ES 1.1

Question

我试图使用npot大小的PNG图像作为OpenGL ES 1.1(所以没有GL_arb_texture_rectangle)使用libpng 1.5的纹理。使用SDL，我可以将NPOT图像放到NPOT纹理上，但我不知道如何使用libpng做类似的事情。

当我使用原始纹理(1280x720)时，我得到的只是一个白色的表面。当我在文件系统上将其大小调整为1024x512时，它显示得很好。

由于某些原因，NPOT纹理可以在4.2 AVD上使用-gpu on。

下面是代码。它几乎是这样的，使用libzip而不是直接使用fopen从APK中读取一些更改。

void png_zip_read(png_structp png, png_bytep data, png_size_t size)
{
    zip_file* file = static_cast<zip_file*>(png_get_io_ptr(png));
    zip_fread(file, data, size);
}
GLuint load_png_texture(const std::string& path, unsigned int& width,
                        unsigned int& height)
{
    if (!apk_path.length())
        throw "APK Path not set";
    zip* apk = zip_open(apk_path.c_str(), 0, NULL);
    if (!apk)
        throw "Error loading APK";
    zip_file* file = zip_fopen(apk, path.c_str(), 0);
    if (file == 0)
        throw path + ": " + strerror(errno);
    png_byte header[8];
    zip_fread(file, header, 8);
    if (png_sig_cmp(header, 0, 8)) {
        zip_fclose(file);
        zip_close(apk);
        throw path + " is not a PNG";
    }
    png_structp png = png_create_read_struct(PNG_LIBPNG_VER_STRING,
                                             NULL, NULL, NULL);
    if (!png) {
        zip_fclose(file);
        zip_close(apk);
        throw "Failed to create png struct";
    }
    png_infop info = png_create_info_struct(png);
    if (!info) {
        png_destroy_read_struct(&png, (png_infopp) NULL, (png_infopp) NULL);
        zip_fclose(file);
        zip_close(apk);
        throw "Failed to create png info struct";
    }
    png_infop info_end = png_create_info_struct(png);
    if (!info_end) {
        png_destroy_read_struct(&png, &info, (png_infopp) NULL);
        zip_fclose(file);
        zip_close(apk);
        throw "Failed to create png info struct";
    }
    if (setjmp(png_jmpbuf(png))) {
        png_destroy_read_struct(&png, &info, &info_end);
        zip_fclose(file);
        zip_close(apk);
        throw "Error from libpng";
    }
    png_set_read_fn(png, file, png_zip_read);
    png_set_sig_bytes(png, 8);
    png_read_info(png, info);
    int bit_depth, color_type;
    unsigned int temp_width, temp_height;
    png_get_IHDR(png, info, &temp_width, &temp_height, &bit_depth,
                 &color_type, NULL, NULL, NULL);
    width = temp_width;
    height = temp_height;
    png_read_update_info(png, info);
    int row_bytes = png_get_rowbytes(png, info);
    png_byte* image_data = new png_byte[row_bytes * height];
    if (!image_data) {
        png_destroy_read_struct(&png, &info, &info_end);
        zip_fclose(file);
        zip_close(apk);
        throw "Could not allocate memory for PNG image data";
    }
    png_bytep* row_pointers = new png_bytep[height];
    if (!row_pointers) {
        png_destroy_read_struct(&png, &info, &info_end);
        delete[] image_data;
        zip_fclose(file);
        zip_close(apk);
        throw "Could not allocate memory for PNG row pointers";
    }
    for (int i = 0; i < height; i++)
        row_pointers[height - 1 - i] = image_data + i * row_bytes;
    png_read_image(png, row_pointers);
    GLuint texture;
    glGenTextures(1, &texture);
    glBindTexture(GL_TEXTURE_2D, texture);
    GLenum format = GL_RGBA;
    glTexImage2D(GL_TEXTURE_2D, 0, format, width, height, 0,
                 format, GL_UNSIGNED_BYTE, image_data);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
    glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
    png_destroy_read_struct(&png, &info, &info_end);
    delete[] image_data;
    delete[] row_pointers;
    zip_fclose(file);
    zip_close(apk);
    return texture;
}

Answer 1

经过多次尝试和错误后，我又开始疯狂地搜索，终于找到了一个代码示例，它完全符合我的要求。

秘诀基本上是这样创建OpenGL纹理:

int texture_width = next_power_of_two(width);
int texture_height = next_power_of_two(height);
GLuint texture;
glGenTextures(1, &texture);
glBindTexture(GL_TEXTURE_2D, texture);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameterf(GL_TEXTURE_2D, GL_TEXTURE_MAG_FILTER, GL_LINEAR);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_S, GL_CLAMP_TO_EDGE);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_WRAP_T, GL_CLAMP_TO_EDGE);
glPixelStorei(GL_UNPACK_ALIGNMENT, 1);
if (texture_width != width || texture_height != height) {
    glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width,
                 texture_height, 0, format, GL_UNSIGNED_BYTE, NULL);
    glTexSubImage2D(GL_TEXTURE_2D, 0, 0, 0, width, height, format,
                    GL_UNSIGNED_BYTE, image_data);
} else
    glTexImage2D(GL_TEXTURE_2D, 0, format, texture_width,
                 texture_height, 0, format, GL_UNSIGNED_BYTE,
                 image_data);

要以原始尺寸呈现图像，必须按以下方式计算x/y纹理坐标(而不仅仅使用1):

float x_coordinate = (width - 0.5f) / texture_width;
float y_coordinate = (height - 0.5f) / texture_height;

Answer 2

ES 1.1官方不支持没有扩展的NPOT纹理。它可能会意外地在某些实现中工作，但那只是"运气"。

通常的方法是将你的NPOT图像打包成更大的POT纹理，并相应地调整纹理坐标。你可以在运行时以编程方式完成("打包")，或者在工具链中完成(最可能是你的美术程序)。