如何使用 Three.js SSAO 着色器?

2023-12-08

我正在尝试使用 SSAO 后处理着色器渲染场景。没有任何错误,但我看不出使用和不使用 SSAO 通道渲染的场景有任何区别。我像这样初始化渲染器:

// Create WebGL Renderer
var renderParameters = { antialias: false, alpha: false, clearColor: 0xFFFFFF };
renderer = new THREE.WebGLRenderer(renderParameters);
renderer.autoClear = false;
renderer.setSize(viewportWidth, viewportHeight);

// Create render targets
renderTargetParametersRGB = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBFormat };
renderTargetParametersRGBA = { minFilter: THREE.LinearFilter, magFilter: THREE.LinearFilter, format: THREE.RGBAFormat };
depthTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGBA);
colorTarget = new THREE.WebGLRenderTarget(width, height, renderTargetParametersRGB);

// The shader pass to draw the scene
var renderScenePass = new THREE.RenderPass(scene, camera);

// Copy to screen render pass
var copyToScreenPass = new THREE.ShaderPass(THREE.CopyShader);
copyToScreenPass.renderToScreen = true;

// SSAO render pass
effectSSAO = new THREE.ShaderPass(THREE.SSAOShader);
effectSSAO.uniforms['tDepth'].texture = depthTarget;
effectSSAO.uniforms['size'].value.set(width, height);
effectSSAO.uniforms['cameraNear'].value = camera.near; // 1
effectSSAO.uniforms['cameraFar'].value = camera.far;  // 1000
//effectSSAO.uniforms.onlyAO.value = 1;

// Setup post processing chain
composer = new THREE.EffectComposer(renderer, colorTarget);
composer.addPass(effectSSAO);
composer.addPass(copyToScreenPass); 

// Depth pass
depthPassPlugin = new THREE.DepthPassPlugin();
depthPassPlugin.renderTarget = depthTarget;
renderer.addPrePlugin(depthPassPlugin);

在渲染函数中,我像这样渲染场景:

requestAnimationFrame(render);
depthPassPlugin.enabled = true;
renderer.render(scene, camera, composer.renderTarget2, true);
depthPassPlugin.enabled = false;
composer.render(0.1);

正如我之前所说,一切似乎都运行良好,但屏幕上看不到 AO 效果。也许我只是使用了错误的参数值?我已经确保通过将深度目标渲染到场景来更新深度通道。如果我打开effectSSAO.uniforms.onlyAO.value,我会得到实际场景(包括纹理)的相当“平坦”的棕色渲染,但仍然没有AO。有人可以给我建议下一步该尝试什么吗?


有一个使用当前版本的 Three.js (r56) 的示例,位于https://twitter.com/mrdoob/status/300919764262477824

这是代码的直接链接:http://goo.gl/RzfwH

感谢 Altered Qualia 和 MrDoob 提供的示例代码和 Three.js 库!

本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系:hwhale#tublm.com(使用前将#替换为@)

如何使用 Three.js SSAO 着色器? 的相关文章

  • 在 Fabric.js 中真正旋转等边三角形的中心

    使用 Fabric js 我无法真正围绕其中心点旋转三角形 或者至少我认为应该是中心点 我创建了一个jsFiddle http jsfiddle net UW8Be 这表明 三角形很简单 我用了originX center 原点Y 也是如此
  • 如何在 Three.js 中从三角面获取多边形?

    我在网上查了一下是否有人遇到同样的问题 我正在使用 Three js 我有一个 3DObject 其中可能包含孔 面是三角形的 假设我想从上面看到它 我的目标是获得一个代表顶面周长的多边形 这对我来说意味着不再有三角面 而只有 1 个多边形
  • 如何沿着简单的路径移动相机

    如何沿着简单的路径 由顶点 点数组创建 移动相机 我需要自动移动它 而不是像第一人称射击游戏那样通过键盘 鼠标事件来移动它 找了这个例子 http trijs org examples webgl geometry extrude spli
  • 星系模拟:更改点的颜色并在鼠标悬停时显示文本

    我正在尝试创建模拟 https riteshsingh github io galaxies 4673 个最近星系的位置 星系是点 我想为鼠标悬停时的点着色并加载星系的名称 我花了很多天试图实现它 我可以更改颜色以及进行基本的光线投射 但是
  • 将球体 a 旋转到自身的 b 点

    我试图弄清楚如何将球体从 A 点旋转到 B 点 我找到了一些Unity3d代码 Quaternion rot Quaternion FromToRotation pointA pointB sphere transform rotation
  • 如何在 Ubuntu 的 headless chrome 中启用 WebGL?

    如何在 Ubuntu 14 的 headless chrome 中启用 webgl 或安装 webgl 我尝试安装 libosmesa6 但这没有帮助 有人可以指出我正确的方向吗 我想使用 webgl 来处理无头 chrome 和 sele
  • 在 Three.js 中获取 Object3D 的大小

    我的场景中有这个 3D 对象 var icon new THREE Object3D var iconTexture THREE ImageUtils loadTexture images icon png iconMaterial new
  • 使用 ThreeJS 获取球体纹理上的点击位置

    目前 我有一个带有纹理的球体 它绕 y 轴旋转 我还有在 3D 空间中单击的位置 以及球体上的旋转位置 我认为 目标 获取纹理上的位置 例如 我想获取我点击的图像的哪个方块 参见示例球体和下图 在实践中 我不会使用此图像 但我觉得这将是一个
  • WebGL2 FBO 深度附件值

    我只是尝试使用 WebGL2 渲染场景的深度值 如下所示 Texture depthTexture gl createTexture gl bindTexture gl TEXTURE 2D depthTexture gl texImage
  • VS CODE 中的 WEBGL 自动完成

    我有一个学校项目 我需要使用 WEBGL 但是在没有自动补全的情况下编写所有代码是相当困难的 我没有找到合适的扩展名 你有想法吗 为了让 Visual Studio 代码能够自动完成 它需要知道变量的类型 例如 如果你有这个 const g
  • Three.js :face4 生成三角形而不是正方形

    我正在尝试使用 tree js 自定义几何图形生成一个正方形 但是这段代码 var cubeGeo new THREE Geometry cubeGeo vertices push new THREE Vector3 25 25 25 cu
  • 三-mtl-loader 错误:THREE.MeshPhongMaterial:.shading 已被删除 -> 对象不可见

    昨天我问了这个问题 未捕获的类型错误 THREE MTLLoader 不是构造函数 2 0 https stackoverflow com questions 47741644 uncaught typeerror three mtlloa
  • 渲染 ThreeJS 应用程序第一帧时的性能问题

    目前 当我渲染以下内容时 我的 ThreeJS 应用程序的性能受到很大影响第一帧 它会导致 Edge 和 IE 11 浏览器冻结 5 秒 并弹出窗口指示 此窗口没有响应 这可能会吓到我的用户 使用 Chrome 的性能分析器 问题似乎来自几
  • CSS3DObject 始终位于 WebGL Mesh 前面

    我正在混合CSS3D Renderer with WebGL Renderer to add HTML3D 空间中的元素WebGL场景 这CSS3DObject在前面WebGL网格即使WebGL Renderer具有较高的 z index
  • ThreeJS 中阴影的奇怪行为

    所以我有一个 ThreeJS 场景 并且添加了一些球体 多材质 我还添加了定向光 this light new THREE DirectionalLight 0xFFFFFF 1 this light position set 2 10 2
  • 如何使用键盘和鼠标控制相机 - Three.js

    我在 WEB GL 中有一个带有 Three js 的 3D 环境 并且我曾经使用 Orbitcontrols js http codepen io nireno pen cAoGI http codepen io nireno pen c
  • 如何清除WebGL中的矩形区域?

    WebGL 有一个clear清除整个表面的方法 清除表面的特定矩形的最佳方法是什么 例如 我想将一个从 50 50 开始的 100x100 像素框设置为全零 ARGB 0 0 0 0 我现在能想到的就是用一个写入零的片段着色器绘制一个四边形
  • 在 Chrome 18 中检测 SwiftShader WebGL 渲染器

    我有一个 2D HTML5 游戏引擎 www scirra com http www scirra com 并且确实想检测 WebGL 是否将使用 Chrome 18 的 Swiftshader 软件渲染器进行渲染 如果是这样我们会much
  • 如何在 Three.js 中进入全屏?

    我已经尝试了数十种不同的方法几个小时 但没有一个有效 如下所示 document body addEventListener keydown function THREEx FullScreen request false 如何让Three
  • 如何在 Three.js 中重新调整三角形面的方向

    用更好的例子进行编辑 我使用 Three js 来显示 MRI 胃图像的外壳 外壳是从 vtk 格式的外部文件加载的 这是一个演示 http www menne biomed de uni 3d alphahull html http ww

随机推荐

  • 不规则间隔的热图

    我想根据下面的矩阵和边界创建一个热图 然后绘制数据 x1 x2 以查看属于各个类别的点 我能做的最好的事情就是使用seaborn 但是由于两个轴上的类间隔不均匀 因此很难读取两个轴上对应于点的值 有没有办法 使用seaborn或任何其他库
  • 从两个或多个现有表创建新表 (MySQL)

    问题 是否可以在 mySQL 中从两个或多个现有表创建一个表 Details 我可以创建一个像这样的表吗 CREATE TABLE IF NOT EXISTS USERNAME AGE INT NOT NULL CREATE TABLE I
  • 在 C# 中编译邮件的 HTML 正文

    我使用以下代码供用户向我的电子邮件发送报价 using System Net Mail MailMessage mail new MailMessage mail From new MailAddress Email Text mail T
  • 在无头模式下使用 Firefox 68.9.0esr 以及 GeckoDriver Selenium 和 Python 时出现 504 网关超时错误

    我用硒制作了一个容器图像 我用了一个ubi image来自 RedHat 作为基础镜像 我安装了以下版本的 geckodriver 和 Mozilla Firefox 壁虎驱动程序 0 26 0 e9783a644016 2019 10 1
  • 在 Windows 8.1 中安装 virtualenvwrapper-powershell,导入模块失败

    我正在尝试遵循指南here 我被困在Import Module virtualenvwrapper PowerShell 不断给我错误 import module 指定的模块 virtualenvwrapper 不是 已加载 因为在任何模块
  • 未找到 AWS ec2 winreg

    我正在尝试从亚马逊 EC2 大型实例运行 python 应用程序 然而 它在 scipy 中抱怨 因为它找不到名为 winreg 的东西 我不知道如何重新配置 它 所以它不再是问题 python2 app py Running on htt
  • Chrome 扩展如何在页面底部添加浮动栏?

    我正在创建一个需要注入浮动元素的 chrome 扩展 即position fixed 在页面底部 我的要求是 我需要从内容脚本访问其中的元素 这是因为我将事件附加到按钮 以便用户可以从浮动栏在当前选项卡上执行操作 我希望它的样式保持独立于当
  • 显示斯坦福 NER 置信度分数

    我使用斯坦福 NER CRFClassifier 从新闻文章中提取命名实体 为了实现主动学习 我想知道每个标记实体的类的置信度分数是多少 显示示例 地点 0 20 人员 0 10 组织 0 60 其他 0 10 这是我从文本中提取命名实体的
  • 启动 ASP.NET 表单身份验证

    我开始学习 ASP NET 表单身份验证 并且正在寻找一篇好文章来帮助我入门 我之前听说 ASP NET 表单身份验证使用大量数据库表 前面带有aspnet 但是我发现的任何例子都没有显示这一点 例如我认为有一个aspnet users t
  • 创建数据框时如何解决 scala.MatchError

    我有一个具有复杂结构行的文本文件 我正在使用客户转换器 它将给定的字符串 行 转换为 Pojo 类 countryInfo 转换后 我正在构建 DF POJO 类有一个字段 它是自定义类型列表 GlobalizedPlayTimeWindo
  • 调用unique_ptr子类继承的模板构造函数

    这不是关于模板构造函数甚至调用继承的模板构造函数的问题的重复 它具体是关于在 unique ptr 模板的类实例 的子类中调用继承的构造函数 问题 为了使代码更容易理解 我使用using在这个例子中 using B std unique p
  • 使用XSLT输出多个文件

    我正在尝试获取一个我发现的使用 XSLT 2 0 输出多个文件的示例 将 Saxon B 9 7 0 1 与 Java 1 6 一起使用时 出现以下错误 C Documents and Settings Administrator Desk
  • 以字节数组为键的ReduceByKey

    我想使用 RDD 对Tuple2
  • Tensorflow 将数据从 tfrecords 正确读取到小批量中

    我正在尝试将数据从 csv 转换为 tfrecords 然后以小批量读取它并执行一个简单的 MLP 但我遇到了一些我无法弄清楚的错误 运行时错误 尝试使用关闭的会话 其次是 TypeError 提要的值不能是 tf Tensor 对象 可接
  • Jenkins 使用 groovy 为作业添加权限

    我需要向特定用户添加一些权限 读取 构建 工作空间 取消等 到很多作业 我想知道是否有一种方法可以使用 groovy 脚本而不是手动执行此操作 我尝试了上述解决方案 他们nearly工作了 我的所有尝试都会导致当前内存中的权限反映新设置 但
  • 如何将 ORMLite 与抽象类一起使用?

    我有一个基类Peripheral 课程Sensor and Master是的扩展Peripheral 我需要 ORMlite 来实例化之前保存的 Peripheral 对象 显然任何实例化的尝试Peripheral反思将导致ClassIns
  • Pentaho Spoon - 根据字段内容输出到多个文件

    我一直在尝试根据特定字段的值将 pentaho 转换的结果拆分为多个文件 但没有任何运气 例如 包含以下内容的结果集 姓氏 名字 国家 地区 奥巴马 巴拉克 美国 卡梅伦 大卫 英国 布莱尔 托尼 英国 将导致创建 2 个输出文件 USA
  • 如何使用 HTTPS 获取网站内容

    使用 ssl HTTPs 的网站示例 https www eb2a com 1 我尝试使用 file get contents 获取其内容 但不起作用并且给出错误 ex 2 我尝试使用 fopen 但不起作用并且给出错误 ex 3 我尝试使
  • SQL:动态变量名称

    我试图在存储过程中设置名称是动态的变量 DECLARE var01 varchar 50 DECLARE var02 varchar 50 DECLARE var30 varchar 50 DECLARE sql varchar max D
  • 如何使用 Three.js SSAO 着色器?

    我正在尝试使用 SSAO 后处理着色器渲染场景 没有任何错误 但我看不出使用和不使用 SSAO 通道渲染的场景有任何区别 我像这样初始化渲染器 Create WebGL Renderer var renderParameters antia