بهینه‌سازی مدل‌ها باعث می‌شود که صحنه‌ها سریع‌تر رندر شوند، مصرف GPU کمتر شود و FPS بالا بماند.

۱️⃣ کاهش تعداد Vertices / Polygons

• مدل‌های سه‌بعدی با Polygon زیاد باعث کاهش عملکرد می‌شوند

• استفاده از مدل‌های Low-Poly یا Decimation در نرم‌افزارهای 3D قبل از وارد کردن به Three.js توصیه می‌شود

📌 نکته: glTF بهترین فرمت برای مدل‌های بهینه است، چون حجم کم و رندر سریع دارد

۲️⃣ Merge کردن Meshها

• ترکیب چند Mesh کوچک به یک Mesh بزرگ باعث کاهش Draw Call می‌شود

• Three.js کلاس ()BufferGeometryUtils.mergeBufferGeometries را ارائه می‌دهد

🔹 مثال

import { mergeBufferGeometries } from 'three/examples/jsm/utils/BufferGeometryUtils.js';

const geometries = [geom1, geom2, geom3];
const mergedGeometry = mergeBufferGeometries(geometries, false);
const material = new THREE.MeshStandardMaterial({ color: 0x00ff00 });
const mesh = new THREE.Mesh(mergedGeometry, material);
scene.add(mesh);

۳️⃣ استفاده از Instancing

• برای اشیاء مشابه (مثلاً درختان یا چراغ‌ها) به جای چند Mesh جدا، از InstancedMesh استفاده کنید

• بسیار بهینه و سریع برای تعداد زیاد اشیاء مشابه

🔹 مثال

const count = 1000;
const geometry = new THREE.BoxGeometry(1,1,1);
const material = new THREE.MeshStandardMaterial({ color: 0xff0000 });
const mesh = new THREE.InstancedMesh(geometry, material, count);

for (let i=0; i<count; i++){
  const matrix = new THREE.Matrix4().makeTranslation(Math.random()*50,0,Math.random()*50);
  mesh.setMatrixAt(i, matrix);
}
scene.add(mesh);

۴️⃣ کاهش Texture و Material

• استفاده از Texture با رزولوشن مناسب

• استفاده از Compressed Textures (KTX2 / Basis)

• ترکیب Materialهای مشابه و کاهش تعداد Shaderها

۵️⃣ سطح جزئیات (LOD)

• LOD (Level of Detail): مدل‌ها با فاصله بیشتر، جزئیات کمتر دارند

• کلاس ()THREE.LOD برای مدیریت سطوح مختلف جزئیات

🔹 مثال ساده

const lod = new THREE.LOD();
lod.addLevel(highDetailMesh, 0);
lod.addLevel(lowDetailMesh, 50); // از فاصله 50 به بعد
scene.add(lod);

۶️⃣ حذف اشیاء غیر ضروری

• اشیاء پشت دوربین یا خارج از دید می‌توانند Frustum Culling شوند

• Three.js به صورت پیش‌فرض این کار را انجام می‌دهد، ولی اشیاء غیرقابل مشاهده را حذف کردن دستی می‌تواند مفید باشد

۷️⃣ بهینه‌سازی Animation و Skeleton

• مدل‌های اسکلت‌بندی سنگین (SkinnedMesh) می‌توانند FPS را کاهش دهند

• کاهش تعداد استخوان‌ها و استفاده از GPU Skinning کمک می‌کند

renderer = new THREE.WebGLRenderer({ antialias: true, powerPreference: "high-performance" });

۸️⃣ نکات مهم

• همیشه Draw Call و تعداد Vertex را بررسی کن

• glTF + InstancedMesh + LOD بهترین ترکیب برای صحنه‌های بزرگ است

• Compressed Texture و کاهش تعداد Material باعث کاهش مصرف GPU می‌شود