کاتالوگ تکنیک‌های طراحی محیط سه‌بعدی#

فهرست دسته‌بندی‌شدهٔ تکنیک‌های گرافیکی که برای ساخت محیط سه‌بعدی باکیفیت، پرجزئیات و سبک در الامر استفاده می‌شوند. هر مورد می‌گوید تکنیک چیست و کجا/چرا به کار می‌رود، در یک یا دو خط. برای کاوش عمیق و ارجاع‌به‌کد، تکنیک‌های سه‌بعدی zoneهای پارک را ببینید.

کجا پیاده شده است#

• environments/hub/src/world/ — نمونهٔ کارشدهٔ بیشتر تکنیک‌های پایین، زیر materials، systems، post و zones.
• environments/hub/src/world/lighting-rig.ts و environments/hub/src/world/palette.ts — تصمیم‌های نور و رنگی که این تکنیک‌ها با آن‌ها کوک شده‌اند.
• packages/r3f/src/EnvironmentCanvas.tsx و packages/r3f/src/renderer-factory.ts — بوم WebGPU‌محور و بازگشت واقعی به WebGL2 که هر تکنیک اینجا باید از آن جان سالم ببرد.
• quality/rendering-profile.json — بودجه‌هایی که یک تکنیک نباید از آن‌ها بگذرد.

۱. بافت و متریال#

• نرمال‌مپ — برای تنهٔ درختان و صخره‌ها از تکسچر نرمال‌مپ استفاده می‌شود تا سطح بدون هیچ هندسهٔ اضافه‌ای مثل پوست درخت یا سنگ زبر خوانده شود؛ نور روی برجستگیِ جعلی می‌شکند.
• بافت رویه‌ای (procedural) با canvas — بافت پوست درخت و صخره در زمان اجرا روی یک canvas دوبعدی از میدان ارتفاع مثلثاتی خالص تولید می‌شود؛ هیچ فایل تصویری همراه محیط نیست.
• تبدیل میدان ارتفاع به نرمال‌مپ (Sobel) — نقشهٔ نرمال با تفاضل‌های مرکزی Sobel از همان میدان ارتفاع رویه‌ای اشتقاق می‌شود؛ یک بار per عمر منبع.
• مدولهٔ roughness — زبری زمین با همان ریز-نویز رنگ مدوله می‌شود تا قله‌های آفتابی خشک و کرانه‌های مرطوب براق دیده شوند.
• رمپ گرادیانی رنگ — چمن‌زار، شاخ‌وبرگ و بدنهٔ آب به‌جای تکسچر albedo، ۲ تا ۳ رنگ تالیف‌شده (عمیق/چمن‌زاری/آفتابی) را با نویز ترکیب می‌کنند.
• بافت ریز (detail texture) — یک حاصل‌ضرب سینوسی فرکانس-بالا دانهٔ سطح تیغه‌های چمن را فقط در نمای نزدیک اضافه می‌کند؛ پیکسل‌های دور ارزان می‌مانند.
• متریال امیسیو — قرص خورشید، برق‌های آب و پاشش آبشار خروجی امیسیو دارند تا bloom انتخابی دقیقاً همان‌ها را بگیرد.
• ترم‌های لایه‌ای متریال — سطح مشترک گیاهان ترم‌های اختیاری (لکه، وصله، نور rim، نوک آفتابی، خزه) را روی یک گراف پایهٔ گرادیانی می‌چیند.

۲. نورپردازی#

• نور جهت‌دار خورشید — یک directionalLight سایه‌دار per zone، هم‌راستا با بردار خورشید مشترک جهان تا zoneها با هم سازگار بمانند.
• نور پرکنندهٔ Hemisphere — bounce آسمان/زمین با یک hemisphereLight جعل می‌شود؛ نور محیطی ارزان بدون هزینهٔ سایهٔ اضافه.
• shadow map — frustum سایهٔ ارتوگرافیک per zone تالیف می‌شود؛ اندازهٔ نقشه اهرم کیفیت است (۲۰۴۸ در enhanced، ۱۰۲۴ در بقیه).
• خاموش‌کردن سایه به‌جای کوچک‌کردنش — در پایین‌ترین سطح، castShadow پوشش گیاهی کلاً حذف می‌شود، نه اینکه رزولوشن سایه بیشتر پایین بیاید.
• ترفند امیسیو-به‌جای-نور — لهجه‌های HDR امیسیو (برق، جرقه، پاشش) از طریق bloom می‌درخشند و حس نورپردازی را بدون هیچ منبع نور واقعی می‌دهند.

۳. افکت‌های شییدری#

• نویز FBM — حرکت براونی کسری روی mx_noise_float ابرهای آسمان را می‌سازد؛ تعداد اکتاوها در زمان ساخت گراف و per سطح کیفیت تعیین می‌شود.
• FBM نرمال‌شده با دامنه — مجموع نویز بر مجموع دامنه‌ها تقسیم می‌شود تا آستانهٔ پوشش ابر در هر سطح کیفیت یکسان خوانده شود.
• موج‌های سینوسی جهت‌دار — سطح آب ۳ موج سینوسی جهت‌دار را لایه می‌کند؛ شیب‌های کسینوسی تحلیلی میدان نرمال را بدون تفاضل محدود می‌دهند.
• فرنل (Fresnel) — آب در زوایای مماس دید، رنگ آسمان را بلند می‌کند (فرنل با توان ۵)؛ کلاسیک‌ترین نشانهٔ ارزانِ انعکاس.
• برق خورشید HDR (specular sparkle) — pow(sunAmount, 340) به‌علاوهٔ جملهٔ twinkle، جرقهٔ تیز خورشید را روی آب می‌سازد و از طریق امیسیو به bloom می‌رساند.
• caustics — تداخل مجموعه‌های سینوسی جهت‌دار، تیزشده با توان و ماسک‌شده با عمق، نور متحرک caustic را روی بسترهای غرق‌شده جعل می‌کند.
• آب‌سفید از حاصل‌ضرب باندهای سینوسی — کف آبشار دو باند سینوسی را در هم ضرب می‌کند (عمداً بدون نویز گران) تا هزینه‌اش در هر سطح یکسان بماند.
• dithering به سبک screen-door — پوشش گیاهی نزدیک دوربین با discard تصادفی-منظم محو می‌شود، نه با شفافیت؛ مرتب‌سازی و blending دست‌نخورده می‌ماند.
• گرادیان آسمان جهت‌محور — ترکیب سماوی-به-افق با گرم‌شدن افق در سمت خورشید (pow(saturate(cosSun), 3)).
• رنگ‌گذاری شیب‌محور — مولفهٔ Y نرمال محلی تعیین می‌کند زمین کجا به سنگ تبدیل شود؛ شیب‌های تند خاکستری-کرم می‌گیرند، چمن‌زار هرگز.

۴. تکنیک‌های هندسه و مش#

• GPU instancing — همهٔ پوشش گیاهی، گلبرگ‌ها، خرده‌ها و مه InstancedMesh هستند: یک draw call per دسته، صرف‌نظر از تعداد نمونه‌ها.
• attributeهای per-instance — رنگ، مقیاس، کشش و فاز انیمیشن هر نمونه از طریق attributeهای instanced و instanceColor متفاوت می‌شود.
• جوش رأس‌ها (mergeVertices) — چندوجهی‌های سقف درخت جوش داده می‌شوند، بعد رأس‌های مشترک با هش بذردار جابه‌جا و نرمال‌ها دوباره محاسبه می‌شوند: سیلوئت ارگانیک watertight بدون ترک.
• billboard — مه برخورد آبشار از صفحه‌های روبه‌دوربین (sprite) استفاده می‌کند که بالا می‌روند، پهن می‌شوند و محو می‌شوند؛ حجم با مشتی صفحه جعل می‌شود.
• ترین دیسک قطبی جابه‌جاشده — مش زمین یک شبکهٔ قطبی است که با تابع ارتفاع خالص جابه‌جا می‌شود؛ تعداد سگمنت‌های شعاعی/حلقه‌ای per سطح مقیاس می‌خورد.
• مش روبان برای آب روان — رودخانه روبان‌های تختی است که خط مرکزی پیچ‌خم‌دار را دنبال می‌کنند؛ یک مش پردهٔ عمودی هم آبشار را می‌سازد.
• حذف گام‌دار درون-شییدر (LOD) — نمونه‌های دور داخل شییدر با باقی‌ماندهٔ اندیس حذف می‌شوند (نیمی در میان‌برد، ربع در دوربرد)؛ draw call می‌ماند، هزینهٔ vertex می‌رود.
• حجم مرزی بادکرده — مرزهای instanced به اندازهٔ بیشینهٔ جابه‌جایی باد باد داده می‌شوند تا frustum culling در حین حرکت رأس‌ها روی GPU درست بماند.

۵. تکنیک‌های انیمیشن#

• باد در vertex shader — درختان و چمن با جابه‌جایی رأس روی GPU می‌جنبند، وزن‌گرفته بین لنگرهای گونه (Y پایه/نوک)، با فاز per نمونه از هش بذردار.
• اسکرول UV/بافت — جریان رودخانه باندهای سینوسی را روی UVهای متر-جریان اسکرول می‌کند تا قطعه‌های جدای آب با یک سرعت جهانی حرکت کنند.
• شتاب درجهٔ دو آبشار — مختصات پرده با v + v*v*0.9 تاب می‌خورد تا آبِ درحال‌سقوط به‌چشم شتاب بگیرد.
• uniformهای زمان مشترک — یک uniform زمان per ماده همهٔ حرکت را هدایت می‌کند؛ یک مقیاس حرکت سراسری در سطح‌های پایین همه‌چیز را کند و برای کاربران reduced-motion فریز می‌کند.
• موج با جابه‌جایی vertex — موج فیزیکی برکه (حدود ۰٫۰۴ متر) در positionNode انجام می‌شود، درون حاشیهٔ آزاد تالیف‌شدهٔ حوضچه.

۶. آسمان و اتمسفر#

• گنبد آسمانی درون‌صحنه — کره‌ای BackSide که رنگش از جهت دید محاسبه می‌شود؛ هندسه به‌جای افکت صفحه.
• پین به صفحهٔ دور — clip.z = clip.w در vertex shader گنبد را به صفحهٔ far می‌کوبد، مستقل از فاصلهٔ دوربین.
• گنبد دنبال‌کنندهٔ دوربین — گنبد هر فریم موقعیت دوربین را کپی می‌کند و با depth write خاموش اول رندر می‌شود؛ همیشه پشت مش‌های جهان.
• لایهٔ ابر پروجکت‌شده — ابرهای FBM روی یک صفحهٔ مجازی بالای سر نمونه می‌شوند و با زمان رانش دارند.
• قرص خورشید HDR و هاله — خورشید یک قرص HDR با هالهٔ طلایی تنگ است که از امیسیو عبور می‌کند تا bloom دقیقاً همان را بگیرد.
• مه هم‌رنگ افق — مه خطی صحنه دقیقاً رنگ هالهٔ افقِ گنبد را دارد تا لبهٔ زمین بی‌درز در آسمان حل شود.

۷. تکنیک‌های آب#

• رنگ بدنهٔ عمق‌محور — رنگ آب بر اساس عمق از رنگ گرمِ کم‌عمق به رنگ بدنهٔ عمیق lerp می‌شود، به‌جای شکست نور واقعی.
• نور caustic زیر آب — الگوهای caustic متحرک روی بستر رودخانه و کف حوضچهٔ سقوط بازی می‌کنند (بخش caustics در افکت‌های شییدری).
• حلقهٔ کف برخورد — یک حلقهٔ کف درحال‌انبساط از نقطهٔ برخورد تالیف‌شدهٔ آبشار روی حوضچه پخش می‌شود.
• لکه‌های کف و خرده‌های شناور — برگ‌ها و کف‌های instanced روی سطح رودخانه در یک حلقهٔ جریان حرکت می‌کنند، موقعیت‌شان از ریاضی خودِ رودخانه می‌آید.
• محو لبه (کرانه‌های نرم) — کدورت آب در کرانه‌ها و لبه‌های پرده محو می‌شود تا خط تقاطع مش دیده نشود.
• بدون انعکاس بلادرنگ — نه reflector و نه پاس انعکاس صفحه‌ای؛ فرنل + رنگ آسمان + برق‌ها انعکاس را جعل می‌کنند و draw callها را ثابت نگه می‌دارند.

۸. تکنیک‌های پوشش گیاهی#

• تنوع گونه از دسته‌های instanced — چند گونهٔ درخت (بروادلیف، صنوبر، بید) یک پشتهٔ instancing مشترک با لنگرهای sway مخصوص هر گونه دارند.
• پراکندگی لنگردار — لانه‌های گلبرگ به درختان بذردار لنگر می‌شوند تا گلبرگ‌های زمین مثل ریزش شکوفه خوانده شوند، نه کاغذرنگی تصادفی.
• رگه‌های رنگی با cell hashing — یک هش درشتِ سلول‌های ۱۶متری شاخص‌های پالت را تعیین می‌کند تا گیاهان همسایه رنگ مشترک بگیرند و رگه‌های رنگی بسازند.
• جفت تنه+سقف — تنه‌ها و سقف‌ها یک stride id مشترک در instancing دارند تا یک گیاه واحد با هم بجنبد و با هم رقیق شود.
• سیلوئت سقف مهم‌تر از جزئیات برگ — چندوجهی‌های جوش‌داده‌شده و جابه‌جاشده، تاج‌های ارگانیک می‌سازند؛ هیچ هندسهٔ per-برگی در کار نیست.

۹. پس‌پردازش#

• MRT (multi-render-target) — صحنه یک بار در attachmentهای output + emissive رندر می‌شود؛ bloom فقط امیسیو را می‌خواند.
• bloom انتخابی — bloom فقط روی پیکسل‌های امیسیو (خورشید، برق‌ها، پاشش) اعمال می‌شود، نه با آستانه‌گذاری کل فریم.
• tone mapping فیلمیک ACES — منحنی کلاسیک فیلمیک، HDR را به بازهٔ نمایش نگاشت می‌کند؛ دقیقاً یک بار per مسیر رندر اعمال می‌شود.
• FXAA — anti-aliasing ارزان تمام‌صفحه در انتهای زنجیره، روی پیکسل‌های tone-mapشده (display-referred).
• exposure به‌عنوان اهرم هنری — toneMappingExposure یک uniform زنده است؛ تغییر حال‌وهوا نوشتن uniform است، هرگز بازسازی pipeline نه.
• fallback رندر مستقیم — پایین‌ترین سطح کل pipeline (MRT/bloom/FXAA) را کنار می‌گذارد: رندر ساده + tone mapping per ماده.

۱۰. پراکندگی و چیدمان قطعی#

• PRNG بذردار (xorshift32) — کل چیدمان از یک بذر قطعی می‌آید؛ صحنه در هر بازدید یکسان است و بدون GPU تست‌پذیر است.
• زیرجریان‌های مستقل — هر دسته (درخت، چمن، گلبرگ، خرده) کلید زیرجریان خودش را XOR می‌کند تا تغییر تعداد یک دسته، دستهٔ دیگر را دوباره بر نزند.
• پراکندگی حلقهٔ پذیرش — groveها به‌علاوهٔ تکی‌ها با شبکهٔ فاصله توزیع می‌شوند تا تجمع طبیعی بدون هم‌پوشانی بسازند.
• محرومیت‌های چیدمان — صفای spawn، صفای پورتال، مسیر دید و توده‌های آب خالی می‌مانند تا نمای اول همیشه قاب‌بندی‌شده و قابل‌گذر باشد.