尧图网页设计 
AI 程序化建模用数学构建一朵蘑菇云探索前沿 AI 应用边界 · 案例 01 · 图形学与艺术把复杂形态拆成数学规则让代码生成三维模型爆炸蘑菇云看似复杂却可以拆成一组可计算的问题用椭球、圆环和柱体搭出轮廓用平滑融合连接结构再叠加多层噪声生成团块与褶皱。程序化建模的思路就是用数学规则描述形态再让代码生成三维模型。对于能够这样拆解的建模任务AI 或许更容易发挥编程能力生成可调节、可导出的复杂形态。本次程序的真实运行画面。云体由数学函数和代码生成浏览器实时计算它的形状与明暗。很多人第一次接触 AI是从聊天开始的问一个问题改一段文字写一份文案。这些用途很方便也容易让人把 AI 的能力理解为“给出一段更好的回答”。我们想通过“探索前沿 AI 应用边界”这个系列记录一些具体的尝试给 AI 一个目标和必要的工具它能把工作推进到哪一步交付的东西能否真正打开、操作和继续使用这一篇从一朵蘑菇云讲起。云盖的隆起、边缘的翻卷、细长的烟柱和层叠的褶皱让它看上去难以建模。我们尝试用程序化建模处理这些特征再用简单的 HTML 和 JavaScript 把它做成可交互的三维作品。AI 程序化建模用数学构建一朵蘑菇云把复杂形态拆成可计算的结构建模的起点是把复杂的云拆成几个简单形体椭球构成云盖圆环表现边缘翻卷中间收窄的柱体构成烟柱底部再加一片扁椭球形的尘裙。每个部分都可以通过位置、大小和比例等参数来控制。随后把这些形体平滑地连接起来。图形学中可以用函数描述表面并估计空间中某个位置到表面的距离这类表达常被称为距离场。这样云的轮廓就有了可以计算的定义。同一朵云的三个阶段。先建立轮廓再增加表面起伏最后加入颜色与光照。接下来是五层噪声。这里的“噪声”是一种连续起伏的数学图案较大的起伏形成团块更小的起伏补充褶皱。把不同尺度的变化叠加到轮廓上光滑的几何体就逐渐有了云团的质感。最后程序从每个像素发出一条虚拟视线逐步寻找云的表面再根据表面朝向和局部变化上色。朝下的部分更炽热顶部保留冷却灰烬的颜色。这些方法对应距离场、分形噪声和光线步进等已有的图形学技术AI 的工作是把形体关系和数学规则组织成可以运行的代码。让代码在浏览器里跑起来完成的页面只有一个不到 40 KB 的 index.html。界面、着色器和导出逻辑都写在里面没有外部库或贴图依赖。把文件复制到另一台电脑用支持 WebGL 2 的浏览器打开就可以离线运行。运行时每一帧由浏览器计算AI 不需要持续参与。我们可以拖拽旋转视角从侧面观察烟柱和翻卷也可以滚轮缩放、暂停动画或拖动时间滑块查看云体在不同阶段的形状。页面还提供基础形体、噪声灰模、火光着色三种模式让制作过程本身也能被看见。时间是程序的一个输入。它同时影响云盖高度、展开程度和噪声的位置。过程中也有返工。着色器需要修正编译问题火光过亮需要调整团块细节与视角需要反复对照。代码写完后还要实际打开浏览器检查播放、暂停、时间拖动、旋转缩放以及窄屏下的布局。实际操作界面。我们在本机 Chrome 中检查了主要交互和移动宽度布局。这时衡量 AI 输出的标准也变得具体起来程序能否运行按钮是否有效切换参数是否真的改变结果。AI 助手不仅写代码还通过浏览器查看和检查自己的输出再根据反馈修改。把当前时刻导出成三维模型看到网页里的云之后我们继续追问它能导出 OBJ 或 FBX 吗这一步把演示推进到了文件交付。网页里的形状由数学距离场表达常见建模软件则需要顶点和三角面。为此AI 补上了一条转换流程采样当前时刻的距离场生成三角网格计算平滑法线再写成 OBJ 文件。页面因此多了“导出 OBJ”按钮并提供轻量、标准和精细三档模型精度。导出的 OBJ 被独立回读后的实际画面。这里显示的是文件中的三角网格。我们选取 8 秒时刻、五层噪声、标准精度生成了一份静态模型。结果可以直接数出来检查项目本次示例顶点275,266三角面550,472OBJ 文件45.4 MiB文件共 47,642,567 字节。除了确认它能被重新读取我们还检查了索引、法线、边的连接关系和三角形朝向。在这份示例中开放边、非流形边、朝向冲突边和退化三角形的数量都为 0。这些检查让交付结果有了依据。我们拿到的模型可以作为后续处理的起点而模型的面数、材质与结构是否适合某个具体项目仍需按用途继续判断。这次实验的边界也要说清楚这是一种程序化视觉效果没有进行真实爆炸或流体仿真不能用它推断现实中的物理过程。OBJ 保存的是当前时刻的静态几何与法线。网页中的火光、辉光、纹理观感和生长动画需要在目标软件中另行设置。当前页面直接导出 OBJ。需要 FBX 时可以使用支持两种格式的三维软件转换本次没有验证 FBX 转换结果。一个可运行的原型还需要经过面向实际用途的进一步检查。此次演示和测试使用了 Chrome 与 RTX 3080其他设备的表现会有所不同。记录这些边界可以帮助我们更准确地使用 AI知道什么已经做到了也知道下一步该检查什么。从几何形体到距离场从数学函数到三角网格这个案例展示了程序化建模如何生成可交互、可导出的三维作品。这个系列会继续走进科技、工程、艺术和数据分析等场景把方法、成果与返工一起记录下来让更多人看到想法如何变成可以使用的作品。打开交互演示实验说明本文基于本次本地项目的实现、截图与校验记录。文中配图均为本次程序运行、参数对比或 OBJ 回读的实际画面。距离场、分形噪声和光线步进等方法属于已有图形学技术。 AI 程序化建模：用数学构建一朵蘑菇云
AI 程序化建模用数学构建一朵蘑菇云探索前沿 AI 应用边界 · 案例 01 · 图形学与艺术把复杂形态拆成数学规则让代码生成三维模型爆炸蘑菇云看似复杂却可以拆成一组可计算的问题用椭球、圆环和柱体搭出轮廓用平滑融合连接结构再叠加多层噪声生成团块与褶皱。程序化建模的思路就是用数学规则描述形态再让代码生成三维模型。对于能够这样拆解的建模任务AI 或许更容易发挥编程能力生成可调节、可导出的复杂形态。本次程序的真实运行画面。云体由数学函数和代码生成浏览器实时计算它的形状与明暗。很多人第一次接触 AI是从聊天开始的问一个问题改一段文字写一份文案。这些用途很方便也容易让人把 AI 的能力理解为“给出一段更好的回答”。我们想通过“探索前沿 AI 应用边界”这个系列记录一些具体的尝试给 AI 一个目标和必要的工具它能把工作推进到哪一步交付的东西能否真正打开、操作和继续使用这一篇从一朵蘑菇云讲起。云盖的隆起、边缘的翻卷、细长的烟柱和层叠的褶皱让它看上去难以建模。我们尝试用程序化建模处理这些特征再用简单的 HTML 和 JavaScript 把它做成可交互的三维作品。AI 程序化建模用数学构建一朵蘑菇云把复杂形态拆成可计算的结构建模的起点是把复杂的云拆成几个简单形体椭球构成云盖圆环表现边缘翻卷中间收窄的柱体构成烟柱底部再加一片扁椭球形的尘裙。每个部分都可以通过位置、大小和比例等参数来控制。随后把这些形体平滑地连接起来。图形学中可以用函数描述表面并估计空间中某个位置到表面的距离这类表达常被称为距离场。这样云的轮廓就有了可以计算的定义。同一朵云的三个阶段。先建立轮廓再增加表面起伏最后加入颜色与光照。接下来是五层噪声。这里的“噪声”是一种连续起伏的数学图案较大的起伏形成团块更小的起伏补充褶皱。把不同尺度的变化叠加到轮廓上光滑的几何体就逐渐有了云团的质感。最后程序从每个像素发出一条虚拟视线逐步寻找云的表面再根据表面朝向和局部变化上色。朝下的部分更炽热顶部保留冷却灰烬的颜色。这些方法对应距离场、分形噪声和光线步进等已有的图形学技术AI 的工作是把形体关系和数学规则组织成可以运行的代码。让代码在浏览器里跑起来完成的页面只有一个不到 40 KB 的 index.html。界面、着色器和导出逻辑都写在里面没有外部库或贴图依赖。把文件复制到另一台电脑用支持 WebGL 2 的浏览器打开就可以离线运行。运行时每一帧由浏览器计算AI 不需要持续参与。我们可以拖拽旋转视角从侧面观察烟柱和翻卷也可以滚轮缩放、暂停动画或拖动时间滑块查看云体在不同阶段的形状。页面还提供基础形体、噪声灰模、火光着色三种模式让制作过程本身也能被看见。时间是程序的一个输入。它同时影响云盖高度、展开程度和噪声的位置。过程中也有返工。着色器需要修正编译问题火光过亮需要调整团块细节与视角需要反复对照。代码写完后还要实际打开浏览器检查播放、暂停、时间拖动、旋转缩放以及窄屏下的布局。实际操作界面。我们在本机 Chrome 中检查了主要交互和移动宽度布局。这时衡量 AI 输出的标准也变得具体起来程序能否运行按钮是否有效切换参数是否真的改变结果。AI 助手不仅写代码还通过浏览器查看和检查自己的输出再根据反馈修改。把当前时刻导出成三维模型看到网页里的云之后我们继续追问它能导出 OBJ 或 FBX 吗这一步把演示推进到了文件交付。网页里的形状由数学距离场表达常见建模软件则需要顶点和三角面。为此AI 补上了一条转换流程采样当前时刻的距离场生成三角网格计算平滑法线再写成 OBJ 文件。页面因此多了“导出 OBJ”按钮并提供轻量、标准和精细三档模型精度。导出的 OBJ 被独立回读后的实际画面。这里显示的是文件中的三角网格。我们选取 8 秒时刻、五层噪声、标准精度生成了一份静态模型。结果可以直接数出来检查项目本次示例顶点275,266三角面550,472OBJ 文件45.4 MiB文件共 47,642,567 字节。除了确认它能被重新读取我们还检查了索引、法线、边的连接关系和三角形朝向。在这份示例中开放边、非流形边、朝向冲突边和退化三角形的数量都为 0。这些检查让交付结果有了依据。我们拿到的模型可以作为后续处理的起点而模型的面数、材质与结构是否适合某个具体项目仍需按用途继续判断。这次实验的边界也要说清楚这是一种程序化视觉效果没有进行真实爆炸或流体仿真不能用它推断现实中的物理过程。OBJ 保存的是当前时刻的静态几何与法线。网页中的火光、辉光、纹理观感和生长动画需要在目标软件中另行设置。当前页面直接导出 OBJ。需要 FBX 时可以使用支持两种格式的三维软件转换本次没有验证 FBX 转换结果。一个可运行的原型还需要经过面向实际用途的进一步检查。此次演示和测试使用了 Chrome 与 RTX 3080其他设备的表现会有所不同。记录这些边界可以帮助我们更准确地使用 AI知道什么已经做到了也知道下一步该检查什么。从几何形体到距离场从数学函数到三角网格这个案例展示了程序化建模如何生成可交互、可导出的三维作品。这个系列会继续走进科技、工程、艺术和数据分析等场景把方法、成果与返工一起记录下来让更多人看到想法如何变成可以使用的作品。打开交互演示实验说明本文基于本次本地项目的实现、截图与校验记录。文中配图均为本次程序运行、参数对比或 OBJ 回读的实际画面。距离场、分形噪声和光线步进等方法属于已有图形学技术。