给定 2D 裁剪空间中的坐标，我如何对背景纹理进行采样

Question

考虑与 gl.canvas 具有相同尺寸的纹理，在与剪辑相同的屏幕位置从纹理采样像素的正确方法是什么 -space 坐标（-1 ,-1 到 1,1)?目前我正在使用：

//u_screen = vec2 of canvas dimensions
//u_data = sampler2D of texture to sample
vec2 clip_coord = vec2(-0.25, -0.25);
vec2 tex_pos = (clip_coord / u_screen) + 0.5;
vec4 sample = texture2D(u_data, tex_pos);

这可行，但似乎没有正确考虑 canvas 大小，text_pos 似乎越接近 clip_coord 得到 -1 或 1.

Answer 1

下面假设纹理与canvas大小相同，并在整个canvas上渲染1:1，如问题中所述。

如果 clip_coord 是一个 2 维片段着色器输入，其中每个组件都在范围 [-1, 1] 内，那么您必须将坐标映射到范围 [0, 1]:

vec4 sample = texture2D(u_data, clip_coord*0.5+0.5);

注意，纹理坐标的范围是 0.0 到 1.0。

另一种可能性是使用gl_FragCoord。 gl_FragCoord 是片段着色器内置变量，包含片段的 window 相对坐标。

如果你使用WebGL 2.0 respectively GLSLES 3.00,
然后 gl_FragCoord.xy 可以用于二维纹理的纹理查找，通过 texelFetch，得到对应于片段的纹素：

vec4 sample = texelFetch(u_data, ivec2(gl_FragCoord.xy), 0);

注意，texelFetch 执行单个纹素的查找。您可以将坐标视为二维纹素索引。

如果你使用WebGL 1.0 respectively GLSL ES 1.00,
然后 gl_FragCoord.xy 可以除以纹理的（2 维）大小。结果可用于纹理查找，按 texture2D，以获取对应于片段的纹素：

vec4 sample = texture2D(u_data, gl_FragCoord.xy / u_size);

给定 2D 裁剪空间中的坐标，我如何对背景纹理进行采样

Given a coordinate in 2D clipspace, how can i sample the background texture

shader

glsl

webgl