使用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的视网膜显示屏为2.这种方法通常可在渲染的其他方面提供最佳结果,并且在任何情况下,在iPad上将像素比率设置为1(而不是2)都不会改善纹理的外观.
所以我的问题是：这是我将不得不忍受的iOS WebGL中的错误,还是我可以对自己的代码进行一些调整以在iOS设备上获得更好的结果？
编辑：此three.js demo page在iPad上的渲染也比在桌面浏览器上清晰得多,该演示的源代码使用与我自己的代码相同的通用方法,这表明无论我缺少什么技巧,这都不是简单的事情很明显
解决方法:
格雷格·伊根(Greg Egan)的观察很有道理.如果您不仅要细分平面,而且还要平铺UV坐标,以使它们重复而不是使用可能固定该坐标的大量数字.
// 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;
// Reduce overall size of ground
groundWidth = 200;
groundMaterial = null;
// groundGeom = new THREE.PlaneGeometry(groundWidth,groundWidth);
// Split plane geometry into a grid of smaller squares
//groundGeom = new THREE.PlaneGeometry(groundWidth,groundWidth,20,20);
var groundGeom = new THREE.BufferGeometry();
var quads = groundWidth * groundWidth;
var positions = new Float32Array( quads * 6 * 3 );
var normals = new Float32Array( quads * 6 * 3 );
var texcoords = new Float32Array( quads * 6 * 2 );
for (var yy = 0; yy < groundWidth; ++yy) {
for (var xx = 0; xx < groundWidth; ++xx) {
var qoff = (yy * groundWidth + xx) * 6;
var poff = qoff * 3;
var x = xx - groundWidth / 2;
var y = yy - groundWidth / 2;
positions[poff + 0] = x;
positions[poff + 1] = y;
positions[poff + 2] = 0;
positions[poff + 3] = x + 1;
positions[poff + 4] = y;
positions[poff + 5] = 0;
positions[poff + 6] = x;
positions[poff + 7] = y + 1;
positions[poff + 8] = 0;
positions[poff + 9] = x;
positions[poff + 10] = y + 1;
positions[poff + 11] = 0;
positions[poff + 12] = x + 1;
positions[poff + 13] = y;
positions[poff + 14] = 0;
positions[poff + 15] = x + 1;
positions[poff + 16] = y + 1;
positions[poff + 17] = 0;
normals[poff + 0] = 0;
normals[poff + 1] = 1;
normals[poff + 2] = 0;
normals[poff + 3] = 0;
normals[poff + 4] = 1;
normals[poff + 5] = 0;
normals[poff + 6] = 0;
normals[poff + 7] = 1;
normals[poff + 8] = 0;
normals[poff + 9] = 0;
normals[poff + 10] = 1;
normals[poff + 11] = 0;
normals[poff + 12] = 0;
normals[poff + 13] = 1;
normals[poff + 14] = 0;
normals[poff + 15] = 0;
normals[poff + 16] = 1;
normals[poff + 17] = 0;
var toff = qoff * 2;
texcoords[toff + 0] = 0;
texcoords[toff + 1] = 0;
texcoords[toff + 2] = 1;
texcoords[toff + 3] = 0;
texcoords[toff + 4] = 0;
texcoords[toff + 5] = 1;
texcoords[toff + 6] = 0;
texcoords[toff + 7] = 1;
texcoords[toff + 8] = 1;
texcoords[toff + 9] = 0;
texcoords[toff + 10] = 1;
texcoords[toff + 11] = 1;
}
}
groundGeom.addAttribute( 'position', new THREE.BufferAttribute( positions, 3 ) );
groundGeom.addAttribute( 'normal', new THREE.BufferAttribute( normals, 3 ) );
groundGeom.addAttribute( 'uv', new THREE.BufferAttribute( texcoords, 2 ) );
groundGeom.computeBoundingSphere();
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(1, 1);
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>