زبان شیدینگ Three.js و میدان‌های فاصله علامت‌دار

آنچه یاد خواهید گرفت:

• زبان شیدینگ Three.js
• میدان‌های فاصله علامت‌دار
• استفاده از TSL با نقشه‌های ایمپورت یا ابزار بیلد
• راه‌اندازی محیط توسعه
• ایمپورت‌ها برای رنگ، تکسچر، تبدیل فضای رنگی و موقعیت محلی
• نوشتن شیدرهای فرگمنت و ورتکس
• تولید الگوها با استفاده از fract و sin و cos و atan و floor و mod
• ترسیم خطوط و شکل‌های SDF در دو بعدی و سه‌بعدی
• استفاده از Uniform و UniformArray
• ترسیم خطوط فاصله
• رنگ‌آمیزی SDFs دو بعدی و سه‌بعدی
• Raymarching
• نورپردازی SDFs سه‌بعدی
• سایه‌های SDF
• بازتاب‌های SDF
• اتحاد، تقاطع و تفریق SDF

پیش‌نیازهای دوره

• این دوره‌ سطح متوسط درباره Three.js است و شما باید قبلاً تجربه‌ای از استفاده از آن داشته باشید.
• شما به یک کارت گرافیک مدرن نیاز دارید که قادر به اجرای کد شیدر GLSL و WGSL باشد.

توضیحات دوره

زبان شیدر Three.js (TSL) یک فریمورک است که برای ساده‌سازی توسعه شیدر در اکوسیستم Three.js طراحی شده است.

میدان‌های فاصله علامت‌دار روشی برای ترسیم صحنه‌ها و انیمیشن‌ها عمدتاً با استفاده از توابع ریاضی هستند.

شما می‌توانید هر چیزی را با میدان‌های فاصله علامت‌دار بکشید و TSL این کار را برای توسعه‌دهندگان، به‌ ویژه افرادی که دانش عمیقی از GLSL ،WGSL یا برنامه‌نویسی گرافیک ندارند، آسان‌تر می‌کند.

پس در این دوره ما موارد زیر را پوشش خواهیم داد:

• راه‌اندازی محیط توسعه اولیه
• ایمپورت کتابخانه‌های مورد نیاز با استفاده از نقشه‌های ایمپورت یا یک ابزار bundler و بیلد
• بحث درباره پیش‌نیازهای یک صحنه TSL
• مختصات شیدر فرگمنت
• ایجاد چندین الگوی متحرک از ساده به پیشرفته‌تر
• ترسیم استایل‌های مختلف خطوط
• پیاده‌سازی Uniforms و UniformArray
• تعامل با صحنه‌های خود با استفاده از یک GUI
• یادگیری مبانی میدان‌های فاصله علامت‌دار
• ترسیم خطوط فاصله با استفاده از اطلاعات SDF
• رنگ‌آمیزی و انیمیشن‌سازی SDFs دو بعدی
• یادگیری مبانی Raymarching
• نورپردازی SDFs سه‌بعدی با استفاده از Lambertian و Ambient و Phong specular
• استفاده از سایه‌زنی سخت و نرم
• پیاده‌سازی بازتاب‌های SDF
• رنگ‌آمیزی و انیمیشن‌سازی SDFs سه‌بعدی
• و موارد دیگر

با استفاده از سیستم شیدر گراف مبتنی بر نود TSL، توسعه‌دهندگان می‌توانند شیدرها را ایجاد و مدیریت کنند بدون اینکه نیاز به نوشتن کد پیچیده GLSL یا WGSL به صورت دستی داشته باشند.

TSL مستقل از رندرر است، به این معنا که شیدرهای ایجاد شده با آن به‌ طور یکپارچه در بک‌اندهای مختلف رندرینگ مانند WebGL و WebGPU کار می‌کنند.

از آنجایی که TSL در لایه جاوااسکریپت یا تایپ‌اسکریپت نوشته شده است، همراه با کد موجود شما در Three.js، شما می‌توانید از ویژگی‌های ارائه‌ شده توسط IDE خود مانند تکمیل کد IntelliSense، فرمت‌بندی کد و linting بهره‌مند شوید. کد نهایی تولید شما همچنین می‌تواند از tree shaking ارائه‌ شده توسط bundler شما بهره‌برداری کند.

از اینکه در دوره زبان شیدینگ Three.js (TSL) و میدان‌های فاصله علامت‌دار ما شرکت کردید، متشکریم.

این دوره برای چه کسانی مناسب است؟

• افرادی که تجربه‌ای با Three.js دارند و می‌خواهند کد شیدر را با استفاده از تکنیک‌های میدان‌های فاصله علامت‌دار بنویسند.