TiXL DistortAndShade 运算符合集：双纹理位移实现纹理玻璃与浮雕效果

TiXL DistortAndShade 运算符合集双纹理位移实现纹理玻璃与浮雕效果【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3TiXL 内置图像滤镜库Lib.image.fx.distort中的DistortAndShade是一个双输入纹理位移运算子它利用第二张图像ImageB作为位移/高度依据对第一张图像ImageA进行逐像素方向性位移从而生成具有倒角bevel与浮雕emboss质感的画面常用于模拟带纹理的玻璃textured glass效果。本文将以仓库中的运算符文档为骨架结合其 HLSL 像素着色器、运算符封装源码与真实示例工程完整讲解该运算子的输入参数、默认值、内部渲染管线和实战调节方法。运算符定位Lib.image.fx.distort 家族中的双图位移效果DistortAndShade 属于 TiXL 官方算子库的图像特效分类位于Lib.image.fx.distort同目录下还有 BubbleZoom、ChromaticDistortion、Displace、EdgeRepeat、PolarCoordinates、TimeDisplace 等一整套失真类效果完整清单见 Lib.image.fx.distort 目录说明。官方文档对 DistortAndShade 的定义是一句话Uses two images to distort (create a bevel / emboss effect) that can look like textured glass即“使用两张图像进行位移产生倒角/浮雕效果可以呈现类似带纹理玻璃的外观”。它与同分类的 Displace 同属“用一张图去扰动另一张图”的思路但 DistortAndShade 的位移方式更强调以画面中心为参照的径向偏移并额外集成了着色混合能力官方文档还提示如果想要类似观感可以进一步参考 Steps、DetectEdges 与 FakeLight 三个风格化运算子。在源码层面该运算子的 C# 声明位于 Operators/Lib/Symbols/image/fx/distort/DistortAndShade.cs以InstanceDistortAndShade子类形式注册进运算符库其图形化定义含默认值与内部连线保存在同目录的 DistortAndShade.t3。输入参数详解官方文档列出了 5 个输入参数其中 ImageA、ImageB 为必填纹理。下表为原始参数表名称相关性与类型说明ImageATexture2D必填—ImageBTexture2D必填—DisplacementSingle控制效果的方向与强度CenterVector2偏移图像 A 被图像 B 位移的参照方向来源ShadingSingle控制图像 B 的可见度/亮度ShadeColorVector4定义一个与 ImageB 相乘的颜色仅当 shading 值增大时才可见各参数的默认值与含义从 DistortAndShade.t3 的Inputs段可以读出该运算子在编辑器中的出厂默认值ImageA / ImageB默认均为null必须手动连接两张纹理Displacement默认0.5为位移强度的标量缩放系数Center默认(0.5, 0.5)对应 UV 坐标系下的画面中心点Shading默认0.0因此默认状态下着色混合关闭输出仅表现为纯位移ShadeColor默认(1.0, 1.0, 1.0, 1.0)即白色混合时不会改变色相。需要特别说明的是官方文档中 Shading 的语义是“控制 ImageB 的可见度/亮度”而 ShadeColor 是“与 ImageB 相乘的颜色仅当 shading 值增大时才可见”。对照着色器实现见下文可以看到最终输出实际上是在「位移采样后的 ImageA」与「ShadeColor」之间按Shading × ImageB采样值做线性插值因此 Shading 调大后 ImageB 的亮部区域会逐渐显露出 ShadeColor 的染色效果——这也是“玻璃上透出第二层纹理颜色”观感的来源。参数到着色器常量的映射DistortAndShade 的着色器常量缓冲区DistortAndShade.hlsl 第 1-7 行声明为cbuffer ParamConstants : register(b0) { float4 ShadeColor; float Displacement; float Shade; float2 Center; }可以看到Shading输入在着色器中对应的常量名是Shade两者指同一个参数命名略有出入其余三个参数与运算符输入同名。这些常量经由内部辅助运算子_multiImageFxSetup的FloatParamsMultiInputSlot 多输入槽灌入常量缓冲区具体的打包逻辑见 Operators/Lib/Symbols/image/fx/_/_multiImageFxSetup.cs 中的FloatParams声明。输出名称类型OutputT3.Core.DataTypes.Texture2D输出为一张与输入同分辨率的纹理可直接连接后续图像特效或混合节点继续处理。源码级原理像素着色器逐行拆解DistortAndShade 的实际效果完全由像素着色器 Operators/Lib/Assets/shaders/img/fx/DistortAndShade.hlsl 决定。它声明了两张输入纹理与一个线性采样器Texture2Dfloat4 ImageA : register(t0); Texture2Dfloat4 ImageB : register(t1); sampler texSampler : register(s0);核心逻辑位于psMain第 33-56 行去除注释后的主干代码为float4 psMain(vsOutput psInput) : SV_TARGET { float2 uv psInput.texCoord; float2 d uv - Center; // 相对中心的偏移向量 float4 displaceAmount ImageB.Sample(texSampler, float2(uv.x, uv.y)); float2 uv2 uv d * displaceAmount * Displacement; // 偏移后的采样坐标 float4 c2 ImageA.Sample(texSampler, uv2); // 在偏移坐标处采样 ImageA return lerp(c2, ShadeColor, Shade * displaceAmount); // 按 Shading 与 ImageB 强度混合 }逐行解读float2 d uv - Center;——计算当前像素 UV 相对 Center 的方向向量。Center 默认(0.5, 0.5)此时位移以画面正中为原点向四周发散改变 Center 会整体平移位移的“放射中心”这正是文档所说“偏移图像 A 被图像 B 位移的方向来源”。displaceAmount ImageB.Sample(...)——在原始 UV 处采样 ImageB得到该点的位移量与着色权重RGBA 四通道都会参与后续运算。uv2 uv d * displaceAmount * Displacement——采样坐标沿方向向量d平移平移幅度等于displaceAmount × Displacement。因此Displacement 同时控制位移的方向感符号与强度绝对值值越大纹理被拉扯得越夸张负值则把位移方向整体反转。c2 ImageA.Sample(texSampler, uv2)——在偏移后的坐标处重新采样 ImageA得到“被 ImageB 扭曲过”的像素。ImageA 中原本平坦的区域在 ImageB 高低起伏的驱动下被挤压或拉伸从而产生类似玻璃折射、表面凹凸的错觉。lerp(c2, ShadeColor, Shade * displaceAmount)——在位移结果c2与ShadeColor之间插值。插值权重由Shading × ImageB采样值决定所以 ImageB 越亮的位置越快地过渡到 ShadeColor当Shading 0时权重恒为 0输出退化为纯位移效果这正好印证了文档中“ShadeColor 仅在 shading 值增大时可见”的说明。值得留意的是着色器中还保留了一大段被注释掉的旧实现第 40-52 行它通过采样 ImageA 的邻域像素计算亮度梯度再结合角度参数生成方向向量——可以推断这是早期版本的位移方案最终版本改为更简洁的“以 Center 为参照的径向位移 ImageB 强度调制”策略。这段注释代码可作为理解该效果设计演进的参考。内部实现运算符如何被组装DistortAndShade 并不是一个直接调用 GPU 的裸节点而是一个由内部图组装而成的复合运算子。从 DistortAndShade.t3 的Children与Connections段可以看到它的真实内部结构核心是一个_multiImageFxSetup子节点Id0391973e...它负责“把自定义像素着色器跑在两张输入纹理上”的完整渲染流程。其关键输入值包括ShaderPathLib:shaders/img/fx/DistortAndShade.hlsl指定要执行的像素着色器WrapModeMirror镜像环绕即采样越界时按镜像方式重复纹理——这是 DistortAndShade 对外暴露的固定行为FloatParams默认值0.33实际会被后续连线覆盖。_multiImageFxSetup本身定义见 Operators/Lib/Symbols/image/fx/_/_multiImageFxSetup.cs提供ImageA、ImageB、ShaderPath、WrapMode、Resolution、ClearColor、GenerateMips以及多输入的FloatParams/IntParams槽位其图形化定义 _multiImageFxSetup.t3 展示了更底层的组装通过PixelShader入口点psMain、VertexShader入口点vsMain来自 Default2-vs.hlsl、RenderTarget、SamplerStateFilter 为 MinMagMipLinearAddressU/V 接 WrapModeAddressW 固定 Wrap、TimeConstBuffer等节点构成一条完整的 Direct3D 11 渲染管线。DistortAndShade.t3 的连线揭示了参数如何进入着色器常量缓冲区ShadeColor→Vector4Components将 Vector4 拆成 4 个 float→_multiImageFxSetup.FloatParamsCenter→Vector2Components拆成 2 个 float→FloatParamsDisplacement、Shading直接 →FloatParamsImageA→_multiImageFxSetup.ImageAImageB→_multiImageFxSetup.ImageB另外ImageA与ImageB还分别接入两个ColorGrade子节点后再回连_multiImageFxSetup的FloatParams——从连线结构看这可以推断为对两张输入纹理进行了内部色彩分级预处理ColorGrade 运算子位于同一图像库中再参与最终着色。这套“封装算子 参数打包进 FloatParams 外部传入 ShaderPath”的结构在Lib.image.fx图像特效家族中被广泛复用例如 Displace.t3、BubbleZoom.t3 同样基于_multiImageFxSetup构建理解 DistortAndShade 的内部组装方式也就理解了这一类图像特效运算子的通用骨架。实战在 TiXL 中如何使用 DistortAndShade基本接线步骤在 TiXL 编辑器的运算符库Lib → image → fx → distort中找到DistortAndShade并放入图中。为ImageA连接主画面如视频、渲染结果或任意纹理为ImageB连接位移/高度源噪点纹理、渐变、法线图、另一路视频均可。ImageA 与 ImageB 均为必填Texture2D Required缺一不可。将Output连接到后续图像处理节点或最终输出。拖动Displacement默认 0.5观察位移强度调整Center默认 0.5, 0.5改变位移的放射中心再逐步增大Shading让ShadeColor的染色显现。真实示例参数参考仓库自带的官方教程工程 HowToUseImageEffects.t3对应示例场景 howto/HowToUseImageEffects中实际使用了一组 DistortAndShade 参数见该文件第 916-940 行Displacement1.6466668明显大于默认值 0.5产生更强的扭曲Shading0.53999996约 0.54让 ShadeColor 部分显现ShadeColor(0.0, 0.0, 0.0, 1.0)黑色配合中等 Shading 可产生暗色玻璃/阴影般的倒角着色。这组参数说明位移强度可以超过 1 获得夸张变形而 ShadeColor 设为深色配合 Shading 即可在不引入彩色染色的前提下增强浮雕/玻璃的立体感。调节技巧想要“玻璃折射”感保持 Shading 为 0只调 Displacement 与 Center让 ImageB 的明暗起伏纯粹驱动 ImageA 的扭曲想要“浮雕/倒角”感引入一个带有明显明暗渐变的 ImageB例如径向渐变或噪点高度图把 Shading 提到 0.3~0.6 之间并搭配深色 ShadeColor 强化边缘阴影想要彩色玻璃染色把 ShadeColor 改为目标色相再提升 Shading与同分类的 Displace提供更精细的 Twist、SampleRadius、WrapMode、RGSS_4xAA 等控制对比使用可以快速判断哪种位移模型更贴合需求。相关运算子与延伸阅读同分类位移/失真效果BubbleZoom鱼眼放大、ChromaticDistortion色差、EdgeRepeat边缘拉伸重复、PolarCoordinates极坐标变换、TimeDisplace时间位移。官方文档推荐的相似观感效果Steps色阶/阶梯化、DetectEdges边缘检测、FakeLight模拟光照。源码与资源索引运算符定义 DistortAndShade.cs、图形定义 DistortAndShade.t3、着色器 DistortAndShade.hlsl、内部渲染框架 _multiImageFxSetup.cs。综上DistortAndShade 通过“ImageB 驱动径向位移 Shading 驱动的颜色混合”这一极简的两段式算法为实时图形创作提供了一个低成本的纹理玻璃/浮雕方案理解其 5 个输入参数与着色器常量的一一对应关系再结合示例工程中的真实参数组合即可快速上手并在此基础上进行参数动画例如用 LFO 或随机调制 Displacement、Center产出动态的玻璃折射与浮雕变换效果。【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址: https://gitcode.com/GitHub_Trending/t3/t3创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考