用Shader模拟超分辨率,开箱即用

• 商店连接: 传送门

• 体验连接: 传送门

  
  限时优惠到2025/7/11

背景:
遇到了公司需求需要在H5中解码gif与webp动画转做序列帧，aka都知道js的软解码速度是很感人的， 而且我要解的动画尺寸是750x540,30帧，如果把图缩少50％，那麽解码速度是直线提升的，我就想能否在H5上使用类似DLSS的方法， 把一张低分辨率变成高分辨率，于是弄了这东西出来。

特点:
利用Lanczos-3插值算法＆拉普拉斯4邻锐化算法实现在图片拉大2~4倍时保持画质清晰

截屏2025-06-23 下午1.28.211023×770 168 KB

截屏2025-06-23 下午1.28.341023×770 265 KB

适合场景:

1. 受困于解码GIF与WEBP动画的，把图缩少50％，再用这shader变清晰
2. 受困于需要展示大列序帧图片，因为手机webgl只能接受4096x4096图片无奈只能使用接拼等方法展示， 这个shader可以一张图搞定。
3. 想减少内存，能接受画质有一掉掉下降的

使用教程

• 1. 将assets/SuperResoulation 目录拷贝到你的项目assets目录下
• 2. 接下有2种处理方法:
  • 使用在节点添加component, 选择RenderPlugin/SuperResoulation/SRSpriteExtender，控调 sharpness 参数控制锐化度。若节点没有 sprite，元件会自动添加 sprite 并添加相应的 material, 调整node的scale或修改content size。SRSpriteExtender已处理了sprite 的spriteFarme更变， dynamicAtlasManager合图变更事件，会自动更新material的sourceSize参数, 因此优先建议使用sprite.spriteFrame = newSpriteFrame方法，不要对老spriteFrame直接更改texture， 若真要如此， 需手动调用SRSpriteExtender内的函数updateTextureSize
  • 建立新的 Material，绑定 super-resoulation.effect后将material绑定到需要的sprite上 Material参数:

    sourceSize: 你的纹理尺寸
    sharpness: 锐利化因子(1-4), 一般2~2.5已足够.

• 3. 最佳实操: 将所有内容打到RenderTexture后绑定Sprite，然后Sprite使用本项目组件

在研究期间还找到一个AI超分辨率的H5项目， 有兴趣可以看看 传送门

其实是把CPU运算转到GPU。 强

mark!!!

66666666f啊

能合批不！

合批的话要把texture尺寸和锐化因子 以顶点参数传入， 这様不通用， 建议是直接把所有影像打到renderTexture 后再进行shader处理， 项目中有一个SRSpriteExtender, 直接挂载就会帮你自动传入纹理尺寸

其实锐化可以只做一次，把结果保存为纹理使用。
还是GPU解压缩。

不过要对比一下和直接使用压缩格式哪个更优