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

最新推荐文章于 2024-06-28 21:06:00 发布
最新推荐文章于 2024-06-28 21:06:00 发布
阅读量4.7k 收藏 4
点赞数
分类专栏： threejs
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：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=
最低0.47元/天 解锁文章
「已注销」
关注
  • 0
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
THREE各种格式文件加载大全*Loader.js
02-22
THREE各种格式文件加载大全，一定能帮大家的忙。*Loader.js, 3MFLoader, AMFLoader, AssimpJSONLoader, AWDLoader, DDSLoader, FBXLoader, KMZLoader, MTLLoader, OBJLoader, PLYLoader, STLLoader, TTFLoader, VTKLoader 等５０多个js文件，很多种格式的模型都可以加载。
three.js加载和使用纹理-加载DDS、PVR、TGA格式的纹理(vue中使用three.js73)
点燃火柴的博客
06-02 1886
加载DDS、PVR、TGA格式的纹理1.demo效果2. 实现要点2.1 加载DDS格式纹理2.2 加载PVR格式纹理2.3 加载TGA格式纹理3. demo代码 1.demo效果 以上三个动图分别是加载DDS、PVR、TGA格式的纹理的效果图 2. 实现要点 与上一片文章基本相同，不同的地方只是使用不同的纹理加载器，加载的纹理图片不同 2.1 加载DDS格式纹理 createMesh(geom) { const publicPath = process.env.BASE_URL //获取环境变量
dds纹理
最新发布
顺其自然~专栏
06-28 575
dds是DirectDraw Surface的缩写，实际上，它是DirectX纹理压缩（DirectX Texture Compression，简称DXTC）的产物。DXTC减少了纹理内存消耗的50%甚至更多，有3种DXTC的格式可供使用，它们分别是DXT1，DXT3和DXT5。在OrigoEngine的材质系统中，可以看到很多的dds文件。
THREE各种格式文件加载合集*Loader.js
10-23
截止于2017年10月23日THREE官网支持的所有*Loader.js 3MFLoader.js AMFLoader.js AssimpJSONLoader.js AssimpLoader.js AWDLoader.js BabylonLoader.js BinaryLoader.js BVHLoader.js ColladaLoader.js ColladaLoader2.js DDSLoader.js FBXLoader.js GLTFLoader.js HDRCubeTextureLoader.js ImageBitmapLoader.js KMZLoader.js MD2Loader.js MMDLoader.js MTLLoader.js NRRDLoader.js OBJLoader.js OBJLoader2.js PCDLoader.js PDBLoader.js PlayCanvasLoader.js PLYLoader.js PRWMLoader.js PVRLoader.js RGBELoader.js STLLoader.js SVGLoader.js TDSLoader.js TGALoader.js TTFLoader.js UTF8Loader.js VRMLLoader.js VTKLoader.js WWOBJLoader2.js XLoader.js
用three.js在网页实现3D模型的展示
subsistent的博客
03-24 2491
创建场景的js文件用到基本的three.js，加载模型的js文件用到DDSLoader.js，MTLLoader.js，OBJLoader.js，镜头的转动用OrbitControls.js文件。然后，下载解压，会得到three.js-master文件，在build目录找到three.js，这个是three.js的核心功能库。当然也有其他功能实现替代的js文件，用到的js文件不唯一，文件路径自行设置。本次实例导入如图js文件。首先，下载three.js文件，在threejs官网能下，这里附上地址链接一条。
TDSLoader.js文件
03-10
TDSLoader.js文件，可用于threejs项目引入TDS文件模型引入
openDDS开发者手册3.27.0-英文版
02-22
综上所述，《OpenDDS开发者手册3.27.0》是一份详尽的文档，不仅涵盖了OpenDDS的基础知识，还提供了丰富的示例和实践指导，对于希望使用OpenDDS构建高性能分布式系统的开发者来说，是一份不可或缺的资源。
.dds格式纹理文件查看器
03-30
.dds格式纹理文件查看器，可以查看、定位、缩放和调整通道，通过一个软件即可轻松查看.dds格式的纹理文件，对三维渲染，游戏制作的效率提升很有意义。
parse-dds:解析DDS纹理文件的标头
05-22
解析dds 在Node和浏览器中解析DDS纹理头。 它改编自的精彩的 。 当前，这仅支持有限范围的常见DDS格式： DXT1（RGB） DXT3（RGBA） DXT5（RGBA） 立方体贴图（RGBA32f）-如来自和有关Node中的示例，请参见 ；有关...
FPGA-VHDL-DDS.rar_DDS FPGA_FPGA DDS
07-14
直接数字频率合成（Direct Digital Synthesis，简称DDS）是一种现代电子技术，用于生成高精度、高稳定性的模拟正弦波信号。在数字信号处理领域，DDS通过改变输入的相位累加器的初值来控制输出信号的频率，从而实现...
jsloader.js
11-15
one page one application利器， 实现js动态加载的重要js核心
3DJS文件
01-21
包含DDSLoader Detector jquery-1.9.1 MTLLoader OBJLoader OrbitControls PathControls RequestAnimationFrame stats stats.min three three.min ThreeBSP THREEx.FullScreen THREEx.KeyboardState THREEx.WindowResize Tween tween.min JS文件
three.js+objLoader.js源码包，内含测试3D建模
08-09
html加载3d建模，包含three.js+OBJLoader.js的组合使用demo
threejs加载obj文件
09-25
threejs加载obj文件，附件主要实现了threejs对obj文件的加载，及使用相机及光的一些调节，希望能给大家带来帮助，下载后直接运行即可看到效果。
DDS.rar_dds-9850_按键设置频率
09-14
DDS（Direct Digital Synthesis，直接数字合成）技术是一种在电子工程领域广泛应用的信号生成方法，尤其在通信、测试测量和音频系统中。DDS通过高速数字信号处理器（DSP）或者专用的DDS芯片，将数字信号转换为模拟...
DDS格式贴图介绍
04-22 2476
DDS是DirectDraw Surface的缩写，它是DirectX纹理压缩（DirectX Texture Compression，简称DXTC）的产物。 DXTC减少了纹理内存消耗的50%甚至更多，有3种DXTC的格式可供使用，分别是DXT1，DXT3和DXT5。 DXT1 压缩比例：1:8 压缩比最高，它只有1Bit Alpha，Alpha通道信息几乎完全丧失。一般将不带Alpha通道
使用threejs导入外部模型与滑动查看【微信小程序】-裁-
shaojiuli的博客
01-14 2461
1：官方提供的安装方法是通过npm安装构建，如下： 新建一个页面，项目目录内置终端打开（注意目录！，例如在psges的父目录打开），通过 npm 安装 npm install --save threejs-miniprogram@0.0.5 安装完成之后在微信开发者工具中点击构建 npm。 一下是一个正方体模型的小例子： index.js import {createScopedThreejs} from 'threejs-miniprogram' Page({ data
使用three.js加载obj+mtl文件
热门推荐
红鹤的博客
01-05 3万+
因在项目中运用到WEBGL的技术。所以研究了一下下。three.js库看来十分强大,此处为加载带材质的obj文件 1.下载相关js    https://threejs.org/     thee.js可去官网下载最新版本 2.搭建基本的wenGL场景 body{ margin: 0; overflow: hidden; }
pixi6.5如何加载dds压缩纹理
05-02
PixiJS 6.5的Texture Loader默认不支持DDS压缩纹理的加载，但可以通过使用pixi-compressed-textures插件来实现。这个插件可以让你加载BC1-5、ETC1、PVRTC等压缩纹理格式。 首先，你需要安装该插件。你可以通过npm安装它： ``` npm install pixi-compressed-textures ``` 安装完后，你需要在你的代码中导入它并将其添加到PixiJS的Loader中： ```javascript import { CompressedTextureLoader } from 'pixi-compressed-textures'; import { Loader } from 'pixi.js'; // 将 CompressedTextureLoader 添加到 PixiJS Loader Loader.registerPlugin(CompressedTextureLoader); ``` 现在你可以使用PixiJS的Loader加载DDS纹理了： ```javascript import { Loader } from 'pixi.js'; // 加载dds纹理 Loader.shared.add('myTexture', 'path/to/myTexture.dds'); Loader.shared.load(() => { const texture = Loader.shared.resources.myTexture.texture; // 使用纹理 }); ``` 你需要注意的是，由于不同的设备和浏览器支持的压缩纹理格式不同，因此需要使用不同的纹理格式来保证兼容性。你可以使用CompressedTextureLoader的getSupportedFormats()方法获取当前设备支持的所有格式。例如，如果你想使用PVRTC格式来加载纹理： ```javascript import { CompressedTextureLoader } from 'pixi-compressed-textures'; import { Loader } from 'pixi.js'; Loader.registerPlugin(CompressedTextureLoader); const supportedFormats = CompressedTextureLoader.getSupportedFormats(); if (supportedFormats.pvrtc) { // 加载PVRTC格式的纹理 Loader.shared.add('myTexture', 'path/to/myTexture.pvr'); } else { // 加载普通的非压缩纹理 Loader.shared.add('myTexture', 'path/to/myTexture.png'); } Loader.shared.load(() => { const texture = Loader.shared.resources.myTexture.texture; // 使用纹理 }); ``` 希望对你有所帮助！
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值