Basis压缩纹理制作与利用

Basis Universal 是一种新的图像格式，旨在生成非常小的文件大小，在显卡而不是 CPU 上解码，使其解码速度非常快，非常适合 WebGL 场景。你可以使用Basis纹理在线查看工具检查你的Basis压缩纹理。

为了演示 Basis 的效率，我购买了一张 8000×4000px1 图像作为我的天空盒。通常这会花费很长时间下载并占用大量纹理空间。 Basis 的下载量更小，游戏运行时占用的内存空间也更少，从而使游戏的纹理数量增加 6-8 倍！

对于下面的示例，图像从 PNG 形式的 15MB 缩小到基础文件形式的 0.6MB。让我拥有这个巨大而美丽的天空盒，只需一个非常快速的小文件下载，并且不会牺牲我所有宝贵的纹理空间，为其他游戏纹理留下大量空间。

设置 Basis 只花了几分钟，但确实值得。

1、制作basis纹理

我们使用 Basis Universal 项目中的 basicu 程序对基础文件进行编码。不幸的是，没有预编译的二进制文件可供我们使用，因此我们需要编译自己的二进制文件。

我测试了在 Linux 64 位上构建图像编码器的说明，我个人使用的是 Chrome 操作系统中内置的 Linux VM。

第一步是安装用于编译 basicu 二进制文件的 Linux 依赖项。

sudo apt-get install git build-essential cmake make

然后我们从Github下载Basis的源代码：

git clone https://github.com/BinomialLLC/basis_universal.git
cd basis_universal

按照构建说明进行操作：

cmake CMakeLists.txt
make

现在二进制文件已构建完毕，应该能够使用新编译的二进制文件将 sRGB PNG 编码为基础文件。

./bin/basisu ~/Downloads/ada.png

这可能需要几秒钟，但一旦完成，它应该会在当前目录中创建一个具有相同名称但扩展名为 .basis 的文件。我们可以将此 .basis 文件加载到 THREE.js 中

我原来的ada.png是1.8MB，超级压缩的基础文件只有0.145MB，比同等的JPEG还要小！

你可以探索一些选项来调整图像的编码方式。

2、使用basis纹理

此代码主要取自 THREE.js 基础加载器示例。该演示是使用 THREE.js 版本 106 构建的。

导入基础纹理加载器使用 ES 模块语法来加载模块。我已将“node_modules”目录公开为静态文件夹。因此，请确保你的 <script> 标签声明为 type=module 。或者使用你喜欢的打包器（例如 webpack 或 rollup）预编译它。

import { BasisTextureLoader } from "/node_modules/three/examples/jsm/loaders/BasisTextureLoader.js";

创建一个对象并为其分配纹理，稍后我们将更新该纹理上的贴图：

const geometry = new THREE.SphereBufferGeometry( 1, 50, 50 );
const material = new THREE.MeshBasicMaterial();
const sphere = new THREE.Mesh( geometry, material );
scene.add( sphere );

我们现在可以加载纹理：

// Make a new instance of the loader
const basisLoader = new BasisTextureLoader();
// Set the location of the Web Worker Script from THREE.js
basisLoader.setTranscoderPath(
  '/node_modules/three/examples/js/libs/basis/'
);
basisLoader.detectSupport( renderer );
// Load your Basis Image
basisLoader.load( '/ada.basis',
  function (texture) {
    // Once the texture has loaded, update the .map of the material
    texture.encoding = THREE.sRGBEncoding;
    material.map = texture;
    material.needsUpdate = true;
  }, undefined, function ( error ) {
    console.error( error );
  }
);

我希望这可以帮助你利用basis纹理的强大功能。 :)

原文链接：Using Basis Textures in Three.js

BimAnt翻译整理，转载请标明出处