简介Unity线波模拟心电图上下振幅项目demo面向Unity初学者与游戏特效开发者提供可视化ECG线波效果波线速度、颜色与振幅均可自定义调整适合医疗模拟、数据可视化或交互式视觉场景。包体共6688个文件压缩包约39.19MB以C#脚本与Unity资源为主涵盖1066个cs脚本、1828个meta资源配置、575个png贴图、31个asset及5个prefab预制体等覆盖项目脚本、场景配置与图形资源可直接导入Unity工程运行调试。已有331人学习浏览。按键交互与动态参数调整机制为理解Unity网格渲染、材质颜色控制与时间动画等核心编程思路提供了直观参考案例。上手门槛低实测运行稳定既适合拿来即用也便于二次开发与学习拆解。1. Unity 线波模拟心电图 Demo振幅、速度、颜色全可调拖进场景就能跑做医疗设备界面、数据可视化 HUD或者游戏里的生命体征面板时最烦的就是「要一条心电图那样的波形线」。自己写吧三角波、正弦波调半天不像用插件吧一堆依赖。这个 Unity 线波模拟心电图效果的 demo 属于打开就能用的那一类波线速度、上下振幅、颜色全部在 Inspector 里暴露改完立即生效亲测 Unity 2018 以上的工程里都能跑。适合 UI 面板、2D 场景、3D 大屏甚至数字孪生看板里做装饰性生命体征显示。下面按拆项目的习惯从原理讲到踩坑把这条线怎么被画出来的讲透看完你也能自己改出想要的心电波形。2. 原理与选型为什么用 LineRenderer 逐帧改点而不是 Shader 采样2.1 波形生成的核心逻辑phase 累加与顶点重排任何一个波形动画本质上都是「让时间参与点的坐标计算」。波形线不是一整张贴图在滚动而是一排采样点在横轴上固定、纵轴随某个函数变化。心电图里的波不是纯正弦它由 P 波、QRS 波群、T 波组成每个部分频率和振幅都不同。所以GetWaveHeight不能只写一个Mathf.Sin得用多正弦叠加或者用分段函数去逼近。demo 默认是几个不同频率、不同振幅的正弦叠在一块P 波的小起伏、QRS 的尖峰、T 波的宽缓靠不同频率分量自然凑出来视觉上已经接近监护仪。void Update() { phase Time.deltaTime * speed; // 相位累加speed 决定流动速度 for (int i 0; i pointCount; i) { float t (float)i / (pointCount - 1); // 横坐标归一化到 0~1 float x (t - 0.5f) * lineLength; // 居中显示避免线偏出视野 float y GetWaveHeight(t, phase) * amplitude; // 振幅乘在函数外侧 positions[i] new Vector3(x, y, 0f); } lineRenderer.SetPositions(positions); // 顶点一次性提交 }这段代码有三个设计点。第一phase只增不减波形默认从左到右流动想反向就把speed设成负值。第二amplitude乘在波形函数外面意味着所有波峰等比例缩放调振幅时波形形状不塌只是整体长高变矮符合直觉。第三用SetPositions一次提交整个数组比循环调用SetPosition少一截 API 开销波型点数到 256 时差距能感觉得到。还有个小细节长时间挂着不关phase会一直涨。浮点数的精度在值很大时会下降导致波形出现肉眼可见的抖动。常见做法是给 phase 做个取模比如phase % 10000f一天跑下来数值也不会溢出精度范围。这个属于不写也行、写了更稳的边际优化我在正式项目里都会带上。2.2 为什么是 LineRenderer 而不是 Shader性能、可读性与移动端友好另一条常见路线是着色器方案建一个细长的平面网格在片元着色器里按 UV 采样高度函数做顶点偏移。这条路能渲染出非常精细的波形纹理适合「整片心电图屏幕」的效果但对一个参数要全开放、要随手改的 demo 来说代价很大——要维护 Shader 文件要处理内置管线与 URP 的兼容差异参数要从 C# 传到材质属性调试链路长一大截。资源本身没走这条路选 LineRenderer 是有道理的。LineRenderer 方案把这些麻烦全压了下去状态全部暴露在 Inspector参数就是 C# 字段运行时Debug.Log就能看到中间值。性能上只要管住两点——点数量别超几百、每帧别 new 数组——移动端毫无压力。给个对比表供你选型时判断维度LineRenderer 方案Shader 方案修改成本改 C# 字段即时生效改材质参数重启着色器编译兼容性内置管线/URP/HDRP 通用管线间材质不通用性能瓶颈顶点数与 GC 分配采样次数与填充率扩展上限适合线条类波形可做纹理级复杂效果放到实际项目里生命体征线、告警波形、音频可视化这类需求LineRenderer 足够等哪天要做整屏像素级心电图纹理再切 Shader 不迟。移动端上尤其要注意Shader 方案如果没做好纹理采样优化发热和耗电会比逐帧改 LineRenderer 顶点更难看。2.3 宽度、颜色与坐标三个常被忽略的属性widthMultiplier、colorGradient、useWorldSpace这三个属性 demo 里都暴露了但很多人只调前两个。useWorldSpace默认是 true点的坐标按世界坐标算波形放进 Canvas 做 UI 时如果忘记改成 false坐标会被父级 Canvas 的 scale 再乘一遍波形直接飞出屏幕表现就是「波形烂成一团」。记住一句话场景显示用 trueUI 显示用 false没有第三种情况。颜色渐变是心电图观感的关键。打开 LineRenderer 的 Color 属性渐变编辑器默认是一条从左到右的色带起点终点各一个色标。你可以中间加色标把 QRS 高峰对应的位置调成偏青白的高亮其余部分保持半透明蓝播放起来就是荧光屏脉冲感。这个操作在编辑器里两分钟完成对观感提升比调任何数字都明显。如果线边缘出现奇怪的半透明叠加检查 LineRenderer 的 textureMode改成 Stretch 而不是 Tile否则颜色会被纹理平铺切割。参数作用建议值speed波线水平流动速度1.0~3.0amplitude上下振幅0.5~2.0pointCount波形采样点数64~256widthMultiplier线宽0.03~0.06frequency波形疏密8~20useWorldSpace坐标空间场景 trueUI false这张参数表是我反复试出来的起步区间不保证一次到位但能让你从零状态快速拉到一条能看的波形后续微调靠眼睛就行。3. 场景落地导入、挂载、坐标与参数面板一次走通3.1 导入方式与工程目录说明资源解压后是标准 Unity 工程结构Assets 下有 Scripts、Prefabs、Materials 三个目录没有第三方包依赖。两种接入方式看现状空工程直接用 Hub 的 Add 按钮选到工程根目录打开已有业务工程把三个目录拷进自己工程的 Assets 即可脚本清一色 C#编译通过就能用不用改任何 Player Settings。Prefabs 目录里已经放好一个组装好的波形物体嫌手动搭麻烦的直接从 Project 窗口拖进场景比手动挂组件快得多。提示别把脚本拖进 Editor 目录下。Editor 下的脚本只在编辑器环境生效发布到 Android 或 WebGL 后波形会静默消失而且不报错这种问题最难定位。版本上demo 面向 Unity 2018 LTS 到 2022 LTS 都验证过。如果用新版 Unity 且工程开了 Input System 的新输入模式注意脚本里如果用了老Input接口需要在 Player Settings 里把 Active Input Handling 设为 Both否则运行时日志会刷输入异常。波形本身不受影响但这条日志会干扰你排查其他问题建议直接改掉。3.2 最小场景搭建空物体、挂脚本、拉引用新建场景后四步走创建空物体 WaveRoot挂 LineWaveController创建子物体 WaveLine挂 LineRenderer把 WaveLine 拖到脚本的 lineRenderer 字段给 LineRenderer 指定材质。默认的 Sprite-Default 能跑追求干净线条就新建一个 Unlit/Color 材质。脚本里建议做两层兜底这样无论先建物体还是先挂脚本引用都不会断public LineRenderer lineRenderer; void Reset() { // 挂脚本瞬间自动寻找子物体上的 LineRenderer lineRenderer GetComponentInChildrenLineRenderer(); } void Awake() { if (lineRenderer null) lineRenderer GetComponentInChildrenLineRenderer(); }Reset()是编辑器回调组件被挂上时自动执行一次Awake是运行时兜底。两个都写团队里新手复制物体时把引用复制丢了运行时也能自己找回来。材质这一步容易出问题LineRenderer 用默认粒子材质时线条边缘会有光晕和透明混合。建议建一个材质Shader 选 Unlit/Color颜色设白这样波形颜色就完全由 colorGradient 控制不会混进材质本身的颜色。3.3 相机、坐标系与 UI 场景的适配波形默认在 X-Y 平面Z 为 0正交相机下只要在视野内就显示。透视相机要留意两点WaveRoot 要放在相机前方别让波线被视锥裁剪距离相机太近线宽会显得很粗太远又细到看不见。建议先用正交相机调参最后切回透视相机摆位置中间不要反复切容易把视野判断搞乱。做 UI 场景时常见做法是把 WaveRoot 放到 Canvas 下LineRenderer 的 useWorldSpace 设 false波形坐标变成相对父物体的局部坐标。此时注意 Canvas 的 Render Mode——Screen Space - Overlay 模式下 Canvas 的缩放不是 1:1波形长度要按参考分辨率等比换算。参考分辨率是 1920×1080你想要的波形宽度是 400 像素就把 lineLength 按400f / canvasScaler.referenceResolution.x * 2f量级换算具体比例看你的缩放模式没有标准公式屏幕实测最快。3.4 参数面板波形怎么在整个生命周期里被控制Inspector 上的字段设计是 demo 做得顺手的地方。振幅和线宽做成滑条速度做输入框Play 模式下直接拖、直接改下一帧立即生效不需要停掉重跑。滑条适合连续调整找手感输入框适合定精确值两者混用比全用滑条高效。建议把参数在 Inspector 里分好组接手的人不懵。一般这样分波形形态一组frequency、wavePerBeat、pointCount运动一组speed、direction外观一组amplitude、widthMultiplier、colorGradient。分组只是[Header]特性的事两分钟加上省掉后续大量沟通成本。验证接入是否成功也有两个很快的办法Play 模式下看波形是否在动以及切到 Scene 视图选中 WaveLine 看 LineRenderer 的顶点预览是否跟手。两条都过说明这条链路是通的。4. 三种自定义玩法Inspector 直调、数据驱动、替换波形函数4.1 Inspector 直调一分钟调出监护仪风格如果只是要一屏「像那么回事」的心电波形最快的路径是纯编辑器操作colorGradient 起点设半透明红、终点设近全透明红speed 拉到 1.5amplitude 拉到 1.8widthMultiplier 设 0.04frequency 调到 12 左右让 QRS 疏密接近真实心率。播放后就是典型床边监护仪的观感整个过程两分钟不写代码适合给客户演示、给策划过目。如果你要的颜色是团队规范里的品牌色直接在渐变编辑器里输入十六进制值就行别靠肉眼拖。4.2 数据驱动把波形接到游戏状态或业务数据上参数全暴露在 Inspector 方便是方便但产品里不能指望运行时有人手拖。更合理的接法是暴露语义化接口内部把业务量换算成波形参数。比如心率联动public void SetHeartRate(float bpm) { // 每分钟心跳数 → 每秒相位增量 speed bpm / 60f * wavePerBeat; }wavePerBeat表示一个完整心跳周期占几个归一化横轴单位取值 0.8~1.2。bpm 60 时 speed 约等于 1.0波形平稳缓慢bpm 拉到 140相位累加速度翻倍多视觉上立刻变急促。这个接口在游戏 HUD 和数字孪生大屏的告警联动里都实用。注意接口内部加 clamp比如Mathf.Clamp(bpm, 30f, 220f)防止异常值把波形刷成满屏高频振动。不加这一行数据源出一次脏值画面直接崩给你看。4.3 替换波形函数从叠加正弦到分段心电形态想要更接近真实心电把波形函数从多正弦叠加换成时间分段函数。一段心跳周期大致划分P 波小幅圆峰 → QRS 波群陡峭尖峰 → T 波宽缓波 → 静息段。代码如下float GetWaveHeight(float t, float phase) { float tp (t * wavePerBeat phase) % 1f; // 映射到一个心跳周期内 if (tp 0.12f) return Mathf.Sin(tp / 0.12f * Mathf.PI) * 0.3f; // P 波小幅圆峰 if (tp 0.28f) return QRS(tp); // QRS陡峭波群 if (tp 0.5f) return Mathf.Cos((tp - 0.28f) / 0.22f * Mathf.PI) * 0.25f; // T 波缓波 return 0f; // 静息段 }tp用% 1f取余落入 0~1配合流动中的phase波就横轴循环滚动0.12、0.28、0.5 分别是 P 波结束、QRS 结束、T 波结束的阈值改这三个数就能改变波形节奏。QRS()可以继续细分成两段半正弦一段模拟 Q 波下冲、一段模拟 R 波上冲视觉上跟单峰的差距肉眼可辨。替换函数的好处是接口不变相位累加、振幅缩放、颜色渐变全部复用把上面这段粘进脚本其余逻辑一行不用改。如果团队里有美术想自己调波形形状还有一个偷懒的办法用 AnimationCurve 当波形模板。Inspector 上画一条多段曲线运行时按时间采样曲线高度效果跟分段函数一样但编辑门槛更低——不需要写代码谁都能在曲线编辑器里拖出一个心电形状。一帧采样几百个点AnimationCurve 的Evaluate开销可以忽略。5. 避坑记录心电图波形常见的五类翻车与排查5.1 波形方向反了R 峰往左跑现象播放后波形整体从右往左流动和监护仪从左到右的习惯相反。原因phase 累加方向与横坐标映射方向叠加后出现视觉反向属于方向约定不一致不报错、不影响画面质量但是联调最后才容易被注意到。解决把phase Time.deltaTime * speed改成phase -或者把归一化横坐标t换成1f - t。两处只改一个都改等于没改方向又翻回去。改完立刻确认一次别等过一天再回来看。5.2 振幅拉大后波形变锯齿现象amplitude 调高之后波峰不再顺滑出现折线感。原因pointCount 固定时振幅放大意味着相邻采样点的 Y 值落差跟着变大LineRenderer 的直线段连接就把棱角暴露了。解决优先把 pointCount 提到 256想波形更稀一点就同步降低 frequency。更省事的是做振幅与频率联动振幅改变时执行frequency baseFrequency * (1f amplitude * 0.3f)从源头避开「波形密且尖」的组合。注意给 baseFrequency 留一个合理基线不然频率会被带偏到不可控范围。5.3 波形发虚、边缘模糊现象Scene 视图里线条干净游戏视图或真机上边缘发虚、有锯齿。原因LineRenderer 默认材质带纹理采样线宽又细边缘锯齿被纹理放大相机侧不开 MSAA 或抗锯齿被后处理覆盖时问题更明显。解决材质换成 Unlit/Color 关闭纹理干扰线宽不小于 0.03相机开 MSAA 2x 或 4x。别指望后期全屏抗锯齿给 LineRenderer 兜底线和多边形几何的走样来源不同后处理救不了它。排查顺序固定先材质、再线宽、最后相机 AA按这个顺序不会来回白折腾。5.4 长时间运行内存缓步上涨现象运行几分钟Profiler 的 GC Alloc 曲线缓慢向上波形本身没异常。原因典型写法问题——在 Update 里new Vector3[pointCount]或每帧往ListVector3里 Add每次分配都在堆上产生垃圾。解决数组在 Awake 里一次性分配Update 只改数组内容pointCount 需要动态变化时改完调一次lineRenderer.positionCount pointCount触发重建继续复用数组。用 Memory Profiler 录制十秒按 Allocated 排序分配热点一眼看见。这条对同时挂多条波形的场景尤其重要一条线不漏十条线叠加就是肉眼可见的卡顿。5.5 改了 amplitude 波形纹丝不动现象Inspector 上拖滑条播放中的波形没有任何反应。原因场景里存在两个同名的波形物体Inspector 改的是 A 上的字段波形渲染用的是 B 上的组件或者 LineRenderer 被 Animator、Timeline 之类的动画系统驱动Inspector 改的值被动画每帧覆盖。解决暂停播放确认场景层级里选中的 WaveRoot 就是正在渲染波形的那个再看波形物体上有没有挂 Animator 或 Timeline。按这两条顺序排查基本十分钟内定位。这是所有问题里最费时间的因为它不报错、无日志只能靠检查层级关系。6. 让波形更有「心电图味」平滑插值、基线漂移与亮度渐变真实心电图的质感不是一条光滑正弦而是带轻微毛刺、基线缓慢漂移、QRS 尖锐和 T 波圆润并存的复合形态。想让 demo 从「实验效果」变成「能放进产品」我一般加三样东西。第一低频噪声叠加模拟基线漂移。Mathf.PerlinNoise(t * 0.3f, phase * 0.1f)返回 0~1 的值减去 0.5 后乘以 0.05 量级的系数加到 Y 坐标上整条线就有电极贴在皮肤上的细微晃动感。系数控制在 0.03~0.08再大就变成随机噪声了。y (Mathf.PerlinNoise(t * 0.3f, phase * 0.1f) - 0.5f) * 0.05f;第二点数量提到 256并在波形函数返回前对相邻采样做一次 SmoothStep 插值抹平陡峭段的棱角第三在渐变编辑器里给 QRS 区间对应的顶点位置加高亮色标模拟荧光屏的脉冲亮度。从那次以后我每次拿到这类波形 demo 都强制走一遍先开 Play 跑三十秒看内存曲线再关掉确认波形没有残留亮度然后才谈观感怎么调。这套顺序帮我挡掉了不少「Demo 里好好的一进项目就完蛋」的坑。这个 demo 的骨架是稳的接数据、换波形函数、嵌 UI 都不会碰到底层问题希望帮到你。本文还有配套的精品资源点击获取
