Question

我正在使用three.js中的PBR着色器的基于图像的光照部分。我正在使用通过DDSLoader引入的.dds立方体贴图纹理。

我在铬和野生动物园的低层土地上得到了可怕的接缝。狂野的部分是材料在ios上看起来很棒。

我尝试过使用所有mag和min过滤器，但没有成功。我也试过降低精度，但也没有效果。我认为ios可能有办法处理与桌面不同的纹理。较低的lods看起来好像没有被正确过滤，并且细节越低，接缝越来越显着。

下面是一个代码表的链接，用于说明接缝，因为它们从左侧的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);

}

textureCubeLod with .dds

请在桌面Chrome或Safari上试用，然后与ios进行比较。（firefox和android不支持textureCubeLodEXT）。

我想知道如何使用这个工作来实现桌面的chrome和safari。 ios有不同的默认过滤器吗？什么是ios做或不做给我他们的结果我正在寻找？

注意：.dds纹理每通道保存8位，四个通道。

WebGL textureCubeLod导致chrome / safari上的接缝而不是ios上的接缝

0 个答案: