Three.js - 加载 DDS 格式的纹理

最新推荐文章于 2024-06-28 21:06:00 发布

「已注销」

最新推荐文章于 2024-06-28 21:06:00 发布

阅读量4.7k

点赞数

分类专栏： threejs

本文链接：https://blog.csdn.net/ithanmang/article/details/82421134

版权

本文介绍了DDS纹理格式，一种由Microsoft提出的纹理压缩格式，旨在减少内存和显存占用，提高性能。文章详细阐述了DDS的压缩优势，并通过Three.js展示了如何加载DDS格式的纹理，包括加载器的引入和加载步骤。同时，提供了示例链接供读者参考。

摘要由CSDN通过智能技术生成

1、DDS纹理格式

首先，图片转换成dds格式，占用磁盘会变大，但是转换成dds格式之后架加载到内存和显存的占用量会变小。

1.1、dds格式简介

DDS格式要追述到S3(Silicon & Software Systems)公司提出的一种纹理压缩格式S3TC(S3 Texture Compression)，其目的是通过对纹理的压缩, 以达到节约系统带宽并提高效能的目的.。

S3TC就是通过压缩方式, 利用有限的纹理缓存空间来存储更多的纹理, 因为它支持6:1的压缩比例, 所以6M的纹理可以被压缩为1M存放在材质缓存中, 从而在节约了缓存的同时也提高了显示性能. 后来的DXTC和FXT1都是与S3TC类似的技术, 它们分别是微软和3dfx开发的纹理压缩标准,FXT1能提供比S3TC更高的压缩比, 达到8:1, 同时它也在3DFX新版本的Glide中得到支持。

DXTC是1999年微软从S3公司取得S3TC的授权后更名而来的, 并在DirectX6中提供了支持, 即使用户的图形硬件不能支持S3TC, DirectX API会自动解码压缩后的纹理贴图. 压缩纹理贴图可以使用高品质的离线压缩器, 不会造成加载程序时有很多延时, 而DDS文件就可以使用DXTC方式压缩或是存储未压缩的像素格式。

简单的说DDS纹理的特性是占用磁盘空间大，但其纹理压缩格式的特性，可以节约缓存使占用内存大大降低，一些3D建模游戏会运用DDS贴图，提高游戏技能，顺畅度也大幅提高。

2、加载 DDS格式的纹理

2.1、示例

示例
https://ithanmang.gitee.io/threejs/home/201809/20180905/02-basic-texture-dds.html
效果
这里写图片描述

2.2、步骤

首先，需要引入DDS格式纹理的加载器

<!--导入 DDS 加载器-->
<script src="../../libs/examples/js/loaders/DDSLoader.js"></script>

创建实例，并加载文件


let texture = new THREE.DDSLoader().load('../../textures/dds/'+imageUrl,function () {
   
	......
 });

3、完整代码

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="icon" href="../../../three.png">
    <title>基础纹理-加载dds格式的纹理</title>
    <style>
        body {
   
            margin: 0;
            overflow: hidden; /* 溢出隐藏 */
        }
        #loading {
   
            position: fixed;
            top: 50%;
            left: 50%;
            color: #FFFFFF;
            font-size: 20px;
            margin-top: -30px;
            margin-left: -40px;
        }
    </style>
    <script src="../../libs/build/three-r93.js"></script>
    <script src=