突破图形界限：在圆形上完美贴图，让正方形图像焕发生机

前端

2023-10-30 02:47:22

无缝衔接：将正方形图片完美贴合圆形模型

在图形渲染领域，纹理贴图技术赋予了模型逼真的视觉效果。看似简单的图片贴图，却蕴含着不为人知的复杂性。本文将深入探索一项极具挑战性的任务：如何在不裁剪图片的情况下，将正方形图片完美贴合到圆形模型上。

映射的艺术

破解这一难题的关键在于跳脱固有思维，寻找巧妙的解决方案。实数区间 [0, 1] 和 [0, 2] 之间的元素可以建立一一映射关系。这种映射为我们提供了一种方法，将正方形图片中的像素与圆形模型上的对应点关联起来。

构建圆形纹理画布

为了实现这一映射，我们需要创建一个特殊的圆形纹理画布。这个纹理画布是一个圆形区域，其像素值与正方形图片的像素值一一对应。

UV 坐标的魅力

下一步，我们需要为圆形模型分配 UV 坐标。这些坐标定义了圆形纹理画布中每个像素在模型表面上的对应位置。对于圆形模型，我们可以使用极坐标系来定义 UV 坐标：

U 坐标： 对应极角，取值范围为 [0, 2]。
V 坐标： 对应半径，取值范围为 [0, 1]。

通过这种映射，我们成功地将正方形图片中的像素与圆形模型上的对应点建立了联系。

实现的步骤

1. 绘制圆形纹理画布

使用 OpenGL ES 中的 glGenTextures() 和 glBindTexture() 函数创建纹理对象。
加载正方形图片并使用 glTexImage2D() 将其像素数据绑定到纹理对象。
使用 glTexParameteri() 函数设置纹理过滤和环绕模式。

2. 分配 UV 坐标

为圆形模型分配 UV 坐标。
根据圆形模型的几何形状，计算每个顶点的 U 和 V 坐标。
将 UV 坐标存储在模型的顶点缓冲区中。

3. 绘制模型

在着色器中，使用 v_uv 变量获取顶点的 UV 坐标。
使用 texture2D() 函数从圆形纹理画布中采样纹理颜色。
根据纹理颜色渲染模型的片段。

代码示例

// 创建圆形纹理画布
GLuint textureId;
glGenTextures(1, &textureId);
glBindTexture(GL_TEXTURE_2D, textureId);
glTexImage2D(GL_TEXTURE_2D, 0, GL_RGBA, squareImageWidth, squareImageHeight, 0, GL_RGBA, GL_UNSIGNED_BYTE, squareImageData);
glTexParameteri(GL_TEXTURE_2D, GL_TEXTURE_MIN_FILTER, GL_LINEAR);
glTexParameteri(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);

// 分配 UV 坐标
const GLfloat uvCoordinates[] = {
    0.0f, 0.0f,
    1.0f, 0.0f,
    1.0f, 1.0f,
    0.0f, 1.0f,
};
glVertexAttribPointer(uvAttributeLocation, 2, GL_FLOAT, GL_FALSE, 0, uvCoordinates);
glEnableVertexAttribArray(uvAttributeLocation);

// 绘制模型
glUseProgram(shaderProgram);
glUniform1i(textureUniformLocation, 0);
glDrawArrays(GL_TRIANGLE_FAN, 0, vertexCount);