🔹 تعریف ساده

WebGL (Web Graphics Library) یک استاندارد رندر گرافیک دو‌بعدی و سه‌بعدی در مرورگر هست که با استفاده از جاوااسکریپت اجرا میشه.

• WebGL بر پایه‌ی OpenGL ES (نسخه‌ای از OpenGL برای موبایل و مرورگرها) ساخته شده.

• به مرورگر اجازه میده مستقیماً با کارت گرافیک (GPU) کار کنه.

• نیازی به نصب افزونه نداره، همه‌چیز داخل مرورگر اجرا میشه.

🔹 چرا مهمه؟

قبل از WebGL، برای گرافیک سه‌بعدی در مرورگر باید از Flash یا افزونه‌های سنگین استفاده می‌کردیم.
اما WebGL باعث شد:

• گرافیک سه‌بعدی واقعی و روان داخل مرورگر اجرا بشه.

• بازی‌های سه‌بعدی، شبیه‌سازها و مدل‌های تعاملی کاملاً در وب امکان‌پذیر بشن.

• GPU مستقیماً برای سرعت و پردازش گرافیک استفاده بشه.

🔹 ارتباط WebGL با Three.js

• کار کردن مستقیم با WebGL خیلی سخت و پیچیده‌ست چون باید shader بنویسی (GLSL)، با ماتریس‌ها کار کنی و همه‌چیز رو از صفر بسازی.

• Three.js اومده این کار رو ساده کنه:

  • یک لایه‌ی انتزاعی روی WebGL ساخته.

  • به‌جای نوشتن shader و ماتریس، فقط با چند خط کد می‌تونی یک صحنه‌ی سه‌بعدی بسازی.

مثال:

📌 استفاده مستقیم از WebGL (خیلی پیچیده)

// مقداردهی اولیه WebGL
const canvas = document.createElement("canvas");
const gl = canvas.getContext("webgl");

// تعریف شیدرها و کامپایل آن‌ها (کد GLSL)
...

📌 استفاده از Three.js (خیلی ساده‌تر)

// ساخت صحنه
const scene = new THREE.Scene();

// ساخت دوربین
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);

// ساخت رندرر
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// اضافه کردن مکعب
const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

// موقعیت دوربین
camera.position.z = 5;

// حلقه رندر
function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}
animate();

📌 همونطور که می‌بینی، Three.js به شدت ساده‌تر از WebGL خامه.

✅ جمع‌بندی

• WebGL = موتور خام گرافیک سه‌بعدی در مرورگر (سریع، قدرتمند، اما پیچیده).

• Three.js = کتابخانه‌ای که روی WebGL ساخته شده و کار با اون رو ساده می‌کنه.

• بدون WebGL، Three.js هم وجود نداشت.