Question

我使用three.js（设计示例here）在webgl应用程序中执行两个渲染过程：

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仍然没有显示（打包）深度？！

Answer 1

终于把它弄清楚了。计算纹理坐标的正确方法是：

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

查看工作示例here。

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

1 个答案: