This simple test of WebGL texture rendering using the three.js library:
// 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>renders perfectly on the desktop browsers I've tried, but is badly blurred when rendered on an iPad, as shown by the screenshot further down the page.
Desktop
iPad
In both cases, the texture is rendered with an anisotropy of 16 (the maximum supported by the renderer). The image used for the texture has dimensions 256 × 256 (a power of 2, which is necessary for repeated textures), and making it larger or smaller doesn't fix the problem.
texture:
I'm setting the renderer's pixel ratio to match the browser window, which means it is 1 for desktop systems and 2 for the iPad's retina display. This approach generally gives the best results for other aspects of rendering, and in any case setting the pixel ratio to 1 on the iPad, instead of 2, doesn't improve the appearance of the texture.
So my question is: is this a bug in iOS WebGL that I'll just have to live with, or is there something I can tweak in my own code to get better results on iOS devices?
Edit: This three.js demo page also renders much less clearly on the iPad than on desktop browsers, and the source for the demo uses the same general approach as my own code, which suggests that whatever trick I'm missing, it's not something simple and obvious.
