基于纹理像素着色平面

Question

使用着色器我正在尝试为平面着色，以便复制纹理上的像素。纹理为32x32像素，平面在空间坐标中的大小也为32x32。

有谁知道如何检查纹理上的第一个像素，然后用它来为平面上的第一个方块（1x1）着色？

生成的纹理示例:(第一个像素有意为红色）

使用带坐标（0,0）的vec2的代码不能正常工作。我假设（0,0）处的颜色是红色但不是，它是绿色的：

vec4 color = texture2D(texture, vec2(0, 0));

我猜有些东西我缺少，或者没有理解texture2D，因为（0,0）似乎也不是结束像素。

如果有人能帮助我，那将会非常受欢迎。感谢。

---

修改
感谢您的评论和解答！使用此代码，它现在正在运行：

// Flip the texture vertically
vec3 verpos2 = verpos.xyz * vec3(1.0, 1.0, -1.0);

// Calculate the pixel coordinates the fragment belongs to
float pixX = floor(verpos2.x - floor(verpos2.x / 32.0) * 32.0);
float pixZ = floor(verpos2.z - floor(verpos2.z / 32.0) * 32.0);

float texX = (pixX + 0.5) / 32.0;
float texZ = (pixZ + 0.5) / 32.0;

gl_FragColor = texture2D(texture, vec2(texX, texZ));

那就是说，我遇到了每个“块”边缘锯齿状线条的问题。在我看来，我的数学是关闭的，并且它对于应该是什么颜色感到困惑，因为当仅使用顶点颜色时我没有这个问题。任何人都可以看到我出错的地方或者如何做得更好？ 再次感谢！

Answer 1

是的......正如Ben Pious在评论中提到的那样，请记住WebGL在左下角显示0,0。

此外，要索引纹理，请尝试从每个像素的“中间”进行采样。在32x32源纹理上，要获得您想要的像素（0,0）：

texture2D(theSampler, vec2(0.5/32.0, 0.5/32.0));

或更一般地说，

texture2D(theSampler, vec2((xPixelIndex + 0.5) / width, (yPixelIndex + 0.5) / height);

仅当您明确访问纹理像素时才会这样;如果您正在从顶点着色器插入并传递值（例如a（-1，-1）到（1,1）square，并传递变化的vec2（（x + 1）/ 2，（y + 1）） / 2）到片段着色器），这个“每个像素的中间”反映在你的变化值中。

但这可能只是像Ben所说的Y-up。 ：）