【发布时间】：2014-01-08 16:23:29
【问题描述】：
我有一个相当简单的法线贴图照明实现，适用于 webgl（GLSL 着色器）中的 2D 精灵，我可以通过一个示例对其进行调整和优化。它只使用一个定向光，可以很好地满足我的目的。精灵被渲染为平面（2D），只有光的方向和法线是 3D 向量。顶点旋转只发生在 z 轴周围，因此非常简单。
我希望添加一个凹凸（高度）贴图来投射阴影。网上有 3D 凹凸贴图阴影投射示例和论文，但它们比我需要的要复杂得多，而且数学计算也超出了我的想象；我还没有找到一个例子或解释如何做一个简单的 2D 案例。
我的第一个倾向如下：对于片段着色器中的当前像素，沿着光线的方向回溯，并检查相邻凹凸贴图像素的高度。如果它高于该点的光方向矢量，则该像素位于阴影中。但是，由于凹凸贴图上的“高”像素可能会在大于 1 像素的距离上投射阴影，所以我必须在该方向上逐个像素地进行测试，直到找到一个足够高可以投射阴影（或到达纹理边缘） ，或达到某个任意限制。）
这听起来不是很理想，尤其是对于较大的纹理。我读过着色器中的 if 语句不是那么快。有更快/更好的方法吗？
【问题讨论】：
-
谷歌视差映射。看起来你正在寻找那个。告诉我它是否对你有帮助。
-
感谢您清理条款，这大大改善了我的 Google 搜索。我浏览了一些PDF。如果我没记错的话，阅读this one，他们基本上做了我上面写的事情——从当前像素沿着光的方向向后追踪，直到它达到一个会遮蔽它（或不遮蔽它）的高度值。也找到了webgl example here .不确定我是否缺少一些优化。
标签： three.js opengl-es-2.0 webgl