基于纹理像素为平面着色

Question

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

有谁知道我将如何检查纹理上的第一个像素，然后用它为平面上的第一个正方形 (1x1) 着色？

生成的纹理示例：（第一个像素故意为红色）

此代码使用坐标为 (0,0) 的 vec2 无法按预期工作。我假设 (0,0) 处的颜色是红色，但不是，它是绿色：

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

我想我缺少一些东西，或者不了解 texture2D，因为 (0,0) 似乎也不是结束像素。

如果有人可以帮助我，将不胜感激。谢谢。

---

编辑：
感谢cmets和答案！使用此代码，它现在可以工作了：

// 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);

仅当您明确访问纹理像素时；如果您要从顶点着色器（例如 (-1,-1) 到 (1,1) 正方形）进行插值和传递，并传递不同的 vec2((x+1)/2,(y+1) /2) 到片段着色器），这个“每个像素的中间”反映在你的变化值中。

但这可能只是 Ben 所说的 Y-up。 :)