نمایشگرهای مدرن (مثل Retina اپل) دارای Pixel Density بالا هستند و بدون تنظیم مناسب، صحنه‌ها کدر یا تار نمایش داده می‌شوند.

۱️⃣ تنظیم Pixel Ratio در Renderer

• Pixel Ratio تعداد پیکسل‌های واقعی روی صفحه را مشخص می‌کند

• با افزایش آن، صحنه روی نمایشگرهای HiDPI شفاف‌تر می‌شود

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(window.devicePixelRatio); // مهم برای Retina/HiDPI
document.body.appendChild(renderer.domElement);

📌 window.devicePixelRatio معمولا 2 برای Retina و 1 برای نمایشگر معمولی است

۲️⃣ تاثیر روی Texture ها

• Textures با رزولوشن پایین روی نمایشگرهای HiDPI تار دیده می‌شوند

• راهکارها:

  1. استفاده از Textures با رزولوشن بالاتر

  2. تنظیم minFilter و magFilter برای کیفیت بهتر

🔹 مثال Texture

const texture = new THREE.TextureLoader().load('texture.png');
texture.minFilter = THREE.LinearMipMapLinearFilter; // جلوگیری از تار شدن
texture.magFilter = THREE.LinearFilter;

۳️⃣ مراقبت از Performance

• افزایش Pixel Ratio باعث افزایش GPU Load می‌شود

• معمولاً برای موبایل می‌توان Pixel Ratio را محدود کرد:

renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));

۴️⃣ مثال کامل

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
camera.position.z = 5;

const renderer = new THREE.WebGLRenderer({ antialias: true });
renderer.setSize(window.innerWidth, window.innerHeight);
renderer.setPixelRatio(Math.min(window.devicePixelRatio, 2));
document.body.appendChild(renderer.domElement);

const texture = new THREE.TextureLoader().load('texture.png');
texture.minFilter = THREE.LinearMipMapLinearFilter;
texture.magFilter = THREE.LinearFilter;

const cube = new THREE.Mesh(
  new THREE.BoxGeometry(1,1,1),
  new THREE.MeshStandardMaterial({ map: texture })
);
scene.add(cube);

window.addEventListener('resize', () => {
  camera.aspect = window.innerWidth / window.innerHeight;
  camera.updateProjectionMatrix();
  renderer.setSize(window.innerWidth, window.innerHeight);
});

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

📌 این مثال تضمین می‌کند که:

• صحنه و Texture روی نمایشگرهای HiDPI واضح باشند

• صحنه Responsive و بدون تار شدن نمایش داده شود

۵️⃣ نکات مهم

• Pixel Ratio بالا → کیفیت بهتر، مصرف GPU بیشتر

• Textures با رزولوشن کافی انتخاب شوند

• فیلترهای مناسب (Linear, Mipmap) برای جلوگیری از Aliasing

• می‌توان روی موبایل Pixel Ratio محدود کرد تا Performance حفظ شود