时间戳

首页 > 解决方案 > threejs 压缩纹理 pc/mobile android/ios/chrome 兼容性

android - threejs 压缩纹理 pc/mobile android/ios/chrome 兼容性

问题描述

我有一系列要显示的图像/纹理threejs。

在内存中有大量纹理或纹理数据以供threejs使用的最佳方法是什么？

必须与 PC/Android/iOS 兼容。

标签： androidiosthree.js

解决方案

  • 我将所有数据更改为压缩纹理格式并使用THREE.CompressedTexture（例如 Dxt1）来减少内存使用量。但 DXT1 仅适用于 PC。

    // given texture_data, texutre_width, texture_height
var texture = new THREE.CompressedTexture(null, texture_width, texture_height,
  THREE.RGB_S3TC_DXT1_Format, THREE.UnsignedByteType, THREE.UVMapping,
  THREE.ClampToEdgeWrapping, THREE.ClampToEdgeWrapping,
  THREE.LinearFilter, THREE.LinearFilter);
var material = new THREE.MeshBasicMaterial({ map: texture });

// create mipmaps with data
var mipmap = { 
  "data": texture_data,
  "width": texture_width, 
  "height": texture_height 
};
var mipmaps = [];
mipmaps.push(mipmap);

// set data to texture and update
texture.mipmaps = mipmaps;
texture.needsUpdate = true
material.needsUpdate = true;

  • 展望未来，我发现跨平台压缩纹理格式的兼容性是一个问题。每种格式都需要特定的 WEBGL 扩展。例如 Dxt1 需要S3TC 扩展。

    if (renderer.extensions.get('WEBGL_compressed_texture_s3tc'))
  alert('WEBGL_compressed_texture_s3tc is supported');
else
  alert('WEBGL_compressed_texture_s3tc is NOT supported');

  • 没有一种格式适用于所有三个平台（PC/iOS/Android）。详情如下：

    • ASTC/ETC/ETC1：仅适用于 Android
    • ATC：并非在所有平台上都有效
    • PVRTC：仅适用于 iOS
    • S3TC/S3TC_SRGB：仅适用于 PC

  • 另一种方法是将所有纹理编码为mp4，但将它们解码为原始纹理并不容易。我试过百老汇。它可以工作，但cpu负载很重。

  • 最后，我将所有数据编码为基础格式，并使用BasisTextureLoader将它们加载到浏览器上。压缩率类似于h264 基线，比dxt1 好得多。

  • BasisTextureLoader实际上是在运行时检测兼容性并将它们解码为某种 CompressedTexture 格式以threejs供使用。

希望能帮助到你。

推荐阅读