TiXL BoxSDF 节点完全指南圆角立方体 SDF 场的生成、渲染与变形组合【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3本篇指南围绕 TiXL开源实时动态图形软件中Lib.field.generate.sdf系列的核心节点BoxSDF展开它用于生成一个带圆角rounded的程序化立方体有向距离场Signed Distance Field简称 SDF在粒子、材质、体积渲染等实时动态图形场景中常与 RaymarchField 配合完成光线步进渲染并用 VisualizeFieldDistance 进行可视化调试。读完本文你将掌握 BoxSDF 全部输入/输出参数的含义与默认值、底层 HLSL 距离函数的实现原理以及从“生成 SDF → 渲染 → 可视化调试 → 空间变形组合”的完整实战链路。BoxSDF 是什么一个程序化圆角盒子 SDF 场BoxSDF 生成的是一个程序化procedural的盒子字段box field其几何体带有可调节的圆角边缘。由于它输出的是连续的距离场而非多边形网格因此可用 RaymarchField 直接渲染出来即光线步进渲染 SDF 图可用 VisualizeFieldDistance 以等高线切面的形式可视化距离场它还有一个广为使用的别名Cube SDF立方体 SDF。在官方文档体系中BoxSDF 隶属于 Lib.field.generate.sdf字段生成 → SDF 系列是学习 TiXL 渲染管线的入门级节点之一——官方文档为此提供了 [HowToRaymarchField] 交互式教程关于 TiXL 渲染管线的简单直观入门。需要特别区分的是SDF 场与多边形网格是两种不同的几何表达。如果你需要的是由多边形面片组成的普通立方体网格应使用 CubeMesh而不是本节点。从仓库源码可以确认该节点的实现位置与身份标识BoxSDF.cs 中定义了BoxSDF类其类型 GUID 为860da1cd-b341-4bc5-965a-4a9c295831f4它同时实现了ITransformable与IGraphNodeOp两个接口——前者让它可以在图编辑器中接收平移/缩放变换后者让它能够参与 ShaderGraph 的 HLSL 代码拼接详见下文“底层原理”一节。输入参数详解文档定义与源码默认值BoxSDF 共有 4 个输入参数官方文档的参数表如下名称相关度与类型说明CenterVector3变换对象的中心位置Transforms the center of the objectSizeVector3定义盒子的大小x 宽度width、y 高度height、z 深度depthUniformScaleSingle在所有方向上均匀缩放盒子EdgeRadiusSingle定义边缘被圆角化/倒角rounded / beveled的程度结合仓库中的符号定义文件 BoxSDF.t3可以补充每个参数的默认值参数默认值备注Center(0, 0, 0)原点居中Size(1, 1, 1)单位立方体UniformScale1.0不额外缩放EdgeRadius0.05轻微圆角源码中还揭示了这些参数的底层映射关系BoxSDF.csCenter被映射为ITransformable.TranslationInput平移输入即编辑器中通过变换 gizmo 拖动的位移会写入该参数Size被映射为ITransformable.ScaleInput缩放输入UniformScale与Size在每次更新时按Size.GetValue(context) * UniformScale.GetValue(context) / 2合并为一个新的float3参数CombinedScale合并缩放下发给 ShaderGraph。这里的/2很关键它意味着Size语义上是盒子的全尺寸边长而 SDF 公式内部使用的是半尺寸half-extent因此源码在传递前先除以 2EdgeRadius直接作为圆角半径r传给距离函数。从ITransformable接口可以看出BoxSDF 的RotationInput返回null——也就是说盒子的旋转不通过该接口直接提供如需旋转请在其后串联空间变换节点见“组合变形”一节。输出ShaderGraphNode 与场图管线的接入点名称类型ResultT3.Core.DataTypes.ShaderGraphNodeBoxSDF 的输出类型是T3.Core.DataTypes.ShaderGraphNode着色器图节点而不是普通数值或网格。这意味着它天然属于 TiXL 的场图Field / ShaderGraph管线多个 SDF 节点通过该类型互相连接最终形成一个可以在 GPU 上求值的连续距离场函数。在 BoxSDF.cs 中可以看到输出槽位Result的 GUID 为9153c53c-0b19-4ce4-b086-e448d78ef032节点内部维护一个ShaderGraphNode并在Update()中把合并后的CombinedScale写入AdditionalParameters附加参数数组随后调用ShaderNode.Update(context)把参数变化同步到着色器图这类节点通过IGraphNodeOp接口向CodeAssembleContext注入 HLSL 定义并追加调用代码见下一节从而把参数和函数“编译”进最终的像素/计算着色器中。底层原理fRoundedRect 圆角盒子 SDF 的 HLSL 实现BoxSDF 的核心数学实现可以在源码 BoxSDF.cs 的AddDefinitions与GetPreShaderCode方法中看到它向全局注入了一个名为fRoundedRect的 HLSL 函数float fRoundedRect(float3 p, float3 center, float3 size, float r) { float3 q abs(p - center) - size r; return length(max(q,0.0)) min(max(q.x,max(q.y,q.z)),0.0) - r; }这是图形学中经典的圆角长方体 SDF公式其语义拆解如下abs(p - center)把采样点p相对盒子中心取绝对值将八分之一的求解空间折叠到第一象限使公式只需要处理一个“角”减去半尺寸size并加上圆角半径r当点在盒子内部时得到负值外部时得到正值length(max(q, 0.0))处理“角外”区域用欧几里得距离度量到圆角圆弧的距离min(max(q.x, max(q.y, q.z)), 0.0)处理“面外/棱外”区域保证盒子内部点到表面的距离方向正确最后减去- r把距离场整体收缩从而形成半径为r的圆角。而节点在预着色阶段追加的调用代码为f{c}.w fRoundedRect(p{c}.xyz, {ShaderNode}Center, {ShaderNode}CombinedScale, {ShaderNode}EdgeRadius); f{c}.xyz p.w 0.5 ? p{c}.xyz : 1; // save local space第一行把距离值写入字段的w分量第二行则把本地空间坐标暂存到xyz分量当p.w 0.5时以便后续节点如纹理映射、材质计算在盒子的本地坐标系中继续处理。这里传入的正是上文提到的CombinedScale即Size * UniformScale / 2与EdgeRadius。渲染用 RaymarchField 把 SDF 场画出来BoxSDF 生成的ShaderGraphNode距离场本身不可见需要用 RaymarchField 节点进行光线步进raymarching渲染。它将SdfFieldShaderGraphNode必填作为输入渲染连接好的着色器图 SDF并使用 [SetMaterial]、[SetFog] 和 [PointLight] 进行材质/雾效/点光覆盖它还会正确初始化深度缓冲使 SDF 输出可以与场景中的其他几何体如普通网格正确混合。该节点在旧版中也被称为 DrawField、DrawSDF、DrawRaymarchField、RaymarchSDF。一个典型的 BoxSDF 渲染链路为BoxSDF.Result → RaymarchField.SdfField → RaymarchField.DrawCommand → 输出/合成RaymarchField 的核心参数决定了 SDF 渲染的质量与性能完整参数见 RaymarchField 文档参数作用与建议SdfField必填接入 BoxSDF 等 SDF 生成节点的ResultColorVector4颜色倍率也可用 [SetSDFMaterial] 或 [SetMaterial] 代替AmbientOcclusionVector4根据AoDistance施加环境光遮蔽颜色alpha 通道控制强度也可用亮色制造内发光效果AoDistanceSingle控制环境光遮蔽的距离与强度MaxStepsSingle光线步进步数上限对质量与性能影响巨大正常取值在 50150 之间MinDistanceSingle判定光线命中表面的距离阈值MaxDistanceSingle超出该阈值后中止步进相当于远裁剪StepSizeSingle初始步长缩放因子当对场施加噪声等破坏 Lipschitz 连续性的操作时适当调低可减少伪影NormalSamplingDSingle计算表面法线时的采样距离控制物体锐利程度过小会产生伪影过大会产生平滑效果DistToColorSingle用于合成场景时轻微修正边缘伪影的辅助因子调试用 VisualizeFieldDistance 检查距离场质量在正式渲染前可以用 VisualizeFieldDistance 对 BoxSDF 的距离场进行切片可视化它通过绘制一个带**等高线contour lines**的平面来可视化场的距离值。这个平面可以被旋转或移动到场中的任意位置非常适合直观理解盒子的距离场形态检查 Lipschitz 连续性——距离场是否“平滑”以及潜在的 raymarching 问题对应 RaymarchField 中StepSize参数要处理的伪影来源。其关键输入为SdfFieldShaderGraphNode必填、Center、Rotation、Size、LineColor、Background以及EnableZTest/EnableZWrite控制与其他几何体的深度交互输出为DrawCommand。组合变形BendField、TransformField 与 PolarRepeatBoxSDF 的妙处在于它是可组合的官方文档明确指出它可以被 BendField弯曲场、TransformField变换场、PolarRepeat极坐标重复等空间操作节点修改。仓库中的 field/space 系列文档 展示了这类“空间变形”节点它们作用于采样坐标而非网格顶点因此可以无损地扭曲、阵列、镜像一个 SDF 场。例如用TransformField可以实现 BoxSDF 的旋转与任意位移用BendField可以把盒子弯曲成弧形用PolarRepeat可以让多个盒子沿圆周阵列分布——这些都是多边形网格难以做到或成本很高的操作。相似节点与替代方案官方文档列出的相似节点同为 SDF 生成节点使用方式与 BoxSDF 一致CylinderSDF — 带圆角的程序化圆柱场ChainLinkSDF — 程序化链环场FractalSDF — 程序化 MandelBox 分形场OctahedronSDF — 八面体距离场。以及同一目录下的 SphereSDF、TorusSDF、BoxFrameSDF盒框/线框场等完整清单见 Lib.field.generate.sdf 索引。网格替代方案如果目标是普通多边形立方体如用于刚体、UV 展开、物理碰撞等需要显式面的场景请改用 CubeMesh——SDF 与网格两种路线在 TiXL 中并行存在、各司其职。最小实战链路从 BoxSDF 到屏幕综合以上内容一个最小可运行的 BoxSDF 实战链路可以这样搭建生成场添加Lib.field.generate.sdf分类下的BoxSDF节点默认即是一个中心在原点、边长 1、圆角 0.05 的圆角立方体场渲染添加RaymarchField节点把 BoxSDF 的Result接入其必填输入SdfField并适当设置MaxSteps建议从 100 起步在 50150 区间按画质/性能权衡调整与MinDistance调试临时接入VisualizeFieldDistance把切片平面移动到盒子内部观察等高线确认距离场形态与连续性正常后移除塑形在 BoxSDF 之后串联TransformField/BendField/PolarRepeat等空间变换通过调整Center、Size、UniformScale、EdgeRadius四个参数实时观察圆角立方体的形变效果上色通过 RaymarchField 的Color或 [SetMaterial] 设置颜色与纹理配合TextureScale、UVMapping控制贴图映射。上述所有节点的符号定义、默认值与连接关系均可在仓库中查阅SDF 生成节点的 C# 实现与默认值文件位于 Operators/Lib/Symbols/field/generate/sdf/ 目录每个符号对应.cs、.t3、.t3ui三个文件渲染与可视化节点的行为说明见 RaymarchField 与 VisualizeFieldDistance 文档。TiXL 自带的示例项目仓库 Operators/examples 目录中也包含大量可参考的 Raymarch 用法。【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考