WebGL入门（023）：WEBGL_compressed_texture_s3tc 简介、使用方法、示例代码

还是大剑师兰特：曾是美国某知名大学计算机专业研究生，现为航空航海领域高级前端工程师；CSDN知名博主，GIS领域优质创作者，深耕openlayers、leaflet、mapbox、cesium，canvas，webgl，echarts等技术开发，欢迎加底部微信（gis-dajianshi），一起交流。

No.内容链接1Openlayers 【入门教程】 - 【源代码+示例300+】 2Leaflet 【入门教程】 - 【源代码+图文示例 150+】 3Cesium 【入门教程】 - 【源代码+图文示例200+】 4MapboxGL【入门教程】 - 【源代码+图文示例150+】 5前端就业宝典 【面试题+详细答案 1000+】

文章目录

在WebGL中，

WEBGL_compressed_texture_s3tc

是一个扩展，它允许使用S3TC（S3 Texture Compression）压缩纹理格式。S3TC是一种常用的纹理压缩技术，主要用于减少纹理占用的显存空间，同时保持合理的图像质量。

S3TC 简介

S3TC（S3 Texture Compression）是一种块压缩技术，最初由S3 Graphics开发，后来被广泛采用。它将纹理数据压缩为更小的块，减少了内存带宽的需求，并且可以显著降低GPU内存占用。

S3TC有两种主要的压缩格式：

• **DXT1 (BC1)**：每像素使用16位（4bpp），适用于没有Alpha通道的纹理。
• **DXT3 (BC2)**：每像素使用32位（8bpp），适用于具有非压缩Alpha通道的纹理。
• **DXT5 (BC3)**：每像素使用32位（8bpp），适用于具有压缩Alpha通道的纹理。

WEBGL_compressed_texture_s3tc 扩展

WEBGL_compressed_texture_s3tc

扩展为WebGL提供了对S3TC压缩纹理的支持。该扩展定义了几个新的常量，用于指定S3TC压缩格式，并且提供了一些方法来加载和使用这些压缩纹理。

常量

以下是

WEBGL_compressed_texture_s3tc

扩展中定义的一些重要常量：

• COMPRESSED_RGB_S3TC_DXT1_EXT: 对应于DXT1的RGB压缩格式。
• COMPRESSED_RGBA_S3TC_DXT1_EXT: 对应于DXT1的RGBA压缩格式（Alpha通道为透明度1或0）。
• COMPRESSED_RGBA_S3TC_DXT3_EXT: 对应于DXT3的RGBA压缩格式。
• COMPRESSED_RGBA_S3TC_DXT5_EXT: 对应于DXT5的RGBA压缩格式。

使用方法

使用

WEBGL_compressed_texture_s3tc

扩展的一般步骤如下：

1. 检测扩展：首先确保浏览器支持该扩展。
2. 加载压缩纹理：使用compressedTexImage2D方法加载压缩纹理数据。
3. 设置纹理参数：设置纹理过滤、包裹等参数。

示例代码

下面是一个使用

WEBGL_compressed_texture_s3tc

扩展加载压缩纹理的基本示例：

const canvas = document.getElementById('my-canvas');const gl = canvas.getContext('webgl2',{antialias:true});// 检测扩展const s3tc = gl.getExtension('WEBGL_compressed_texture_s3tc');if(!s3tc){
  console.error('S3TC extension not supported.');return;}// 加载压缩纹理functionloadCompressedTexture(url, format){const xhr =newXMLHttpRequest();
  xhr.open('GET', url,true);
  xhr.responseType ='arraybuffer';
  
  xhr.onload=function(){if(xhr.status ===200){
      gl.activeTexture(gl.TEXTURE0);const texture = gl.createTexture();
      gl.bindTexture(gl.TEXTURE_2D, texture);// 设置纹理参数
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MIN_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_MAG_FILTER, gl.LINEAR);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_S, gl.CLAMP_TO_EDGE);
      gl.texParameteri(gl.TEXTURE_2D, gl.TEXTURE_WRAP_T, gl.CLAMP_TO_EDGE);// 加载压缩纹理数据
      gl.compressedTexImage2D(gl.TEXTURE_2D,0, format,256,256,0, xhr.response);// 使用纹理
      gl.uniform1i(textureLocation,0);// 假设 textureLocation 已经正确设置}};
  
  xhr.send();}// 假设你有一个压缩纹理文件的URLconst compressedTextureUrl ='path/to/compressed-texture.dds';loadCompressedTexture(compressedTextureUrl, s3tc.COMPRESSED_RGBA_S3TC_DXT5_EXT);

注意事项

• 确保你的纹理文件是以S3TC格式压缩的，常见的文件格式有.dds。
• 浏览器和GPU支持可能会有所不同，因此最好检查扩展是否可用。
• 如果你的项目需要跨平台兼容性，请考虑使用其他纹理压缩格式，如ETC1或ASTC，这些格式在不同的设备和浏览器中可能有更好的支持。

结论

使用

WEBGL_compressed_texture_s3tc

扩展可以显著提高WebGL应用程序的性能，尤其是在处理大量纹理时。然而，由于支持情况的不同，你应该始终检查扩展的可用性，并准备好备选方案。