javascript - threejs 中的环境遮挡

Question

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

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

也许有一些关于如何应用环境遮挡的提示？

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

Answer 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