ios - WebGL textureCubeLod により、ios ではなく chrome/safari で継ぎ目が発生する

Question

three.js で PBR シェーダーのイメージ ベースの照明部分に取り組んでいます。DDSLoader を介して取り込まれた .dds キューブマップ テクスチャを使用しています。

クロムとサファリのローロードでひどい継ぎ目ができています。野生の部分は、素材がiosで見栄えがすることです.

すべての mag および min フィルターを使用してみましたが、成功しませんでした。精度を下げてみましたが、効果もありませんでした。iOS には、デスクトップとは異なるテクスチャの処理方法があるのではないかと考えています。低いロッドは適切にフィルタリングされていないように見え、ディテールが低いほど継ぎ目が劇的になります。

以下は、左側の LOD 0.0 から右側の LOD 7.0 まで、シームがより見やすくなるコードペンへのリンクです。

var container;
var camera, controls, scene, renderer;
var material = [];

init();
animate();

function init() {

    // renderer

    renderer = new THREE.WebGLRenderer({
      antialias: true,
      alpha:  false,
      precision:  "highp"
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    renderer.setPixelRatio( window.devicePixelRatio );
    renderer.autoClear = true;
    renderer.setClearColor(0x777777, 1);

    container = document.getElementById('world');
    container.appendChild(renderer.domElement);

    camera = new THREE.PerspectiveCamera(10, window.innerWidth / window.innerHeight, 1, 10000);
    camera.position.z = 1000;

    controls = new THREE.OrbitControls(camera, renderer.domElement);

    controls.rotateSpeed = 1.0;
    controls.zoomSpeed = 1.2;
    controls.panSpeed = 0.8;
    controls.minDistance = 100;
    controls.maxDistance = 4000;

    controls.enableDamping = true;
    controls.dampingFactor = 0.2;

    controls.keys = [65, 83, 68]; 

    // world

    scene = new THREE.Scene();

    var loader = new THREE.DDSLoader();
    var src = 'https://threejs.org/examples/textures/compressed/Mountains_argb_mip.dds'
    loader.load( src, function( texture ) {

      var geo = new THREE.SphereGeometry( 30, 48, 48 );

      for ( var i = 0; i < 8; i++ ) {
        createSphere( i, ( -280 + ( i * 80 ) ) );
      }

      function createSphere( index, pos ) {

        var uniforms = {
          envMap: { type: 't', value: null },
          lod: { type: '1f', value: 0.0 }
        };

        uniforms.envMap.value = texture;
        uniforms.lod.value = index;

        material[ index ] = new THREE.RawShaderMaterial({
          uniforms: uniforms,
          vertexShader: document.getElementById( 'vertexShader' ).textContent,
          fragmentShader: document.getElementById( 'fragmentShader' ).textContent,
          lights: false
        });

        material[ index ].extensions.shaderTextureLOD = true;

        var Mesh = new THREE.Mesh( geo, material[ index ] );
        Mesh.position.x = pos;
        scene.add(Mesh);

        material[ index ].needsUpdate = true;

      };

    });

    window.addEventListener('resize', onWindowResize, false);

}

function onWindowResize() {

    camera.aspect = window.innerWidth / window.innerHeight;
    camera.updateProjectionMatrix();

    renderer.setSize(window.innerWidth, window.innerHeight);

}

function animate() {

    render();
    controls.update();
    requestAnimationFrame(animate);

}

function render() {

    renderer.render(scene, camera);

}

.dds を使用した textureCubeLod

デスクトップの chrome または safari で試してから、ios と比較してください。(firefox と android は textureCubeLodEXT をサポートしていません)。

デスクトップ用のクロムとサファリでこれを機能させるにはどうすればよいか知りたいです。iOS 用に異なるデフォルト フィルターはありますか? 私が探している結果を得るためにiosは何をしているのか、していないのか?

注: .dds テクスチャは、1 チャンネルあたり 8 ビット、4 チャンネルで保存されました。