问题标签 [ssao]

For questions regarding programming in ECMAScript (JavaScript/JS) and its various dialects/implementations (excluding ActionScript). Note JavaScript is NOT the same as Java! Please include all relevant tags on your question; e.g., [node.js], [jquery], [json], [reactjs], [angular], [ember.js], [vue.js], [typescript], [svelte], etc.

0 投票
1 回答
251 浏览

opengl - OpenGL:将视图空间坐标投影到 NDC,结果似乎超出 [-1,1] 范围

我一直在尝试按照教程的说明实现屏幕空间环境光遮蔽。当我遇到它们时,我一直在解决我的实施问题,但是这个问题让我现在很难过。

我对方法的理解如下。环境遮挡因子由取自与给定片段法线对齐的半球内的样本确定。为了确定样本是否对环境遮挡因子有贡献,我必须根据视图空间深度纹理(包含在本文图片的左下角)检查样本在视图空间中的深度。所以我知道要从深度纹理中获取哪些坐标,我必须将样本的坐标从视图空间转换为标准化的设备坐标(在 [-1,1] 范围内),然后再转换为 [0 ,1],因此深度纹理​​有效地“映射”到视口。

下图是我的环境遮挡放置在我的场景上。我知道环境遮挡本身存在一个相当明显的问题(我假设半球的方向不正确),我会及时处理,但目前引起我好奇心的是遮挡的外观被“缩小” ',这表明我从视图空间样本坐标移动到纹理坐标的操作是不正确的。

在此处输入图像描述

由于我缺乏稳定的着色器调试器,我可以做的调试仅限于我可以渲染到屏幕上的内容。下一个图像是使用以下代码创建的,其中ndcs是给定样本的标准化设备坐标:

在此处输入图像描述

我希望图像完全是白色的(或者更确切地说,我使用这个着色器的位),但是它似乎表明我正在创建的 NDC 超出了 [-1,1] 范围,我相信一定是不正确的。它也不是屏幕的一致区域,如下图所示,相机非常靠近表面:

在此处输入图像描述

我以前从来没有使用过这个程序来获得 NDC,所以我确信我的逻辑一定是有问题的。我已经下载了教程提供的演示代码,但我看不出我的代码有什么不同。我也在网上搜索过(包括在这个网站上),我似乎无法找到与我症状完全相同的人。

这是我的着色器中的相关代码:

垂直着色器:

片段着色器:

我已经孤立地查看了每个元素,但看不到它们的问题。

  • 我已经将片段自己的视图空间位置替换为投影(而不是样本的视图空间位置),我得到了相同的结果。
  • 投影矩阵是我用来变换模型顶点的透视矩阵(我已经在我的顶点着色器中构建了 MVP 矩阵,以确保投影矩阵能够完整地到达着色器程序,并且确实如此)。
  • 投影操作本身 - 这不是我以前做过的事情,但我已经阅读了网上的文章和有投影问题的人的问题,我看不出我做错了什么。

因此,我只能得出结论,我对透视投影的理解一定有一些基本的东西是有缺陷的,但我就是不知道是什么。如果你们中的任何人可以阐明问题或进一步的途径让我检查,我将不胜感激。如果我遗漏了任何有用的信息或我可以澄清的任何信息,请告诉我。

0 投票
1 回答
634 浏览

java - LWJGL 如何渲染 SSAO

我目前在 LWJGL 中有一个工作场景,可以渲染一堆体素。我正在使用带有几何图形的所有顶点、法线和颜色的 VBO,以及屏幕上的 glDrawArrays()。

我已经在谷歌上搜索了如何使用 SSAO 或屏幕空间环境光遮蔽来渲染我的场景。我发现的几乎所有结果都只是详细说明了我需要的 GLSL 代码,但完全忽略了所需的 lwjgl 代码。

这是我为 SSAO 找到的片段着色器之一(我不记得作者是谁,或者发布它的人是否甚至是原作者)

我的问题是,我必须在我的 LWJGL 空间中做什么才能将变量传递给

如果texture0是 2d 纹理格式的深度缓冲区,我将如何创建它?

我是否需要将我的几何 VBO 渲染到屏幕上,然后获取深度缓冲区纹理?

什么是texture1?我的程序只使用颜色而不是纹理,所以我不知道那可能是什么。

0 投票
0 回答
684 浏览

c++ - SSAO 没有显示正确的结果,大部分没有可见的遮挡

我正在按照 John Chapman 的教程 ( http://john-chapman-graphics.blogspot.nl/2013/01/ssao-tutorial.html ) 在延迟渲染器中实现 SSAO。SSAO 着色器的输入缓冲区是:

  • 以线性化深度作为 w 分量的世界空间位置。
  • 世界空间法线向量
  • 噪声 4x4 纹理

我将首先列出完整的着色器,然后简要介绍这些步骤:

然而结果并不令人满意。遮挡缓冲区大部分都是白色的,不显示任何遮挡。但是,如果我非常靠近一个物体,我会看到一些奇怪的类似噪音的结果,如下所示:

奇怪的 SSAO 视觉结果

这显然是不正确的。我已经进行了相当多的调试,并相信所有相关变量都正确传递(它们都可视化为颜色)。我在视图空间中进行计算。

我将简要介绍我采取的步骤(和选择),以防你们中的任何人认为其中一个步骤出现问题。

视图空间位置/法线 John Chapman 使用视图光线和线性化深度值检索视图空间位置。由于我使用的延迟渲染器已经具有每个片段的世界空间位置,因此我只需将它们与视图矩阵相乘以将它们放到视图空间中。

我对法线向量采用类似的方法。我从缓冲区纹理中获取世界空间法线向量,将它们转换为 [-1,1] 范围,并将它们与视图矩阵的 transpose(inverse(mat3(..))) 相乘。

视图空间位置和法线可视化如下:

视图空间和法线可视化 SSAO

这对我来说是正确的。

围绕法线定向半球 创建tbn矩阵的步骤与 John Chapman 的教程中描述的相同。我创建噪声纹理如下:

我可以在片段着色器中可视化噪声,这样似乎可以工作。

样本深度 我将所有样本从切线转换到视图空间(样本在 xy 轴上的 [-1,1] 和 z 轴上的 [0,1] 之间是随机的,并将它们转换为片段的当前视图空间位置(原点)。

然后我从线性化深度缓冲区中采样(当靠近一个物体时,我在下面看到它):

深度缓冲区线性化

最后将采样的深度值与当前片段的深度值进行比较并添加遮挡值。请注意,我不执行范围检查,因为我不认为这是导致这种行为的原因,我宁愿现在尽可能地减少它。

我不知道是什么导致了这种行为。我相信它在采样深度值的某个地方。据我所知,我在正确的坐标系中工作,线性化的深度值也在视图空间中,并且所有变量的设置都有些正确。

0 投票
0 回答
191 浏览

java - SSAO 着色器未按预期工作

我正在用 LWJGL 制作体素游戏,并想出了如何实现 SSAO 着色器,但它看起来也不是我所期望的。从远处看块很好,我可以看到块的渐变阴影轮廓。但近距离看,渐变阴影消失了,只剩下块的颜色(加上另一个简单的着色器,我为每个块的侧面赋予不同的阴影)。

这是从不同距离看游戏的样子: https://github.com/ninthworld/GreedyMeshing/raw/master/screenshot1.png https://github.com/ninthworld/GreedyMeshing/raw/master/screenshot2.png

这是我期望的样子: https ://github.com/ninthworld/GreedyMeshing/raw/master/screenshot3.png

这就是我的 SSAO.frag 着色器代码的样子:

两个采样器分别接收我从 GL_RGBA 和 GL_DEPTH_COMPONENT 创建的纹理,然后 gl_FragColor 绘制到占据屏幕的 2D 平面。

如果查看更多代码会有所帮助,这里是 github 页面https://github.com/ninthworld/GreedyMeshing

0 投票
1 回答
2006 浏览

c++ - OpenGL OGLDev SSAO 教程实现片段着色器产生噪声

任务背景

我试图在OGLDev Tutorial 45之后实现SSAO,该教程基于 John Chapman的教程。OGLDev 教程使用一种高度简化的方法,该方法在片段位置周围的半径内随机采样点,并根据有多少采样点的深度大于存储在该位置的实际表面深度(位置越多)来提高 AO 因子片段周围位于其前面,遮挡越大)。

我使用的“引擎”没有 OGLDev 那样的模块化延迟着色,但基本上它首先将整个屏幕颜色渲染到带有纹理附件和深度渲染缓冲区附件的帧缓冲区。为了比较深度,片段视图空间位置被渲染到另一个带有纹理附件的帧缓冲区。然后这些纹理由 SSAO 着色器进行后处理,并将结果绘制到屏幕填充四边形。两种纹理都可以很好地绘制到四边形,着色器输入制服似乎也可以,所以这就是为什么我没有包含任何引擎代码的原因。

片段着色器几乎相同,如下所示。我已经包含了一些符合我个人理解的评论。

什么有效?

  • 片段颜色纹理是正确的。
  • 纹理坐标是我们绘制并转换为 [0, 1] 的屏幕填充四边形的坐标。它们产生等效的结果vec2 texCoord = gl_FragCoord.xy / textureSize(screenColorTexture, 0);
  • (透视)投影矩阵是相机使用的矩阵,它适用于该目的。无论如何,这似乎不是问题。
  • 正如预期的那样,随机样本向量分量在 [-1, 1] 范围内。
  • 片段视图空间位置纹理似乎没问题:

片段视图空间位置

怎么了?

当我将片段着色器底部的 AO 混合因子设置为 0 时,它会平稳运行到 fps 上限(即使仍在执行计算,至少我猜编译器不会优化它:D)。但是当 AO 混合在一起时,每帧绘制最多需要 80 毫秒(随着时间的推移变得越来越慢,好像缓冲区被填满了一样),结果非常有趣和令人困惑:

ssao噪音问题

显然映射看起来很遥远,闪烁的噪声看起来非常随机,就好像它直接对应于随机样本向量。我发现最有趣的是,绘制时间仅在添加 AO 因子时大幅增加,而不是由于遮挡计算。绘制缓冲区有问题吗?

0 投票
1 回答
352 浏览

opengl - SSAO 在 z = 0 和距离处不正确

所以我尝试实现 SSAO,但它没有按预期工作。它似乎在位置 z=0(世界空间)处分裂,在位置 z=0 处有一条白线。此外,那里的遮挡看起来也不正确。

在此处输入图像描述

再加上更远的距离,所以当移动相机时,遮挡变得更加奇怪 在此处输入图像描述

我的着色器渲染几何体(实例化):

顶点:

分段:

在几何通道之后,我应用带有法线和深度信息的 SSAO 通道。

这是我的噪声纹理: 在此处输入图像描述

我使用硬件深度缓冲区。我计算世界空间中的一切。

这是片段着色器:

0 投票
2 回答
1269 浏览

opengl - 使用 OpenGL 和 GLSL 的 SSAO 算法的奇怪性能行为

我正在使用Oriented-Hemisphere渲染技术研究 SSAO(屏幕空间环境遮挡)算法。

一)算法

该算法需要作为输入:

  • 1 个包含预计算样本的数组(在主循环之前加载 -> 在我的示例中,我使用了64 个根据 z 轴定向的样本)。
  • 1 个包含归一化旋转矢量的噪声纹理,也根据 z 轴定向(此纹理生成一次)。
  • 来自 GBuffer 的 2 个纹理:“PositionSampler”和“NormalSampler”,包含视图空间中的位置和法线向量。

这是我使用的片段着色器源代码:

这是结果(没有模糊渲染通道):

在此处输入图像描述

直到这里一切似乎都是正确的。

二)表现

我注意到NSight Debugger关于性能的一个非常奇怪的行为:

如果我将相机越来越靠近巨龙,表演就会受到极大的影响。

但是,在我看来,情况并非如此,因为 SSAO 算法适用于屏幕空间,并且不依赖于例如龙的基元数量。

这是 3 个具有 3 个不同相机位置的屏幕截图(在这 3 个案例中,所有 1024*768 像素着色器都使用相同的算法执行):

a) GPU 空闲:40%(受影响的像素:100%)

在此处输入图像描述

b) GPU 空闲:25%(受影响的像素:100%)

在此处输入图像描述

c) GPU 空闲:2%!(受影响的像素:100%)

在此处输入图像描述

我的渲染引擎在我的示例中使用了 2 个渲染通道:

  • Material Pass(填充位置普通采样器)
  • 环境通道(填充 SSAO 纹理)

我认为问题来自于添加这两个通道的执行,但事实并非如此,因为我在客户端代码中添加了一个条件,即如果相机静止,则不计算材质通道。因此,当我拍摄上面这 3 张照片时,只执行了 Ambient Pass。因此,这种缺乏性能与材料传递无关。我可以给你的另一个论点是,如果我删除龙网格(只有飞机的场景),结果是一样的:我的相机越靠近飞机,性能越差!

对我来说,这种行为是不合逻辑的!就像我上面说的,在这 3 种情况下,所有的像素着色器都是应用完全相同的像素着色器代码执行的!

现在,如果我直接在片段着色器中更改一小段代码,我注意到另一个奇怪的行为:

如果我替换该行:

按行:

性能不足消失了!

意思是如果SSAO代码执行正确(我尝试在执行过程中放置​​一些断点来检查)并且我最后没有使用这个OcclusionFactor来填充最终输出的颜色,所以不乏性能!

我认为我们可以得出结论,问题不在于“FragColor = vec4(OcclusionFactor);”行之前的着色器代码。... 我认为。

你怎么能解释这样的行为?

我在客户端代码和片段着色器代码中尝试了很多代码组合,但我找不到这个问题的解决方案!我真的迷路了。

非常感谢您的帮助!

0 投票
1 回答
1894 浏览

javascript - Three.js 后期处理:FXAA 在启用 SSAO 的情况下不起作用

在这个简单的测试场景中,我需要将 SSAO 和 FXAA 效果组合在一起,但我无法让它工作。启用 SSAO 时,如果我还启用 FXAA,渲染会变黑。

在小提琴中,如果您取消注释,composer.addPass(FXAA_effect);您将看到问题。我检查了如何一次添加这些效果的不同示例,它们单独工作,但我无法将它们组合在一起。

我错过了什么?

JSFiddle:http: //jsfiddle.net/ur3tpwag/

那是代码:

0 投票
1 回答
3138 浏览

three.js - ThreeJS SSAO 和 SSAA

我想将 SSAO-Shader(屏幕空间环境光遮蔽)集成到我的抗锯齿渲染堆栈(超级采样抗锯齿)中。AA 是高质量渲染所必需的,我的 gpu 提供的默认抗锯齿并不总是足够的。现在我已经将 SSAO 集成到通常的渲染过程中,但我的新目标是将这两种技术结合起来。

为此,我设置了一个小提琴。第一个 EffectComposer 将场景渲染到具有画布分辨率两倍的 renderTarget 上。由此,我想将 depthTarget 用于 SSAO。最后一步是将渲染的图像绘制到与画布大小相同的平面上,这会导致下采样,因此我们具有抗锯齿效果。

链接到小提琴:SSAO+SSAA

堆栈是这样设置的:

渲染函数是这样设置的:

我没有发现类似的情况,所以我的问题是:如何设置整个堆栈,以便使用ssao。

问候,托马斯

0 投票
0 回答
273 浏览

c++ - SSAO Opengl 问题

所以我已经从这个教程中实现了 SSAO = Good Tutorial Here

我的 SSAO 着色器

我认为只有一个问题。使用着色器时,我得到奇怪的灰色线条,我真的不知道我现在应该做什么。 这是 我测试不同值等问题的图片。但我从来没有完全正确。有人有什么想法吗?