使用three.js库进行WebGL纹理渲染的简单测试：
// Canvas dimensions
canvasW = Math.floor(0.9*window.innerWidth);
canvasH = Math.floor(0.75*canvasW);
cAR = canvasW / canvasH;
canvasWrapper = document.getElementById('canvasWrapper');
canvasWrapper.style.width=canvasW+'px';
canvasWrapper.style.height=canvasH+'px';
// Renderer
renderer = new THREE.WebGLRenderer({antialias: true});
renderer.setPixelRatio(window.devicePixelRatio);
console.log("Renderer pixel ratio = "+window.devicePixelRatio);
renderer.setSize(canvasW, canvasH);
canvas = renderer.domElement;
canvasWrapper.appendChild(canvas);
// Set up camera
cameraDist = 24;
camera = new THREE.PerspectiveCamera(25, cAR, 0.01, 1000);
cameraAngle = 0;
camera.position.x = cameraDist*Math.sin(cameraAngle);
camera.position.y = 0.3*cameraDist;
camera.position.z = cameraDist*Math.cos(cameraAngle);
camera.lookAt(new THREE.Vector3(0,0,0));
// Set up scene, consisting of texture-tiled ground
scene = new THREE.Scene();
groundWidth = 1000;
groundMaterial = null;
groundGeom = new THREE.PlaneGeometry(groundWidth,groundWidth);
groundGeom.rotateX(-Math.PI/2);
groundMesh = new THREE.Mesh(groundGeom, groundMaterial || new THREE.MeshBasicMaterial());
scene.add(groundMesh);
//window.requestAnimationFrame(draw);
// Insert texture once it has loaded
function setGroundTexture(texture)
{
groundTexture = texture;
groundTexture.wrapS = THREE.RepeatWrapping;
groundTexture.wrapT = THREE.RepeatWrapping;
groundTexture.repeat.set(groundWidth, groundWidth);
groundTexture.anisotropy = renderer.getMaxAnisotropy();
console.log("Texture anisotropy = "+groundTexture.anisotropy);
groundMaterial = new THREE.MeshBasicMaterial({map: groundTexture});
if (groundMesh)
{
groundMesh.material = groundMaterial;
window.requestAnimationFrame(draw);
};
}
// Start texture loading
//new THREE.TextureLoader().load("Texture.png", setGroundTexture, function (xhr) {}, function (xhr) {});
setGroundTexture(makeTexture());
// Render a frame
function draw()
{
renderer.render(scene, camera);
}
// -------
function makeTexture() {
var ctx = document.createElement("canvas").getContext("2d");
ctx.canvas.width = 256;
ctx.canvas.height = 256;
ctx.fillStyle = "rgb(238, 238, 238)";
ctx.fillRect(0, 0, 256, 256);
ctx.fillStyle = "rgb(208, 208, 208)";
ctx.fillRect(0, 0, 128, 128);
ctx.fillRect(128, 128, 128, 128);
for (var y = 0; y < 2; ++y) {
for (var x = 0; x < 2; ++x) {
ctx.save();
ctx.translate(x * 128 + 64, y * 128 + 64);
ctx.lineWidth = 3;
ctx.beginPath();
var radius = 50;
ctx.moveTo(radius, 0);
for (var i = 0; i <= 6; ++i) {
var a = i / 3 * Math.PI;
ctx.lineTo(Math.cos(a) * radius, Math.sin(a) * radius);
}
ctx.stroke();
ctx.restore();
}
}
var tex = new THREE.Texture(ctx.canvas);
tex.needsUpdate = true;
return tex;
}canvas, #canvasWrapper {margin-left: auto; margin-right: auto;}<script src="https://cdnjs.cloudflare.com/ajax/libs/three.js/r78/three.js"></script>
<div id="canvasWrapper"></div>在我尝试的桌面浏览器上渲染效果完美，但在iPad上渲染时会出现严重模糊，如下面页面中显示的截图所示。
桌面
iPad
在这两种情况下，纹理的各向异性为16（渲染器支持的最大值）。用于纹理的图像尺寸为256×256（必须为2的幂，以便进行重复纹理），将其放大或缩小无法解决问题。
纹理：
我将渲染器的像素比设置为匹配浏览器窗口大小，这意味着对于桌面系统，它为1，而对于iPad的Retina显示屏，它为2。这种方法通常可以在渲染的其他方面获得最佳结果，在任何情况下，在iPad上将像素比设置为1而不是2并不能改善纹理的外观。
因此，我的问题是：这是iOS WebGL中的一个错误，我只能忍受它，还是我可以在自己的代码中进行一些调整以在iOS设备上获得更好的结果？
编辑：这个three.js演示页面在iPad上的渲染效果也比桌面浏览器要差得多，并且演示的源代码使用了与我的代码相同的一般方法，这表明我可能错过了某些技巧，而这些技巧并不简单和显而易见。