FORM / FIELD画板 DRAW
画出闭合线条，围出孔洞。
EXPERIMENT 002 / ORGANIC METAL
让直线，长出有机形态。
从线条的交汇，到自然融合的孔洞。一个关于形态、场与液态金属的实时实验。
SHADED SURFACEY ↑
└ X
└ X
BINARY MASKY ↑
└ X
└ X
正在初始化 WebGL 2…/READY
平滑并集 SDFLAB NOTE 01
试着增大融合半径：交界处会逐渐变圆，相邻线条像液态金属一样连接。
↳
把这次实验带走 保存画面、笔迹与模型，或带入 TouchDesigner。
FROM BROWSER TO TOUCHDESIGNER
不是滤镜，是场的融合。
在线实验用线段距离场保留清晰结构；TOP 路径用模糊密度场处理任意黑白线稿。
01
输入你的线条
线稿 TOP，或 POP line strip 经 Geometry COMP + Render TOP 渲染成白线黑底。保留相同的输入与输出尺寸。
LINE / POP → MONOCHROME TOP02
让交界处自然融合
横向、纵向高斯模糊把线稿转为连续密度场。阈值提取实体，噪声扭曲采样位置。更大的融合范围让孔洞边缘圆润。
GAUSSIAN X → GAUSSIAN Y → FIELD03
Derivative 官方 GLSL TOP 文档 ↗POP 线条渲染与 Geometry COMP ↗用轮廓生成金属表面
从场生成高度与法线，使用程序化环境反射着色。输出黑白遮罩或金属颜色；这是一张 2.5D 图像，不是实体网格。
HEIGHT → NORMAL → METAL / MASK加载代码…GLSL · Pixel Shader
A FEW THINGS TO KNOW
从这里开始。
这些参数分别改变什么？＋
线宽控制实体厚度；融合半径控制交界处圆滑程度；单元孔洞围绕各自中心缩放，并保护外轮廓与连接处；结构缩放单独控制整体大小；噪声强度扭曲轮廓；阈值越高，实体越少，孔洞越大。它们会共同影响形状。
如何在 TouchDesigner 中接起来？＋
下载 GLSL 套件，按照 README 依次连接 4 个 GLSL TOP：Gaussian X → Gaussian Y → Field → Shade。在 Vectors 页添加对应 uniforms。中间场建议 16-bit float，尺寸先用 512 × 512。套件附带当前参数、笔迹、清理后的线稿及场快照 PNG。
基础融合使用相同思路。单元孔洞缩放包含 CPU 连通区域分析，不能只靠这些基础 GLSL 动态复现。要保留当前局部孔洞结果，将 field.png 作为数据纹理直接接入 03_metal.frag；不要做颜色转换。套件 README 说明了两条路径。
图片与实验数据保存在哪里？＋
导入图片只在当前浏览器中处理，不会上传。参数和缩小到工作尺寸的图片、笔迹会自动保存在此浏览器；「保存实验」会将它们一起写入 JSON，方便之后恢复。大图原文件不包含在实验中。网站访问权限保持私密。
三维模式与 OBJ 可以做到什么？＋
上传 OBJ 后，可选择「空间有机孔洞」或将当前图层三向投影到模型上。调整密度、开孔程度与厚度，再确认生成。新模型可下载为 OBJ；导入的模型会一同包含在「保存实验」文件中。图层可直接生成带厚度的实体。圆环、圆柱与方体先建立有壁厚的壳体，再用图层中的封闭孔洞切穿表面。圆柱端盖和方体接缝保留边框；可关闭「有机穿孔」比较原形。拖动旋转，滚轮或双指缩放。三维模式暂停流动噪声。修改后点击确认生成，也可开启自动更新。
OBJ 包含实际顶点、法线及孔洞内壁，坐标按毫米导出；OBJ 本身没有单位元数据，导入软件时请选择毫米。程序化金属材质不嵌入 OBJ。模型通过边界与法线方向检查后才允许下载，细小孔洞和连接处仍受网格分辨率限制，不能保证直接适合制造。
性能与验证范围＋
需要支持 WebGL 2 的浏览器。预览使用 512 × 512 场纹理。已通过 OpenGL ES 的二维／三维着色器编译与画面检查、交互事件逻辑测试，以及四类网格的闭合、面朝向、实际穿孔和 OBJ 回读检查。当前环境限制了完整浏览器自动化验证，也没有 TouchDesigner；仍需在你的浏览器和 TouchDesigner 中确认实机表现。TOP 模糊路径是视觉近似，材质也不是物理精确的光线追踪。