S3TC(S3 Texture Compression)纹理压缩格式详解
使用S3TC格式存储的压缩纹理是以4X4的纹理单元块(texel blocks)为基本单位存储的,每纹理单元块(texel blocks)有64bit或者128bit的纹理单元数据(texel data)。这样就要求每张贴图长度和宽度应该是4的倍数。图像如同一般的做法按照行列顺序存放这些4X4的纹理单元块(texel blocks),每个texel blocks被看成是一个图像的“像素”。对于那些长度不为4的倍数的贴图,多出来的那些纹理单元在压缩的时候要么舍弃不被放到图像中或者不足4的会被补上空位按4处理。
对于一个长度为w,宽为h,并且块大小为blocksize的图像,它的大小为(用字节计算)
ceil(w/4) * ceil(h/4) * blocksize
在解码一个S3TC图像的时候,可以通过下面的式子得到一个纹理单元(x,y)所位于的块的地址(用字节计算)
blocksize * (ceil(w/4) * floor(y/3) + floor(x/4))
通过纹理单元(x,y)获得它所处于的块的下标:
(x % 4 , y % 4)
有4种不同的S3TC图像格式:
1.COMPRESSED_RGB_S3TC_DXT1_EXT
每个4X4的纹理单元块包含8个字节的RGB数据,也就是说每个图像块被编码为顺序的8个字节(64bit),按照地址的顺序,它们分别是:
c0_lo,c0_hi,
c1_lo,c1_hi,
bits_0,bits_1,bits_2,bits_3
块的8个字节被用来表达3个量:
color0 = c0_lo + c0_hi * 256
color1 = c1_lo + c1_hi * 256
bits = bits_0 + 256 * (bits_1 + 256 * (bits_2 + 256 * bits_3))
color0和color1是16位的无符号整数,用来表达颜色,格式是RGB - UNSIGNED_SHORT_5_6_5。分别用RGB0和RGB1来表示
bits是一个32位的无符号整数,从bits可以求出位于(x,y)的纹理单元的2位控制码:(x,y介于0-3之间)
code(x,y) = bits[2 * (4 * y + x) + 1..2 * (4 * y + x) + 0] 即,2 * (4 * y + x) + 1位和2 * (4 * y + x)位
bits的第31位是高位,第0位是低位
这样可以求出位于(x,y)的纹理单元的RGB值:
RGB0, if color0 > color1 and code(x,y) == 0
RGB1, if color0 > color1 and code(x,y) == 1
(2*RGB0+RGB1)/3, if color0 > color1 and code(x,y) == 2
(RGB0+2*RGB1)/3, if color0 > color1 and code(x,y) == 3
RGB0, if color0 <= color1 and code(x,y) == 0
RGB1, if color0 <= color1 and code(x,y) == 1
(RGB0+RGB1)/2, if color0 <= color1 and code(x,y) == 2
BLACK, if color0 <= color1 and code(x,y) == 3
这些算术运算都是矢量运算,分别对各个分量R,G,B进行计算。BLACK=RGB(0,0,0)
这种格式的S3TC图像不含有Alpha,所以整个图像都是不透明的
2.COMPRESSED_RGBA_S3TC_DXT1_EXT
每个4*4块包含8字节的RGB颜色和最小限度的Alpha透明度数据,颜色数据的提取方式和COMPRESSED_RGB_S3TC_DXT1_EXT是完全一样的,区别在于Alpha数据:
对于(x,y)处纹理单元的Alpha值,计算方式如下:
0.0, if color0 <= color1 and code(x,y) == 3
1.0, otherwise
注意:
首先,把一个RGBA图像压缩成为只含有1位Alpha的压缩格式,所有Alpha<0.5的像素的Alpha值被置为0.0,而Alpha>=0.5的像素的Alpha值被置为1.0. 而把一个RGBA图像压缩成为COMPRESSED_RGBA_S3TC_DXT1_EXT格式的时候。
其次,如果某个纹理单元最终的Alpha为0.0,那么此纹理单元的R,G,B颜色值都将被置为0.
最后,对于是用此格式的应用,必须遵守这个规则。另外,当一个通用的内部格式被指定后,也许可以使用COMPRESSED_RGB_S3TC_DXT1_EXT格式,但不允许使用COMPRESSED_RGBA_S3TC_DXT1_EXT(应该跟OpenGL有关系)
3.COMPRESSED_RGBA_S3TC_DXT3_EXT
每个4*4块中包含64bit的未压缩Alpha数据和64bit的RGB颜色数据,其中颜色数据按照和COMPRESSED_RGB_S3TC_DXT1_EXT一样的方式编码,唯一的区别在于2位控制码被以不明显的方式编码,换句话说,就像知道Color0 > Color1,而不需要知道Color0和Color1的具体值。
每个块的纹理单元的Alpha值被顺次编码为8个字节:
a0, a1, a2, a3, a4, a5, a6, a7
通过这8个字节可以得到一个64位的无符号整数:
alpha = a0 + 256 * (a1 + 256 * (a2 + 256 * (a3 + 256 * (a4 + 256 * (a5 + 256 * (a6 + 256 * a7))))))
高位是63位,低位是0位
通过这个alpha就可以获得位于(x,y)处纹理单元的Alpha值
alpha(x,y) = bits[4*(4*y+x)+3..4*(4*y+x)+0]
4位数字所能表示的最大值是15,所以折算到[0.0,1.0],Alpha = alpha(x,y) / 15
4.COMPRESSED_RGBA_S3TC_DXT5_EXT
每个4*4块中包含64bit的压缩过的Alpha数据和64bit的RGB颜色数据,颜色数据部分压缩方式和COMPRESSED_RGBA_S3TC_DXT3_EXT完全一致。
Alpha数据是8个字节的压缩数据,这8个字节:
alpha0, alpha1, bits_0, bits_1, bits_2, bits_3, bits_4, bits_5
其中alpha0和alpha1为unsigned char类型数据,转化为实际的Alpha值需要乘上 1 / 255.0
其他的6个数字bits_N,则可以被解码成为一个48位的无符号整数
bits = bits_0 + 256 * (bits_1 + 256 * (bits_2 + 256 * (bits_3 + 256 * (bits_4 + 256 * bits_5))))
通过bits(高位47低位0),可以求得位于(x,y)纹理单元的3位控制码:
code(x,y) = bits[3*(4*y+x)+1..3*(4*y+x)+0]
根据bits、code(x,y)、alpha0以及alpha1就可以求得(x,y)处纹理单元的Alpha值:
alpha0, code(x,y) == 0
alpha1, code(x,y) == 1
(6*alpha0 + 1*alpha1)/7, alpha0 > alpha1 and code(x,y) == 2
(5*alpha0 + 2*alpha1)/7, alpha0 > alpha1 and code(x,y) == 3
(4*alpha0 + 3*alpha1)/7, alpha0 > alpha1 and code(x,y) == 4
(3*alpha0 + 4*alpha1)/7, alpha0 > alpha1 and code(x,y) == 5
(2*alpha0 + 5*alpha1)/7, alpha0 > alpha1 and code(x,y) == 6
(1*alpha0 + 6*alpha1)/7, alpha0 > alpha1 and code(x,y) == 7
(4*alpha0 + 1*alpha1)/5, alpha0 <= alpha1 and code(x,y) == 2
(3*alpha0 + 2*alpha1)/5, alpha0 <= alpha1 and code(x,y) == 3
(2*alpha0 + 3*alpha1)/5, alpha0 <= alpha1 and code(x,y) == 4
(1*alpha0 + 4*alpha1)/5, alpha0 <= alpha1 and code(x,y) == 5
0.0, alpha0 <= alpha1 and code(x,y) == 6
1.0, alpha0 <= alpha1 and code(x,y) == 7
技术规范链接


- 相关文章
WebAssembly工作原理和JavaScript语言性能对比分析
本文简单说明WebAssembly(简称wasm)工作原理和高性能的原由(和JavaScript相比)。不过需要提醒的是Wasm并非设计来完全替代JS,而是对JS的一个强大补充,JS中...
CSS3属性选择器特性使用详解
CSS3除了引入动画、滤镜(用于特效)以及新的布局技术外,在选择器(selector)方面也有增强。属性选择器根据元素的属性(attributes)来匹配。这可以是一个单独...
CSS3特性查询(Feature Query: @supports)功能简介
这是2017年不能不了解和学习的一个CSS新特性,非常实用,考虑到现实世界浏览器的复杂性,该特性本应该先于其他新特性出来。我们已经知道使用媒体查询(Media Que...
JavaScript事件模型图解
在JavaScript中用户交互的核心部分就是事件处理。本文为对事件模型和处理机制的总体性描述。Event是什么?
event是用户操作网页时发生的交互动作,比如clic...NodeJS、Java和PHP性能考量和若干参考结论
首先需要说明的是,严格而言NodeJS和Java、PHP并非对等概念,NodeJS是基于JS的一个应用程序,而Java/PHP是语言。我们这里实际指的是分别使用node、java和php来实...
HTML5动画背后的数学 - 粒子群仿生算法简介
本站收录了多个算法可视化动画,如模拟鸟群运动:http://wow.techbrood.com/fiddle/30529等等。这里面除...
如何使用Three.js加载obj和mtl文件
OBJ和MTL是3D模型的几何模型文件和材料文件。在最新的three.js版本(r78)中,以前的OBJMTLLoader类已废弃。现在要加载OBJ和MTL文件,需要结合OBJLoader和MTLLoade...
WebGL入门教程3 - Canvas、Context、API和绘制一个矩形
HTML网页布局:静态、自适应、流式、响应式
静态布局(Static Layout)即传统Web设计,对于PC设计一个Layout,在屏幕宽高有调整时,使用横向和竖向的滚动条来查阅被遮掩部分;对于移动设备,单独设计一个布...
如何使用CSS3实现一个平滑的3D文本标题
要实现3D文本,基本上有3种方法:1. 使用CSS3的投影滤镜(filter: drop-shadow)2. 使用3d建模和CSS3 3d变换来实现(最真实)3. 使用CSS3 text-shadow属性来实现...
如何使用CSS3实现书页(书本)卷角效果
我们有时候想在页面显示一个公告或用户提示信息。一个常用设计是使用书签形状。我们可以给书签添加卷角效果,以使其更为逼真。所谓的“卷角”实际上可以用小角度...
在PHP网页程序中执行Sass/Compass命令
我们需要在wow云开发平台支持sass/compass等预编译样式语言,为此我们首先尝试了scssphp扩展,但是在支持最新语法上,经常会出现异常。所以我们采用了代理的方式...
更多...