一般的压缩方案

做移动平台,终究都是要考虑纹理压缩的问题

IOS/PVR平台上一般会选用PVRTC格式,这个格式压缩还是很给力。

Android上设备种类很多,支持的格式各有不同。如果平台能支持下载前检测设备来区分下载的APK,我们可以选择相应的压缩格式。但是很多平台都只要一个APK,我们就只能选择最稳妥的ETC1+Alpha方案了。

这个方案用过的应该都知道并不是特别好,首先肯定要生成两张图,然后压缩比还不错,但是压缩质量就有点不行了。在普通的纹理上用还可以,但是在UI这种要足够清晰的地方就有些尴尬。

思路

我想要解决的问题是怎么在保证一定的压缩比情况下,尽可能保证图像质量,给ETC1+Aplha找一个替换的方案。

一个彩色图片中到底那些对清晰度感受更重要?

一般的RGB图,三个通道是等价的,要压缩一起压缩。要损品质一起损,有没有其他的图片表达方式更适合压缩?

我做了这个使用YCrCb 2020标准的YUV转换,我觉得还可以,就是下图第二个。

效果图

第一次尝试,HSV方案

HSV就是用色调(H),饱和度(S),明度(V)来表示色彩的方式,具体的介绍HSV百度百科。在这种表达方式中保证H的精度就可以在最终的图上保证相当的显示效果,于是我们将其他通道都压缩一半的分辨率。对一个RGBA图来说转换成HSVA图能有7/16的压缩比,不是很高,但是已经是可以接受的了。

然后我们实验一下……

简直辣眼睛,这是什么鬼

将过滤模式改为point,之后这个现象变成了一些紫色的斑点,而且颗粒感好强。

进一步研究发现这时因为色相H的采样过滤造成的,色相一般是这个样子

展开成直线就变成了这样

最终我们时将h存入图片的一个通道上,也就是i这个直线的取值变成了0~1之间。然后我们从图上采样会发生什么呢?

设想像素A是偏黄的红色,取值应该是0.05左右。相邻的一个像素B是偏紫的红色,去只是0.95左右。

这时会发生什么?在双线性采样的时候中间的屏幕像素会被插值……然后两个像素中间就会变成一个小小的从红色到红色的彩虹

显然我们是不能接受point采样的效果,我们还得想想别的办法。

YUV方案

YUV就是使用色差进行颜色编码,由亮度信号Y和两个色差新号B-Y(即U)、R-Y(即V)组成。 YUV百度百科

Y这个亮度实际上是由RGB三个通道叠加出来的,显然保证Y基本就保证了清晰度。

这个YUV最早是给电视用的,经过了很多年发展,出了几代标准,更多的覆盖了色度空间上的颜色范围。

内圈是HDTV709,外圈是UHDTV2020

那么显然我们就用2020标准就好了。

实现YUV

RGBA图转换到YUVA图的工具

第一步就是如何生成YUVA图,这个显然让美术提供会有些强人所难,我们需要由一个自动化工具来做这件事情。

这种转换就是一次两个坐标系之间的坐标转换,重点就是生成正确的转换矩阵。这个矩阵要怎样生成我是靠wiki来解决的,感谢wiki。如果有兴趣可以自己去搜一下,代码里的注释也写了网址。

基本的流程:读取图片,转换成YUV,分通道压缩,生成纹理。

最后就是这个样子,反正能看代码,就不细说了。

最后这个invert matrix是为了写shader方便弄的,就是反转换矩阵。总不能在shader里面还每次都算一遍这个矩阵。

注意:其实还需要一个PostProcesser脚本,将所有生成的YUV图转成apha8格式,毕竟我们只需要一个通道。

显示Shader

这就真没啥可说的,分别采样4个图,然后用反转矩阵做一下乘法,就完事了。

可能的优化

采样4次,也是很废。实际上是可以变成采样两次的,Y一个alpha8图,UVA用一个RGB图。采样两次,压缩比还是7/16。

矩阵现在是写死在shader里面,也可以改成参数的,应该能快一点。

YUVA生成工具甚至可以改为之间修改material的,一劳永逸。

工程代码

git链接

换一个思路压缩图片,RGB转YUV的更多相关文章

  1. 推荐一个用于压缩图片的JS插件:localResizeIMG

    惯例,先贴传送门:https://github.com/think2011/localResizeIMG 首先说到,为嘛要压缩图片,这需求一般出现在需要上传照片(尤其是移动端)的情况下,现在手机拍出来 ...

  2. 弯道超车,换一个思路,避免addEventListener为同一个元素重复赋予事件

    addEventListener可以给同一个元素赋予多次同一个事件. 执行一次,就多一次事件效果.这不是我想要的. window.onload = function(){ var box = docu ...

  3. C# Winform版批量压缩图片程序

    需求 上周,领导给我分配了一个需求:服务器上的图片文件非常大,每天要用掉两个G的大小的空间,要做一个自动压缩图片的工具处理这些大图片.领导的思路是这样的: 1)打开一个图片,看它的属性里面象素是多少, ...

  4. 使用Python轻松批量压缩图片

    在互联网,图片的大小对一个网站的响应速度有着明显的影响,因此在提供用户预览的时候,图片往往是使用压缩后的.如果一个网站图片较多,一张张压缩显然很浪费时间.那么接下来,我就跟大家分享一个批量压缩图片的方 ...

  5. 多媒体编程基础之RGB和YUV

    一.概念 1.什么是RGB? 对一种颜色进行编码的方法统称为“颜色空间”或“色域”.用最简单的话说,世界上任何一种颜色的“颜色空间”都可定义成一个固定的数字或变量.RGB(红.绿.蓝)只是众多颜色空间 ...

  6. 关于RGB转换YUV的探讨与实现

    最近在Android手机上使用相机识别条形码工作取得了比较理想的进展,自动识别功能基本完成,然而在手动识别指定条形码图片时遇到困难,由于Zxing开源Jar包识别图片的颜色编码式为YUV,而普通的图片 ...

  7. 【厚积薄发】Crunch压缩图片的AssetBundle打包

    这是第133篇UWA技术知识分享的推送.今天我们继续为大家精选了若干和开发.优化相关的问题,建议阅读时间10分钟,认真读完必有收获. UWA 问答社区:answer.uwa4d.com UWA QQ群 ...

  8. 视音频数据处理入门:RGB、YUV像素数据处理

    ===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理 视音频数据处理 ...

  9. [转载] 视音频数据处理入门:RGB、YUV像素数据处理

    ===================================================== 视音频数据处理入门系列文章: 视音频数据处理入门:RGB.YUV像素数据处理 视音频数据处理 ...

随机推荐

  1. Caffe 源碼閱讀(四) Layer.hpp Layer.cpp

    1.Setup() Layer初始化参数 (1.完成层参数的读入.处理 2.设置底层顶层的shape,在前向传播前完成) InitMutex CheckBolbCounts: LayerSetup:d ...

  2. iredmail安装脚本分析(二)---get_all.sh 文件所在目录为PKGS

    经过上面的一系列分析后,进入到获取安装包的步骤,作者在此处单独写了一个脚本,get_all.sh,我们继续分析这个脚本 _ROOTDIR="$(pwd)" CONF_DIR=&qu ...

  3. pb将datawindow数据导出EXCEL

    PB有dw有自带功能可以将数据导出成excel,但是head却是字段名称,这样不直观. 所见即所得的方式是,将dw保存成html然后将后缀名改成xls,但这样的方式还有些问题就是会错列,解决的方法是将 ...

  4. (原创)jQuery Media Plugin-jQuery的网页媒体播放器插件的使用心得

    jQuery Media Plugin是一款基于jQuery的网页媒体播放器插件,它支持大部分的网络多媒体播放器和多媒体格式,比如:Flash, Windows Media Player, Real ...

  5. Kafka Shell基本命令(包括topic的增删改查)

    转载请注明出处:http://www.cnblogs.com/xiaodf/ 创建kafka topic 查看所有topic列表 查看指定topic信息 控制台向topic生产数据 控制台消费topi ...

  6. encode和decode的区别

    $octets = encode("iso-8859-1", $string);把一个串从perl内部格式转为iso-8859-1格式$string = decode(" ...

  7. python基础(1)

    一.应用 python应用:数据分析.组件集成.网络服务.图像处理.数值计算和科学计算. 使用python的企业:YouTube.dropbox.BT.Quora.豆瓣.知乎.google.Yahoo ...

  8. php-长文章分页函数

    <?php function ff_page($content,$page) { global $expert_id; $PageLength = 2000; //每页字数 $CLength = ...

  9. Git标签和别名管理

    一.Git标签管理 标签类似于快照功能,可以给版本库打一个标签,记录某个时刻库的状态,也可以随时恢复到该状态 例如给master打一个v1.0的标签 先切换到master分支上去git checkou ...

  10. 16个常用IO流

    在包java.io.*:下 有以下16个常用的io流类: (Stream结尾的是字节流,是万能流,通常的视频,声音,图片等2进制文件, Reader/Writer结尾的是字符流,字符流适合读取纯文本文 ...