javascript - 从深度重建片段位置

标签 javascript opengl-es glsl webgl

我想从我的深度重建我的 xyz。这样我就可以从实际片段中获得位置。 我已经拥有的:

  • 深度纹理
  • 函数深度到线性深度

这就是我目前计算我的值(value)的方式。 hfar 是远平面的高度,wfar 是它的宽度。 vec2 tc是一个ndc向量

float LinearizeDepth (vec2 coord)
{
        float z = texture2D(depthTexture, coord*ssaoScale).x;
        float d = (2.0 * near) / (far + near - z * (far - near));
        return d;
}

        float z = gl_FragCoord.z;

        vec3 ray = vec3(x, y, z);

        return ray;                      
}   

    vec2 screenPos = vec2(gl_FragCoord.x / 1024.0, gl_FragCoord.y / 512.0);
    vec3 origin = getViewRay(screenPos) * lineardepth; 

但来源似乎不对。 这是一个 js.fiddle

http://jsfiddle.net/Peters_Stuff/s24TT/

我试图通读 http://mynameismjp.wordpress.com/2009/03/10/reconstructing-position-from-depth/但这让我更加困惑。我不想要解决方案或其他东西,只是插入正确的方式:)

有什么建议吗?


编辑:

我实现了建议:

vec3 origin = vec3(vec4(screenPos, texture2D(depthTexture, screenPos).x, 1.0) * invPerspectiveMatrix).xyz;

所以原点应该是我的片段 View 空间位置。这看起来对吗?我不知道输出应该是什么样子


编辑 2:

这是一个 fiddle : http://jsfiddle.net/Peters_Stuff/8ddkt/

我正在渲染一个全屏四边形并在顶点着色器中生成纹理坐标和顶点位置并将它们传递给片段着色器。在那里我像那样计算我的起源

vec3 origin = vec3(vViewRay.xy * 0.5 + 0.5 , linearDepth);

vViewray 必须标准化为 [0..1] 当前结果


编辑 3:

我目前正在实现 ssao,正如您在上面着色器的其余部分中看到的那样。如果这是正确的,那么我不明白为什么当前的结果是这样的:http://www.imgbox.de/users/public/images/ahmqLHYbvm.jpg 着色器的 fiddle http://jsfiddle.net/Peters_Stuff/8ddkt/

我从噪声纹理中创建一个随机向量,使用 gramm schmidt 过程计算切线,生成双切线,生成变换矩阵。

然后遍历samplekernel,看sample是否被遮挡。

    float range_check = abs(origin.z - sampleDepth);
    if (range_check < radius && sampleDepth <= sample.z) {
        occlusion +=  1.0 ;
    }  

只有在以下情况下才应遮挡该点:

  • 从origin.z的距离减去samplepoint到surface的距离在半径内
  • 样本点的深度小于sample.z

最佳答案

(x,y,z) -> clip volume

projMat * xyz = clip_coord;

// - - - - - -

clip_coord.x = gl_FragCoord / screenWidth;
clip_coord.y = gl_FragCoord / screenHeight;
clip_coord.z = texture2D(depthMap, clip_coord.xy);

xyz = inverseProjMat * clip_coord;

编辑:

http://goo.gl/AG7UO

它是一次通过,但与两次通过完全相同,但因为它是一次通过,所以它没有重建,只是变化。在片段中,在 0.0k 之间切换 FragColor 的 z 组件。 K 实际上是一个深度分量。对于 0.0,它是绿红色,但是对于 k,它的颜色变化很大,所以您发布的图像可能不正确(不是您想要的)。

希望这对您有所帮助。

关于javascript - 从深度重建片段位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/17292397/

相关文章:

vector - 无法理解本示例中点积的使用?

opengl - 正好位于 GL_NEAREST 过滤的样本之间 : What Does It Return?

javascript - jstree:区分鼠标左键/中键单击

javascript - JQuery UI 可排序在移动设备上禁用滚动

javascript - 如何在 JSON 字符串中包含 Javascript 字符串构造函数?

android - 如何使用gles创建ios模糊效果

c++ - 写入和读取图像 OpenGL 的内存屏障问题

javascript - 如何卸载不可见的 HTML <img>?

linux - 通过 SSH 连接 OpenGL 时出现问题

iPhone OpenGL : Tiling textures