2

使用着色器我正在尝试为平面着色，以便复制纹理上的像素。纹理为 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));

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

在此处输入图像描述

4

1 回答 1

2

是的...正如 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）到片段着色器），这个“每个像素的中间”反映在你的变化值中。

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

于 2013-10-24T22:57:02.620 回答