javascript - 在 three.js 中即时更改特定面孔的纹理

Question

我一直在努力完成某件事，部分原因是我什至不知道自己是否走在正确的轨道上。

任务

我正在开发一个 three.js 网络应用程序，它加载 js 模型，然后为它们分配我在 three.js 中定义的 Material 。手头的对象是一所房子。最终目标是以几种不同的组合在我的网格上模拟尽可能好的自然光照(包括全局光照和环境光遮蔽)。如果场景是完全静态的，我不会有问题，但我希望能够动态切换各种对象的可见性。不用说，当对象彼此分开时，这会产生粘性阴影 (AO) 问题，因为我之前已经将光照和环境光遮蔽渲染并烘焙到我的纹理中，然后将其分配给 three.js 中的分离网格内容，所以我的 three.js 场景中没有任何灯光，以方便客户端使用。

挑战

我已经以各种组合为我的对象预渲染了光照，因此可以使用备用纹理贴图。我正在尝试找到一种在运行时更新局部面纹理的方法，这样当我移除转换阴影 (AO) 的对象时，我可以告诉下面的表面显示替代的、无阴影的纹理。

我目前的做法

在阅读了无数在线资源和堆栈溢出问答后，我确定

• 要即时更新纹理，我需要使用 as THREE.MeshFaceMaterial，为其提供多种替代 Material ，稍后引用它们的索引。 ( Change material or color in mesh face )

• 我无法告诉我的网格中的一个特定面现在在运行时使用索引 n 的 Material ，但我必须改为更改其中一种 Material 的纹理，使用该索引的所有面都会显示新纹理(这对我的问题来说不是很灵活)。

我正在尝试在 ( WebGL / Three.js Different materials on one complex object (grid)) 处实现示例。

1) 我什至无法让它工作

我已经能够在运行时更改面部的颜色，但不能更改纹理。当我尝试使用 THREE.MeshFaceMaterial 并将其分配给几何体时，网格只是以随机颜色显示，但是当我直接分配其中一种 Material 时，它显示正常。请参阅此处:(http://tinyurl.com/ndh99j4)。您是否有可以快速指出问题所在的调试工具？当我在 firebug 中检查 DOM 时，avalon.materials.planes_m 的结构似乎适合 THREE.FaceMeshMaterial，而且我没有收到任何错误。

2) 这是实现我所需的最佳方法吗？

假设我可以让它工作，并且我可以更新选定面上的纹理，我最终会得到纹理 a 和纹理 b 不适合的硬边(不同的照明场景)。那么我的下一步是通过使用自定义着色器使用顶点颜色(http://www.chandlerprall.com/2011/06/blending-webgl-textures/)来修复这个问题吗？看起来您可以通过在顶点而不是面设置 Material 来混合纹理。这两种解决方案是否可以一起使用？这是在引导我走上错误的道路吗？我对游戏开发的最佳实践知之甚少。我知道我可以在运行时模拟环境光遮蔽，但这并不能解决我对全局照明和最终聚集的需求，所以我仍然必须将照明烘焙到我的纹理中。

我一直在研究将光照分离为光照贴图 (http://threejs.org/examples/#webgl_materials_lightmap) 和混合纹理 (http://threejs.org/examples/#webgl_materials_blending)，但这些确实解决了不同的问题。

游戏开发专家如何最好地应对这一挑战？

Answer 1

我建议您查看屏幕空间 AO 方案，而不是烘焙贴图。如果几何形状发生变化，SSAO 将更加灵活。最简单的 SSAO 技术是对场景深度进行反锐化 mask ，原论文在这里:http://www.cgmi.inf.uni-konstanz.de/publikationen/2006/unsharp_masking/Luft%20et%20al.%20--%20Image%20Enhancement%20by%20Unsharp%20Masking%20the%20Depth%20Buffer.pdf它非常优雅和简单，以至于我在从旧金山飞往纽约的航类编写了我的第一个副本，并有时间小睡。