ARTICLE DETAIL

资讯详情

深耕网站视觉设计与运营推广的一线实战洞察。

TiXL TimeDisplace 图像算子实战指南:基于纹理数组历史缓冲的时间位移特效

TiXL TimeDisplace 图像算子实战指南:基于纹理数组历史缓冲的时间位移特效 音视频图形学桌面应用【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址https://gitcode.com/GitHub_Trending/t3/t3点击查看免费下载TiXL 的TimeDisplace是Lib.image.fx.distort分类下的一种实时图像特效算子它不直接扭曲当前帧的像素而是借助一张由历史帧构成的**纹理数组Texture2D Array**作为时间缓冲区用置换贴图DisplaceMap决定从过去哪一帧取像素从而把时间本身变成可采样的维度。读完本文你将掌握该算子的工作原理、全部输入参数的取值与作用、DisplaceMode 四种置换模式的语义以及它背后由KeepInTextureArray与 HLSL 着色器组成的完整调用链可直接在 TiXL 节点图中搭建出时间拖影、时间冻结、时间扭曲等动效。一句话理解 TimeDisplace官方文档对它的定位非常简洁Uses a texture array history buffer to displace in time.利用纹理数组历史缓冲在时间维度上进行置换。它属于 Lib.image.fx.distort 分类与同目录下的Displace空间置换、DistortAndShade、PolarCoordinates等算子并列但处理维度不同普通 Displace 在 xy 空间移动采样坐标TimeDisplace 则在帧索引时间切片维度移动采样坐标。工作原理从空间采样到时间切片采样TimeDisplace 的完整实现由三部分协作完成历史缓冲写入内部子图使用KeepInTextureArray算子把每一帧的输入图像写入一张固定大小的Texture2DArray纹理数组数组中的每个切片slice就是过去某一时刻的一帧画面置换计算片元着色器读取DisplaceMap在当前位置的颜色值把亮度换算成一个整数偏移量slice offset时间切片采样用当前切片索引 偏移量对纹理数组做采样返回过去或未来某一帧的颜色。核心逻辑可以在着色器 TimeDisplace.hlsl 中直接看到Texture2DArrayfloat4 Image : register(t0); // 历史帧纹理数组 Texture2Dfloat4 DisplaceMap : register(t1); // 置换贴图 float4 psMain(vsOutput psInput) : SV_TARGET { float2 uv psInput.texCoord; float4 rgba DisplaceMap.SampleLevel(texSampler, uv, 0); int sliceOffset (int)floor(((rgba.r rgba.g rgba.b) / 3.0) * DisplaceAmount 0.5); int slice (SliceIndex sliceOffset) % ArrayLength; return Image.SampleLevel(texSampler, float3(uv, slice), 0); }关键点拆解亮度驱动偏移(r g b) / 3.0把置换贴图颜色压成 0~1 的灰度值乘以DisplaceAmount并四舍五入 0.5后floor得到一个整数切片偏移。也就是说贴图越亮的地方采样的历史帧离当前帧越远。环形取模(SliceIndex sliceOffset) % ArrayLength用取模把偏移量限制在数组长度内形成环形的时间缓冲写满后最老的帧会被覆盖。位移方向offset 为正时读取更早的帧具体时间方向取决于WriteIndex/ReadIndex的推进方式配合负的Displacement可反向偏移。历史缓冲KeepInTextureArray 的实现细节KeepInTextureArray.cs 是这套机制的底层支撑。它维护一块Texture2DArray在TriggerWrite为 true 时把当前输入帧通过CopySubresourceRegion复制到WriteIndex指向的切片ArraySize在运行时被.Clamp(1, 256)限制数组宽度、高度、格式必须与源纹理一致否则会触发重建needsRecreate分支写入索引与读取索引都通过.Mod(ArraySize)实现环形回绕内部同时暴露TextureArray整个数组与SelectedSlice单切片拷贝两个输出前者正是 TimeDisplace 着色器采样的对象。在 TimeDisplace 的算子图中KeepInTextureArray被配置为ArraySize 128、WriteIndex 2、ReadIndex 18、TriggerWrite true见 TimeDisplace.t3并通过CountInt/AddInt子算子驱动写入与读取索引随帧数递增。这意味着默认情况下最多保留 128 帧的历史足够支撑 2~4 秒视帧率而定的时间回溯窗口。输入参数全解TimeDisplace 共暴露 13 个输入参数以下为完整清单含类型、作用及来自 TimeDisplace.t3 的默认值参数名类型默认值作用ImageTexture2D必填—当前帧输入将被写入历史缓冲DisplaceMapTexture2D必填—置换贴图其亮度决定时间偏移量DisplaceModeInt320IntensityGradient置换模式见下文四种模式说明DisplacementSingle0.0时间置换强度对应着色器DisplaceAmount值越大偏移越明显DisplacementOffsetSingle0.0整体偏移基准对应着色器DisplaceOffset用于平移时间采样中心TwistSingle0.0扭曲参数传入着色器Twist可用于叠加旋转/扭动ShadeSingle0.0压暗效果强度文档描述 Darkens the effect对应着色器ShadeSampleRadiusSingle1.0采样半径控制时间采样的邻域范围DisplaceMapOffsetVector2(0, 0)置换贴图的 UV 偏移可让贴图在画面上滑动WrapModeTextureAddressModeMirrorOnce定义图像在边缘如何重复Clamp / Wrap / Mirror 等GenerateMipsBooleanfalse是否为输入生成 mipmap 链影响缩放采样质量与开销RGSS_4xAABooleanfalse启用旋转网格超采样 4x 抗锯齿Rotated Grid SupersamplingTextureFilteringFilterMinPointMagLinearMipPoint纹理过滤模式点采样/线性/各向异性等组合各输入的声明可在 TimeDisplace.cs 中核对其中DisplaceMode被MappedType typeof(DisplaceModes)映射为枚举编辑器会显示为下拉列表WrapMode、TextureFiltering直接使用 SharpDX 的TextureAddressMode与Filter枚举类型所有浮点参数通过MultiInputSlotfloat FloatParams聚合后传入着色器ParamConstantsDisplaceAmount / DisplaceOffset / Twist / ShadeDisplaceMode、RGSS_4xAA经BoolToInt转换则汇入IntParametersDisplaceMode / UseRGSSMultiSampling / SliceIndex / ArrayLength运行细节见 _multiImageFxSetupStatic.cs。DisplaceMode四种时间置换模式从 TimeDisplace.cs 的私有枚举可见DisplaceMode提供四种取值枚举值说明IntensityGradient默认索引 0基于亮度梯度驱动偏移画面明暗交界处产生连续的时间采样过渡适合做时间渐隐类效果Intensity直接基于亮度值驱动偏移明暗区域对应截然不同的历史帧产生硬边的时间断层NormalMap按法线贴图语义解释置换贴图适合用 RGB 法线方向做方向性时间置换SignedNormalMap有符号法线模式可表达正负两个方向的时间偏移实现双向的时间拖影需要说明的是当前版本的 TimeDisplace.hlsl 中psMain直接使用灰度均值计算偏移着色器内部虽声明了DisplaceMode、Twist、Shade等变量但尚未在像素着色器中做分支处理——这些参数目前被传入并保留在常量缓冲区中为后续扩展模式与自定义 shader 修改预留了接口。若需更复杂的置换行为可复制该 HLSL 文件并修改采样公式然后通过_multiImageFxSetupStatic的ShaderPath指向自定义 shader。算子内部结构一张图看懂调用链TimeDisplace.t3 记录了该算子的内部子图包含以下子算子CountInt / AddInt维护递增的帧计数同时驱动历史缓冲的写入索引与读取索引ArrayLength值为 128指定历史纹理数组的长度帧数KeepInTextureArray把Image输入写入 128 帧的环形历史缓冲输出整块TextureArrayBoolToInt把RGSS_4xAA布尔开关转换为着色器需要的整数参数Vector2Components把DisplaceMapOffset拆分为 x / y 两个浮点通道_multiImageFxSetupStatic以Lib:shaders/img/fx/TimeDisplace.hlsl为 shader 路径的通用多图特效宿主负责绑定两张输入纹理ImageA 历史纹理数组、ImageB DisplaceMap、传入浮点/整数参数、执行采样并输出结果Output。整个数据流为Image → KeepInTextureArray写历史→ TextureArray → _multiImageFxSetupStatic.ImageADisplaceMap → ImageB参数经FloatParams/IntParameters汇入最终由宿主输出Texture2D类型的Output声明见 TimeDisplace.cs 的SlotTexture2D Output。实战用法与调参建议基础时间拖影Echo接入实时视频或动画输出到Image用亮度渐变图或噪波图作DisplaceMap逐步提高Displacement画面会出现拖着过去帧尾迹的效果DisplacementOffset可整体前移或后移采样中心让尾迹偏向更早或更晚的帧。局部时间冻结让DisplaceMap大部分区域为黑偏移 0即当前帧只在目标区域放置亮斑亮斑处会采样到较早的历史帧形成只有局部停在过去的视觉效果。配合 WrapMode 控制边缘默认MirrorOnce会在边缘镜像重复避免明显接缝在无缝循环素材上可改用Wrap在全屏特效中常用Clamp防止边缘污染。性能取舍默认GenerateMips false、TextureFiltering MinPointMagLinearMipPoint追求清晰像素时可保持点采样若对历史帧做大比例缩放开启GenerateMips并切换为线性/mip 过滤可获得更平滑的结果代价是额外显存与生成开销。RGSS_4xAA可提升时间采样的抗锯齿质量但会带来约 4 倍的采样成本。历史长度与内存内部ArraySize固定为 128且KeepInTextureArray的运行时上限为 256KeepInTextureArray.cs 中Clamp(1, 256)。需要更长的时间窗口时可复制该算子图并调整ArrayLength但需注意显存占用随数组长度 × 分辨率线性增长。相关资源导航分类索引Lib.image.fx.distort 算子清单可对比Displace空间置换、DistortAndShade双层扭曲着色等同类特效算子定义TimeDisplace.cs输入/输出槽与 Guid、TimeDisplace.t3内部子图与默认值、TimeDisplace.t3ui界面布局着色器源码TimeDisplace.hlsl时间切片采样核心底层支撑KeepInTextureArray.cs历史纹理数组管理、_multiImageFxSetupStatic.cs多图特效宿主。以上就是 TiXL 中TimeDisplace从参数到原理、从子图到着色器的完整解读。把它与DisplaceMap的动画如滚动噪波、音频驱动的亮度贴图组合即可在实时演出中轻松获得随节奏变化的时间扭曲与拖影效果。赞分享音视频图形学桌面应用【免费下载链接】t3TiXL is an open source software to create realtime motion graphics.项目地址https://gitcode.com/GitHub_Trending/t3/t3点击查看免费下载相关推荐TiXL 的 SwapTextures 算子用纹理交换实现 Compute Shader 双缓冲反馈特效TiXL 的 SwapTextures 算子用纹理交换实现 Compute Shader 双缓冲反馈特效 SwapTextures 是 TiXLtooll3音视频图形学桌面应用TiXL DisplaceMesh 算子实战指南用纹理驱动网格顶点位移Lib.mesh.modifyTiXL DisplaceMesh 算子实战指南用纹理驱动网格顶点位移Lib.mesh.modify DisplaceMesh 是 TiXL实时动态图形音视频图形学桌面应用TiXL 算子深度解析SlidingHistory——用单像素纹理线滚动生成波形历史图像TiXL 算子深度解析SlidingHistory——用单像素纹理线滚动生成波形历史图像 SlidingHistory 是 TiXL 开源实时动态图形引擎中音视频图形学桌面应用创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考
返回列表