ThreeJS Texture从远处看是像素化的

Question

我在玩webGL和ThreeJS，然后遇到了以下问题：

从远处观看时，具有大图像的纹理将被像素化。

检查示例：http://jsfiddle.net/4qTR3/1/

下面是代码：

    var scene = new THREE.Scene();
    var camera = new THREE.PerspectiveCamera(40, window.innerWidth / window.innerHeight, 10, 7000);

    var light = new THREE.PointLight(0xffffff);
    light.position.set(0, 150, 100);
    scene.add(light);

    var light2 = new THREE.AmbientLight(0x444444);
    scene.add(light2);

    var renderer = new THREE.WebGLRenderer({
        antialias: true
    });
    renderer.setSize(window.innerWidth, window.innerHeight);
    document.body.appendChild(renderer.domElement);

    var geometry = new THREE.PlaneGeometry(500, 500, 10, 10);

    //I use different textures in my project
    var texture = new THREE.ImageUtils.loadTexture(TEST_IMAGE);
    var textureBack = new THREE.ImageUtils.loadTexture(TEST_IMAGE);

    textureBack.anisotropy = renderer.getMaxAnisotropy();
    texture.anisotropy = renderer.getMaxAnisotropy();

    //Filters
    texture.magFilter = THREE.NearestFilter;
    texture.minFilter = THREE.LinearMipMapLinearFilter;
    textureBack.magFilter = THREE.NearestFilter;
    textureBack.minFilter = THREE.LinearMipMapLinearFilter;

    var materials = [
    new THREE.MeshLambertMaterial({
        transparent: true,
        map: texture,
        side: THREE.FrontSide
    }),
    new THREE.MeshLambertMaterial({
        transparent: true,
        map: textureBack,
        side: THREE.BackSide
    })];

    for (var i = 0, len = geometry.faces.length; i < len; i++) {
        var face = geometry.faces[i].clone();
        face.materialIndex = 1;
        geometry.faces.push(face);
        geometry.faceVertexUvs[0].push(geometry.faceVertexUvs[0][i].slice(0));
    }

    planeObject = new THREE.Mesh(geometry, new THREE.MeshFaceMaterial(materials));

    planeObject.overdraw = true;
    planeObject.position.z = -5000;

    scene.add(planeObject);

    camera.position.z = 1000;

    (function render() {
        requestAnimationFrame(render);
        planeObject.rotation.y += 0.02;
        renderer.render(scene, camera);
    })();

如果纹理图像中包含文本，则文本将变得非常像素化，质量较差。

我该如何解决？

Answer 1

为了避免像素化，您需要使用mips，但WebGL不能为非2幂幂纹理生成mips。您的纹理是800x533，都不是2的幂。

几个选项

1）将图片离线缩放为2的幂，例如512x512或1024x512

2）在生成纹理之前在运行时缩放图片。

您自己加载图像，一旦加载，请制成2的幂的画布。调用drawImage（img，0，0，canvas.width，canvas.height）将图像缩放到画布中。然后将画布加载到纹理中。

您可能还希望将Mag过滤条件从NearestFilter更改为LinearFilter。

注意：（1）是更好的选择。 （2）在用户的计算机上花费时间，使用更多的内存，并且您不能保证缩放的质量。

Example here。