javascript Threejs中的环境遮挡
声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow
原文地址: http://stackoverflow.com/questions/19914697/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Ambient occlusion in threejs
提问by mjanisz1
I've just finished porting of my first cloth simulation from opengl to webgl using three.js (can be seen here).
我刚刚使用three.js (可以在这里看到)完成了我的第一个布料模拟从opengl到webgl的移植。
The thing is it looks a bit dull, and I want to add (as i hope i remember correctly from my computer graphics classes) ambient occlusion, to make the cloth nicely shaded on collision with ball. My knowledge about shaders is now on very low level, so I'd be very thankful for any resources on this topic helpful with three.js development (tutorials, book titles etc), because googles doesn't know anything about it.
问题是它看起来有点沉闷,我想添加(因为我希望我从我的计算机图形类中没有记错)环境遮挡,使布料在与球碰撞时很好地着色。我对着色器的了解现在处于非常低的水平,因此我非常感谢有关该主题的任何有助于three.js 开发的资源(教程、书名等),因为谷歌对此一无所知。
Maybe some hints how to apply ambient occlusion?
也许有一些提示如何应用环境光遮挡?
So the shading is fixed thanks to WestLangley! Now back to the other questions: any helpful resources on shaders for threejs, or just hlsl in general?
多亏了 WestLangley,阴影才得以修复!现在回到其他问题:有没有关于 Threejs 着色器的有用资源,或者一般来说只是 hlsl?
回答by travnik
There are several ways to produce ambient occlusion:
有几种方法可以产生环境光遮挡:
- global illumination (GI)
- global low-frequency approximation of light intensity (GI shortcuts)
- screen-space approximations, most commonly referred to as SSAO (screen space ambient occlusion)
- 全局照明 (GI)
- 光强度的全局低频近似(GI 捷径)
- 屏幕空间近似值,通常称为 SSAO(屏幕空间环境遮挡)
here are a few discussions on ambient occlusion in three.js:
以下是有关three.js 中环境光遮挡的一些讨论:
- https://github.com/mrdoob/three.js/issues/6575[Real Time Global/Indirect Illumination]
- https://github.com/mrdoob/three.js/issues/4434[Voxel Cone Tracing global illumination]
- https://github.com/mrdoob/three.js/issues/5554[Better shadow maps]
- https://github.com/mrdoob/three.js/issues/6575[实时全局/间接照明]
- https://github.com/mrdoob/three.js/issues/4434[体素锥跟踪全局照明]
- https://github.com/mrdoob/three.js/issues/5554[更好的阴影贴图]
most likely you would want to refer to this example from three.js to start you off:
您很可能希望从three.js 中引用这个示例来开始您的工作: