0

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

我在 chrome 和 safari 上的低位接缝处出现了可怕的接缝。疯狂的部分是材料在 ios 上看起来很棒。

我尝试使用所有 mag 和 min 过滤器，但没有成功。我也尝试过降低精度，但这也没有效果。我认为 ios 可能有一种处理与桌面不同的纹理的方式。较低的 lod 看起来好像它们没有被正确过滤，并且接缝变得越来越戏剧化，细节越低。

下面是一个 codepen 的链接，它说明了接缝从左侧的 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）。

我想知道如何在桌面版 chrome 和 safari 上进行这项工作。ios有不同的默认过滤器吗？ios 在做什么或不做什么来给我他们正在寻找的结果？

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

4

0 回答 0