使用像素坐標的 OpenGL 子圖像

Question

我已經完成了 learnopengl.com 上的突破系列中的幾個教程，所以我有一個非常簡單的 2D 渲染器。 不過，我想向它添加一個子圖像功能，在這里我可以為一種“源矩形”指定一個 vec4，所以如果 vec4 是(10, 10, 32, 32) ，它只會在 10 處呈現一個矩形, 10 寬度和高度為 32，有點像 SDL 渲染器的工作方式。

渲染器的設置方式是所有精靈都使用一個四邊形 VAO，其中包含紋理坐標。 最初，我雖然我可以為每個精靈使用一個 VAO 數組，每個精靈都有不同的紋理坐標，但我希望能夠在繪制精靈之前更改源矩形，以使動畫之類的事情更容易......我的第二個想法是將一個單獨的統一 vec4 傳遞到源矩形的片段着色器中，但是我如何僅在像素坐標中渲染該部分？

Answer 1

使用原始類型GL_TRIANGLE_STRIP或GL_TRIANGLE_FAN來渲染四邊形。 使用積分一維頂點坐標而不是浮點頂點坐標。 頂點坐標是四角的索引。 對於GL_TRIANGLE_FAN它們是：

vertex 1: 0
vertex 2: 1
vertex 3: 2
vertex 4: 3

使用vec4類型的Uniform變量在頂點着色器中設置矩形定義(10, 10, 32, 32) 。 有了這些信息，您就可以計算頂點着色器中的頂點坐標：

in int cornerIndex;
uniform vec4 rectangle;

void main()
{
    vec2 vertexArray[4] = 
        vec2[4](rectangle.xy, rectangle.zy, rectangle.zw, rectangle.xw);
    vec2 vertex = vertexArray[cornerIndex];

    // [...]
}

頂點着色器提供內置輸入gl_VertexID ，它指定當前正在處理的頂點的索引。 在這種情況下，可以使用此變量代替cornerIndex 。 請注意，頂點着色器沒有必要具有任何顯式輸入。

Answer 2

我最終在頂點着色器中做到了這一點。 我將vec4作為uniform 傳遞給頂點着色器，以及圖像的大小，並使用以下計算：

// convert pixel coordinates to vertex coordinates
float widthPixel = 1.0f / u_imageSize.x;
float heightPixel = 1.0f / u_imageSize.y;

float startX = u_sourceRect.x, startY = u_sourceRect.y, width = u_sourceRect.z, height = u_sourceRect.w;
v_texCoords = vec2(widthPixel * startX + width * widthPixel * texPos.x, heightPixel * startY + height * heightPixel * texPos.y);

v_texCoords 是片段着色器用來映射紋理的變量。