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

我有一系列图像/纹理要用

threejs

显示

• 首先，我加载了大量原始RGB格式的数据（Uint8Array）并输入到THREE.DataTexture。这在PC和Android上都很好，但似乎达到了内存限制，并导致iOS safari重新加载页面

  var texture = new THREE.DataTexture(data, w, h, THREE.RGBFormat);
  

在内存中存储大量纹理或纹理数据以供

threejs

使用的最佳方法是什么

必须与PC/Android/iOS兼容。

• 我将所有数据更改为压缩纹理格式，并使用例如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需要

• 没有一种格式适用于所有三种平台（PC/iOS/Android）。详情如下:
  • ASTC/ETC/ETC1：仅适用于Android
  • ATC：不要在所有站台上工作
  • PVRTC:仅适用于iOS
  • S3TC/S3TC_SRGB：仅适用于PC
• 另一种方法是将所有纹理编码为mp4，但将它们解码为原始纹理并不容易。我试过了。它可以工作，但是cpu负载很重

• 最后，我对所有数据进行了编码，以格式化并用于将它们加载到浏览器上。压缩率与h264基线相似，远优于dxt1

• BasisTextureLoader实际上在运行时检测兼容性，并将其解码为某种压缩文本格式，以供

  threejs

  使用

希望有帮助。

• 我将所有数据更改为压缩纹理格式，并使用例如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需要

• 没有一种格式适用于所有三种平台（PC/iOS/Android）。详情如下:
  • ASTC/ETC/ETC1：仅适用于Android
  • ATC：不要在所有站台上工作
  • PVRTC:仅适用于iOS
  • S3TC/S3TC_SRGB：仅适用于PC
• 另一种方法是将所有纹理编码为mp4，但将它们解码为原始纹理并不容易。我试过了。它可以工作，但是cpu负载很重

• 最后，我对所有数据进行了编码，以格式化并用于将它们加载到浏览器上。压缩率与h264基线相似，远优于dxt1

• BasisTextureLoader实际上在运行时检测兼容性，并将其解码为某种压缩文本格式，以供

  threejs

  使用

希望能有帮助