当前位置:首页 » 《随便一记》 » 正文

WebGL入门(023):WEBGL_compressed_texture_s3tc 简介、使用方法、示例代码

28 人参与  2024年09月12日 19:21  分类 : 《随便一记》  评论

点击全文阅读


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

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

在这里插入图片描述

文章目录

S3TC 简介WEBGL_compressed_texture_s3tc 扩展常量使用方法 示例代码注意事项结论


在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扩展的一般步骤如下:

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

示例代码

下面是一个使用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;}// 加载压缩纹理function loadCompressedTexture(url, format) {  const xhr = new XMLHttpRequest();  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应用程序的性能,尤其是在处理大量纹理时。然而,由于支持情况的不同,你应该始终检查扩展的可用性,并准备好备选方案。


点击全文阅读


本文链接:http://zhangshiyu.com/post/158999.html

<< 上一篇 下一篇 >>

  • 评论(0)
  • 赞助本站

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。

最新文章

  • 为了给我妈鸣冤,我在我爸六十大寿上毒翻全场(苏恒苏洛),为了给我妈鸣冤,我在我爸六十大寿上毒翻全场
  • 完结文老婆把女儿送给师弟练手后,后悔疯了列表_完结文老婆把女儿送给师弟练手后,后悔疯了(沈安姜向玉)
  • 白月光守寡后,夫君要纳她为妾留青赵恒完本_白月光守寡后,夫君要纳她为妾(留青赵恒)
  • 全书浏览妻子叫我转八十万给实习生(顾祁秦冉)_妻子叫我转八十万给实习生(顾祁秦冉)全书结局
  • 全文男友拿我的生活费给我开亲密付(夏染陈政)列表_全文男友拿我的生活费给我开亲密付
  • 大数据助力,我把妈妈告上法庭欣欣妈妈完本_大数据助力,我把妈妈告上法庭(欣欣妈妈)
  • 年薪百万后,我主动要求给穷光蛋生儿子(李明李小花)全书浏览_年薪百万后,我主动要求给穷光蛋生儿子全书浏览
  • 全书浏览年薪百万后,我主动要求给穷光蛋生儿子(李明李小花)_年薪百万后,我主动要求给穷光蛋生儿子(李明李小花)全书结局
  • 此生明月不照君全书萧景珩陆云峥林婉柔在线
  • 完结文老公说要和月嫂同住,我前男友打爆他的头列表_完结文老公说要和月嫂同住,我前男友打爆他的头(白薇沈皓)
  • 药店让我给老公的第二春赵毅完本_药店让我给老公的第二春(赵毅)
  • 地球停服后我在云端求生(庄语心贝克)_地球停服后我在云端求生庄语心贝克

    关于我们 | 我要投稿 | 免责申明

    Copyright © 2020-2022 ZhangShiYu.com Rights Reserved.豫ICP备2022013469号-1