Question

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

当从远处看时，具有大图像的纹理会变得像素化。

以下是代码：

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

当从远处看时，三个JS纹理是像素化的

1 个答案: