Threejs中的环境遮挡

Posted 2023-02-27

【中文标题】Threejs中的环境遮挡

【英文标题】：Ambient occlusion in threejs

【发布时间】：2013-11-23 17:56:03

【问题描述】：

我刚刚使用 three.js (can be seen here) 将我的第一个布料模拟从 opengl 移植到 webgl。

事情是它看起来有点沉闷，我想添加（我希望我从我的计算机图形课程中没记错）环境光遮蔽，以使布料在与球碰撞时很好地着色。我对着色器的了解现在还处于非常低的水平，因此我非常感谢有关此主题的任何资源，这些资源对 Three.js 开发（教程、书名等）有帮助，因为谷歌对此一无所知。

也许一些提示如何应用环境光遮蔽？

多亏了 WestLangley，阴影得以修复！ 现在回到其他问题：关于threejs 的着色器的任何有用资源，或者只是一般的 hlsl？

【问题讨论】：

相关：***.com/questions/15350781/….

您不需要应用 AO，因为您使用的是 MeshLambertMaterial 并且场景中有灯光。您只需要在渲染循环中更新您的法线。例如，在threejs.org/examples/#webgl_animation_cloth 中查看它是如何完成的。

@WestLangley 哦，谢谢！事实上，在更新循环中，我已经设置了法线需要更新，但实际上并没有更新它们:)

alteredqualia.com/three/examples/webgl_postprocessing_ssao.html

【参考方案1】：

有几种方法可以产生环境光遮蔽：

全局照明 (GI) 光强度的全局低频近似（GI 快捷方式） 屏幕空间近似，通常称为 SSAO（屏幕空间环境光遮蔽）

这里有一些关于three.js中环境光遮蔽的讨论：

https://github.com/mrdoob/three.js/issues/6575 [实时全局/间接照明] https://github.com/mrdoob/three.js/issues/4434 [体素锥追踪全局光照] https://github.com/mrdoob/three.js/issues/5554 [更好的阴影贴图]

您很可能希望参考 three.js 中的这个示例来开始：

http://threejs.org/examples/#webgl_postprocessing_ssao