如何从之前的渲染过程中获取全屏纹理的全屏纹理坐标？答案

【问题标题】：How to get fullscreen texture coordinates for a fullscreen texture from a previous rendering pass?如何从之前的渲染过程中获取全屏纹理的全屏纹理坐标？
【发布时间】：2013-12-29 06:47:55
【问题描述】：

我在 webgl 应用程序中使用 three.js 进行了两次渲染传递（人为的示例 here）：

renderer.render(depthScene, camera, depthTarget);
renderer.render(scene, camera);

第一个渲染通道是渲染目标depthTarget，我想在第二个渲染通道中作为纹理统一访问它：

uniform sampler2D tDepth;

float unpack_depth( const in vec4 rgba_depth ) { ... }

void main() {
    vec2 screenTexCoord = vec2( 1.0, 1.0 );
    float depth = 1.0 - unpack_depth( texture2D( tDepth, screenTexCoord ) );
    gl_FragColor = vec4( vec3( depth ), 1.0 );
}

我的问题是如何获得screenTexCoord 的值？不是gl_FragCoord.xy。

为了避免可能的误解：我不想将第一遍的纹理渲染到四边形。我想在第二遍渲染几何时使用第一遍的纹理。

编辑：

根据 WebGL 规范 gl_FragCoord 包含 窗口坐标，它们是由视口缩放的标准化设备坐标 (ndc)。 ndc 在 [-1, 1] 范围内，因此以下内容应在 [0, 1] 范围内产生坐标以进行纹理查找：

vec2 ndcXY = gl_FragCoord.xy / vec2( viewWidth, viewHeight );
vec2 screenTexCoord = (ndcXY+1.0)/2.0;

但是在某个地方我一定是错的，因为 updated example 仍然没有显示（打包的）深度？！

【问题讨论】：

标签： three.js webgl

【解决方案1】：

终于自己搞定了。计算纹理坐标的正确方法是：

vec2 screenTexCoord = gl_FragCoord.xy / vec2( viewWidth, viewHeight );

查看工作示例here。

【讨论】：