动态阴影此交互式 Web 应用程序介绍

动态阴影

此交互式 Web 应用程序可让您在站点内和周围移动兴趣点，并实时查看其着色蒙版更新。首次启动时，应用程序会显示一些简单的块障碍物，您可以交互式地操作这些障碍物。但是，您也可以加载自己的 3D 设计模型，并以相同的方式检查它们的阴影。

图1 - 在 Web 浏览器中运行的 Dynamic Overshadowing 应用程序的屏幕截图。

在新选项卡中启动 Web 应用程序...

这个应用程序的目的是研究使用 WebGL 和 JavaScript 生成实时交互式着色蒙版的可能性。阴影蒙版只是一张地图，显示从特定点可以看到天空穹顶的哪些部分，以及哪些部分被场地内和周围的不透明物体阻挡。这是非常有用的信息，因为它会影响采光、太阳入射和光伏收集，以及阴影和阴影。

这个应用程序的另一个主要目的是看看我是否可以同时实现动态天空亮度映射。任何点的阴影程度通常根据被遮挡的天空百分比来量化。然而，这并不是真正的信息，因为天空穹顶上的发光分布通常非常不均匀，即使在很短的时间内也会有很大变化。有了这个应用程序，我现在可以根据 16 种 CIE 通用标准天空类型试验一系列不同的天空条件，并开始根据被遮挡的实际天空亮度的百分比来量化阴影。

从这里开始，下一步是添加基于真实天气数据的动态时变天空，并能够聚合一段时间内的亮度和/或辐射度，以量化季节性和年度阴影效果。

为什么选择简单块模型

实际上，您可以将任何类型的 3D 模型导入为 .OBJ、.STL 或 .PLY 文件。该应用程序仅从简单的直线块开始，作为说明过程的一种方式，并提供一个您可以立即开始玩的交互式站点。要加载您自己的 3D 模型，请使用看起来像建筑物的按钮或将模型文件拖放到应用程序窗口中的任意位置。

图2 - 从 OBJ 文件加载的更复杂的 3D 着色模型的示例。

对于大型和复杂的模型，该应用程序会自动检测计算何时花费太长时间而无法交互，并会尝试适当地降级。例如，如果详细着色需要超过 200 毫秒才能完成，它将尝试使用更简单的方法来保持动态反馈。如果更简单的方法花费的时间超过 200 毫秒，它将停止尝试动态更新，直到您完成拖动并释放指针。有时，当您拖动时，浏览器或系统可能会忙于其他事情，导致它暂时停止动态更新，即使在相对简单的模型上也是如此。但是，一旦计算恢复速度，动态更新将自动恢复。

背景

我开始使用非常简单的光线追踪进行遮挡测试，它非常灵活，可以处理任何类型的三角形几何体。虽然在优化模型和所使用的交叉测试技术方面仍有一定的空间，也许 WebGL2 或 WebGPU 将来会有所帮助，但在现阶段，这种方法似乎不太可能足够快，无法对最简单的站点以外的任何网站进行高度动态的反馈。

但是，通过将障碍物简化为直线框，它可以非常接近实时地运行 - 亲自尝试一下。使用高度优化的轴向对齐边界框交叉点的效果非常好，即使有几百个框，并且在相当好的手机或平板电脑上也是如此。

这特别有趣，因为它表明，将复杂模型体素化为微小的直线单元可能只是前进的方向，允许对任何复杂度的几何体进行实时动态着色计算。为什么这很有趣，因为许多流体动力学计算引擎需要类似的方法来处理复杂的几何形状。也许有一些协同作用可以利用。

事实证明，在速度方面，真正的瓶颈是动态更新2D太阳路径图中的SVG天空段。您可以通过为天空细分选择一个小角度（例如 2 度），通过单击其标题栏关闭叠加层（关闭时它将忽略更新请求），然后在站点周围拖动 3D 太阳路径来亲自查看这一点。大约一秒钟后，更新应该会变得更快、更流畅（JavaScript 编译器需要时间来重新调整其运行时优化）。我将进一步研究这个问题，但可能我也必须将 WebGL 用于 2D 图表。SHADING MASK

有趣的功能

除了实际的着色之外，这个应用程序的第一个潜在有趣的功能是能够选择和交互式地操作障碍物块和着色蒙版。

要更改任何块的大小，只需单击/点击其任何边界表面，然后沿所需方向拖动相应的箭头即可。要调整着色蒙版位置，请先单击/点击其中心的小红点，然后拖动任意操纵器箭头。

块中心的圆形机械手允许您更改其位置。当您将一个块定位到靠近另一个块的表面时，它将捕捉到与该面对齐的位置。默认情况下，这仅发生在物理上靠近作块的其他块上。如果您希望捕捉到更远的其他方块，请确保选中带有地球内磁铁图片的切换按钮。同样，您可以打开或关闭中心捕捉，甚至全部捕捉。

除了物理拖动内容外，您还可以通过单击叠加面板或带有铅笔的小按钮来编辑当前所选块的位置和大小。这将显示面板，如图 3 所示。SELECTION: BLOCKEDIT SELECTION

图3 - 使用“编辑选择”面板以数字方式编辑所选块的大小。

天空亮度

您可以使用面板中的选项卡从一系列不同的天空分布中进行选择。这些都是基于CIE通用标准天空类型。由于天空亮度值在不同的天空条件下可能会有很大差异，因此显示的值实际上是天空天顶与每个天空段之间的亮度比。这样的比例最清楚地显示了整个天穹分布的性质，如果不是它的绝对值的话。LuminanceSKY SETTINGS

图片 4 - 选择天空发光分布。

这意味着每次天空变化时，比例都会发生变化。您可以通过在截面中设置值来临时锁定刻度。所选比例值将在所有后续日期、时间和位置更改中保留，但如果天空类型发生变化，则将重置。Luminance Ratio Scale

显示障碍物颜色

此功能使模型中的各种着色关系立即变得清晰易懂。它基本上根据阻碍它的物体的颜色为每个阴影段着色。

图片 5 - 根据遮挡物的颜色为阴影区域着色。

我之所以添加此功能，是因为我发现这种技术过去在解释阴影蒙版以及它们与特定站点的关系时非常有用。能够将 3D 模型的一个或多个部分隔离为不同的颜色，使关系更加清晰。

阴影光线

检查模型或尝试了解特定阴影模式的另一个有用工具是实际查看用于检测障碍物的阴影光线。仅显示实际击中某物的光线。每条射线都终止于最近的障碍物。

图6 - 可以显示用于确定天空遮挡的阴影光线，以便检查模型并了解阴影模式。

如果打开该选项，则每条光线的箭头末端也将根据其相交的物体进行着色。Show Obstruction Color

---

更改日志

0.0.8 2017年12月08日

• 添加了重叠块的实时动态合并。这使用构造实体几何体 （CSG） 来生成任何块的并集，这些块在交互式拖动时相互交叉或对接。即使有很多相交的块，形状并集的效果非常好，而且非常坚固，但是边缘检测仍然存在偶尔的问题，这可能会导致一两条剩余的线分裂平面面。解决这个问题需要对 CSG 模型进行非常基本的重构，我将这样做，但可能需要一些时间。