‏سه‌بعدی واقعی و بلادرنگ داخل Webflow

پروژه از یه سؤال شروع شده: می‌شه یه سایت Webflow میزبان زمین سه‌بعدی واقعی باشه — یعنی دادهٔ ارتفاعی واقعی SRTM که مثل نقشهٔ کانتور روی مش کشیده و زنده تو Three.js رندر می‌شه — بدون اینکه ویرایش‌پذیری Webflow قربانی بشه؟ خروجی سه صحنه‌ست (Tre Cime در طوفان، مون‌بلان در سپیده‌دم، آناپورنا در برف شبانه) که با اسکرول و صدای محیطی به هم وصل می‌شن. مسیر واقعی صحنهٔ اول از یه فایل GPX استراوا اومده و فقط نسخهٔ نرمال‌شده و بدون مختصات منتشر شده.

نویسنده می‌گه دو راه برای آوردن React به Webflow بررسی کرده: مسیر بومی Code Component، و امبد جاوااسکریپت خودمیزبان. برای یه باندل سنگین WebGL با build step خودش و دارایی‌های GLB روی Cloudflare R2، امبد برنده شده: ساخت خودبسنده، تکرار در چند ثانیه بدون republish، و قابل حمل به هر سایتی.

چیزی که از دست می‌ره درگ‌اند‌دراپ تو Designer ـه، و راه‌حلش mount مبتنی بر اتریبیوت بوده — کد دنبال هاست‌هایی مثل [data-terrain-card] می‌گرده که طراح جاگذاری کرده. قاعدهٔ حاکم: ساختار و استایل تو Designer، رفتار و انیمیشن تو JS نسخه‌دار روی CDN.

ظاهر نقشهٔ نقشه‌برداری هیچ تکسچری نداره و یه فرگمنت شیدره که ارتفاع world-space مش رو می‌خونه. کلید تیزموندن خط‌ها fwidth() ـه که پهنای ضدلبه‌پلگی رو در فضای صفحه از نرخ تغییر ایندکس باند حساب می‌کنه، پس خط‌ها در هر فاصلهٔ دوربینی یک پیکسل می‌مونن. هر سه صحنه همون یه شیدرن با یونیفرم‌های متفاوت. خروجی Blender هم با Draco فشرده می‌شه و هر GLB زمین حدود ۵۴۰ تا ۵۸۰ کیلوبایته، یعنی دانلود هیچ‌وقت گلوگاه نبوده؛ گلوگاه‌ها GPU و ترد اصلی بودن.

یکی از درس‌های اصلی مربوط به گذار بین صفحه‌هاست. کانتکست WebGL یکیه و بین ناوبری‌ها باقی می‌مونه؛ فقط دادهٔ صحنه عوض می‌شه. اما رویداد «صحنه آماده‌ست» وقتی شلیک می‌شد که مش پارس شده بود، نه وقتی شیدرش کامپایل شده بود، و همین کامپایل وسط افکت آشکارسازی ترد اصلی رو قفل می‌کرد. راه‌حل compileAsync بود:

if (gl.compileAsync) {
  const done = () => onMesh(mesh, bbox);
  const fallback = setTimeout(done, 1200);
  gl.compileAsync(root, camera).then(() => { clearTimeout(fallback); done(); });
}

بخش پرفورمنس هم به قول نویسنده بیشتر «کار نکردن» بوده تا زرنگی. اول یه پروفایلر کوچک درون‌صفحه ساخته که افت فریم رو به عمق اسکرول و نام سکشن گره می‌زنه، بعد سراغ حذف کار رفته: فریزکردن shadow map چون نور و زمین ثابتن و فقط دوربین حرکت می‌کنه، خاموش‌کردن MSAA که با وجود composer هیچ‌وقت استفاده نمی‌شد، و انتقال انیمیشن ذرات برف از حلقهٔ CPU به vertex shader تا بافر موقعیت هر فریم دوباره آپلود نشه.

نکتهٔ آخر پستش هم اینه: «کامپایل شد» یعنی «تمومه» نیست؛ تقریباً همهٔ باگ‌ها فقط با نگاه‌کردن به صفحهٔ واقعی پیدا شدن.

نکات کلیدی:

• امبد خودمیزبان برای باندل‌های سنگین WebGL، تکرار سریع‌تر از مسیر کامپوننت می‌ده
• mount مبتنی بر اتریبیوت مرز رو تمیز نگه می‌داره: Webflow چیدمان، کد رفتار
• fwidth() پهنای خط مستقل از رزولوشن و زوم می‌ده
• یه کانتکست WebGL پایدار نگه دار و فقط دادهٔ صحنه رو عوض کن
• افکت آشکارسازی رو به GPU-ready گره بزن، نه به پارس‌شدن مش
• بیشتر بردهای پرفورمنس از حذف کار به‌دست اومدن، نه از ترفند