企业官网建设流程全解析

AI 程序化建模：用数学构建一朵蘑菇云

探索前沿 AI 应用边界 · 案例 01 · 图形学与艺术

把复杂形态拆成数学规则，让代码生成三维模型

爆炸蘑菇云看似复杂，却可以拆成一组可计算的问题：用椭球、圆环和柱体搭出轮廓，用平滑融合连接结构，再叠加多层噪声生成团块与褶皱。程序化建模的思路，就是用数学规则描述形态，再让代码生成三维模型。对于能够这样拆解的建模任务，AI 或许更容易发挥编程能力，生成可调节、可导出的复杂形态。

本次程序的真实运行画面。云体由数学函数和代码生成，浏览器实时计算它的形状与明暗。

很多人第一次接触 AI，是从聊天开始的：问一个问题，改一段文字，写一份文案。这些用途很方便，也容易让人把 AI 的能力理解为“给出一段更好的回答”。

我们想通过“探索前沿 AI 应用边界”这个系列，记录一些具体的尝试：给 AI 一个目标和必要的工具，它能把工作推进到哪一步？交付的东西能否真正打开、操作和继续使用？

这一篇从一朵蘑菇云讲起。云盖的隆起、边缘的翻卷、细长的烟柱和层叠的褶皱，让它看上去难以建模。我们尝试用程序化建模处理这些特征，再用简单的 HTML 和 JavaScript 把它做成可交互的三维作品。

把复杂形态拆成可计算的结构

建模的起点，是把复杂的云拆成几个简单形体：椭球构成云盖，圆环表现边缘翻卷，中间收窄的柱体构成烟柱，底部再加一片扁椭球形的尘裙。每个部分都可以通过位置、大小和比例等参数来控制。

随后，把这些形体平滑地连接起来。图形学中可以用函数描述表面，并估计空间中某个位置到表面的距离；这类表达常被称为距离场。这样，云的轮廓就有了可以计算的定义。

同一朵云的三个阶段。先建立轮廓，再增加表面起伏，最后加入颜色与光照。

接下来是五层噪声。这里的“噪声”是一种连续起伏的数学图案：较大的起伏形成团块，更小的起伏补充褶皱。把不同尺度的变化叠加到轮廓上，光滑的几何体就逐渐有了云团的质感。

最后，程序从每个像素发出一条虚拟视线，逐步寻找云的表面，再根据表面朝向和局部变化上色。朝下的部分更炽热，顶部保留冷却灰烬的颜色。这些方法对应距离场、分形噪声和光线步进等已有的图形学技术；AI 的工作，是把形体关系和数学规则组织成可以运行的代码。

让代码在浏览器里跑起来

完成的页面只有一个不到 40 KB 的 index.html。界面、着色器和导出逻辑都写在里面，没有外部库或贴图依赖。把文件复制到另一台电脑，用支持 WebGL 2 的浏览器打开，就可以离线运行。运行时，每一帧由浏览器计算，AI 不需要持续参与。

我们可以拖拽旋转视角，从侧面观察烟柱和翻卷；也可以滚轮缩放、暂停动画，或拖动时间滑块，查看云体在不同阶段的形状。页面还提供基础形体、噪声灰模、火光着色三种模式，让制作过程本身也能被看见。

时间是程序的一个输入。它同时影响云盖高度、展开程度和噪声的位置。

过程中也有返工。着色器需要修正编译问题，火光过亮需要调整，团块细节与视角需要反复对照。代码写完后，还要实际打开浏览器，检查播放、暂停、时间拖动、旋转缩放，以及窄屏下的布局。

实际操作界面。我们在本机 Chrome 中检查了主要交互和移动宽度布局。

这时，衡量 AI 输出的标准也变得具体起来：程序能否运行，按钮是否有效，切换参数是否真的改变结果。AI 助手不仅写代码，还通过浏览器查看和检查自己的输出，再根据反馈修改。

把当前时刻导出成三维模型

看到网页里的云之后，我们继续追问：它能导出 OBJ 或 FBX 吗？这一步把演示推进到了文件交付。

网页里的形状由数学距离场表达，常见建模软件则需要顶点和三角面。为此，AI 补上了一条转换流程：采样当前时刻的距离场，生成三角网格，计算平滑法线，再写成 OBJ 文件。页面因此多了“导出 OBJ”按钮，并提供轻量、标准和精细三档模型精度。

导出的 OBJ 被独立回读后的实际画面。这里显示的是文件中的三角网格。

我们选取 8 秒时刻、五层噪声、标准精度，生成了一份静态模型。结果可以直接数出来：

文件共 47,642,567 字节。除了确认它能被重新读取，我们还检查了索引、法线、边的连接关系和三角形朝向。在这份示例中，开放边、非流形边、朝向冲突边和退化三角形的数量都为 0。

这些检查让交付结果有了依据。我们拿到的模型可以作为后续处理的起点，而模型的面数、材质与结构是否适合某个具体项目，仍需按用途继续判断。

这次实验的边界也要说清楚

• 这是一种程序化视觉效果，没有进行真实爆炸或流体仿真，不能用它推断现实中的物理过程。
• OBJ 保存的是当前时刻的静态几何与法线。网页中的火光、辉光、纹理观感和生长动画，需要在目标软件中另行设置。
• 当前页面直接导出 OBJ。需要 FBX 时，可以使用支持两种格式的三维软件转换；本次没有验证 FBX 转换结果。
• 一个可运行的原型还需要经过面向实际用途的进一步检查。此次演示和测试使用了 Chrome 与 RTX 3080，其他设备的表现会有所不同。
  记录这些边界，可以帮助我们更准确地使用 AI：知道什么已经做到了，也知道下一步该检查什么。

从几何形体到距离场，从数学函数到三角网格，这个案例展示了程序化建模如何生成可交互、可导出的三维作品。这个系列会继续走进科技、工程、艺术和数据分析等场景，把方法、成果与返工一起记录下来，让更多人看到想法如何变成可以使用的作品。

打开交互演示

实验说明：本文基于本次本地项目的实现、截图与校验记录。文中配图均为本次程序运行、参数对比或 OBJ 回读的实际画面。距离场、分形噪声和光线步进等方法属于已有图形学技术。