آموزش Three.js Shading Language و میدانهای فاصله علامتدار - آخرین آپدیت
دانلود Three.js Shading Language and Signed Distance Fields
آموزش جامع زبان شیدینگ Three.js (TSL) با تمرکز بر فیلدهای فاصله علامتدار (SDF)
آنچه در این دوره خواهید آموخت:
- زبان شیدینگ Three.js
- فیلدهای فاصله علامتدار (Signed Distance Fields)
- استفاده از TSL با import maps یا ابزارهای بیلد (Build Tools)
- راهاندازی محیط توسعه
- واردات TSL شامل color, texture, convertColorSpace و positionLocal
- نوشتن Fragment و Vertex Shaders
- تولید الگوها با استفاده از fract, sin, cos, atan, floor, mod
- رسم خطوط و اشکال SDF در 2D و 3D
- استفاده از Uniform و UniformArray
- رسم خطوط فاصله
- رنگآمیزی SDFهای 2D و 3D
- ریمارچینگ (Raymarching)
- نورپردازی SDFهای سهبعدی
- سایههای SDF
- بازتابهای SDF
- عملیات Union, Intersect و Subtraction بر روی SDFها
- Ambient Occlusion
- افکت فرسنل (Fresnel Effect)
- Adaptive DPR
- پراکندگی اتمسفری (Atmospheric Scattering)
- حرکت براونی فرکتال (Fractal Brownian Motion)
- الگوریتم آب Gerstner/Tricoidal
- افزودن ابرها
- تکرار دامنه (Domain Repetition)
- فراکتالهای Mandelbulb, Juliabulb و Kleinian Inversion
- و بسیاری موارد دیگر
پیشنیازهای دوره
این دوره یک آموزش سطح متوسط درباره Three.js است و شما باید از قبل تجربه کار با آن را داشته باشید.
همچنین، به یک کارت گرافیک مدرن نیاز خواهید داشت که قادر به اجرای کدهای شیدر GLSL و WGSL باشد.
TSL و SDF: ابزارهای قدرتمند برای توسعه گرافیک سهبعدی
Three.js Shading Language (TSL) چارچوبی است که برای سادهسازی توسعه شیدر در اکوسیستم Three.js طراحی شده است.
فیلدهای فاصله علامتدار (Signed Distance Fields - SDF) روشی برای رسم صحنهها و انیمیشنها هستند که عمدتاً از توابع ریاضی استفاده میکنند.
با استفاده از فیلدهای فاصله علامتدار، میتوانید هر چیزی را ترسیم کنید و TSL این کار را برای توسعهدهندگان، بهویژه کسانی که دانش عمیقی در GLSL، WGSL سطح پایین یا برنامهنویسی گرافیک ندارند، بسیار دسترسپذیرتر میکند.
در این دوره، مباحث زیر را پوشش خواهیم داد:
- تنظیمات اولیه محیط توسعه
- وارد کردن کتابخانههای مورد نیاز
- استفاده از Import Maps یا Bundler/Build Tool
- بحث در مورد پیشنیازهای یک صحنه TSL
- مختصات Fragment Shader
- ایجاد الگوهای متحرک متنوع از آسان تا پیشرفته
- رسم انواع خطوط
- پیادهسازی Uniformها و Uniform Array
- تعامل با صحنهها با استفاده از GUI (رابط کاربری گرافیکی)
- آموزش مبانی فیلدهای فاصله علامتدار (SDF)
- رسم خطوط فاصله با استفاده از اطلاعات SDF
- رنگآمیزی و متحرکسازی SDFهای دوبعدی
- تمرین عملی با ساخت پروژه و افزودن تعامل با کیبورد
- آموزش مبانی Ray Marching
- نورپردازی SDFهای سهبعدی
- استفاده از مدلهای نورپردازی Lambertian, Ambient و Phong Specular
- استفاده از سایههای سخت و نرم
- پیادهسازی بازتابهای SDF
- پیادهسازی نسبت پیکسل دستگاه تطبیقی (Adaptive Device Pixel Ratio)
- رنگآمیزی و متحرکسازی SDFهای سهبعدی
- افزودن پراکندگی اتمسفری (Atmospheric Scattering)
- پیادهسازی Ambient Occlusion
- و اعمال افکت فرسنل (Fresnel Effect)
- آشنایی کامل با حرکت براونی فرکتال (Fractal Brownian Motion)
- افزودن افکت آب با الگوریتم Gerstner/Trochoidal
- افزودن ابرها
- تکرار دامنه (Domain Repetition)
- فراکتالهای Mandelbulb, Juliabulb و Kleinian Inversion
- و بسیاری مطالب دیگر
مزایای برجسته TSL در توسعه شیدر
با استفاده از سیستم گراف شیدر مبتنی بر گره (node-based) TSL، توسعهدهندگان میتوانند شیدرها را بدون نیاز به نوشتن دستی کدهای پیچیده GLSL یا WGSL، ایجاد و مدیریت کنند.
TSL مستقل از رندر (renderer-agnostic) است؛ به این معنی که شیدرهای ایجاد شده با آن بهطور یکپارچه در بکاندهای رندرینگ مختلف مانند WebGL و WebGPU کار میکنند.
از آنجایی که TSL در لایه جاوااسکریپت یا تایپاسکریپت، در کنار کد Three.js موجود شما نوشته میشود، میتوانید از ویژگیهای ارائه شده توسط IDE خود، مانند تکمیل کد IntelliSense، قالببندی کد و linting بهرهمند شوید. کد نهایی محصول شما همچنین میتواند از قابلیت Tree Shaking که توسط Bundler شما ارائه میشود، بهرهمند گردد.
با تشکر از حضور شما در دوره زبان شیدینگ Three.js (TSL) و فیلدهای فاصله علامتدار.
شان
Introduction
-
شروع کار Getting Started
-
چه داریم؟ What Do We Have
-
PositionLocal PositionLocal
-
برخی الگوها Some Patterns
-
خطوط – بخش ۱ Lines : Part 1
-
خطوط – بخش ۲ Lines : Part 2
-
Uniform و UniformArray Uniform and UniformArray
-
میدانهای فاصله علامتدار Signed Distance Fields
-
خطوط فاصله Distance Lines
-
رنگآمیزی SDFهای دوبعدی Colouring 2D SDFs
-
تمرین Practice
-
افزودن تعاملپذیری Add Interactivity
-
Raymarching Raymarching
-
نورپردازی SDFهای سهبعدی Lighting 3D SDFs
-
سایههای SDF SDF Shadows
-
بازتابهای SDF SDF Reflections
-
Adaptive DPR Adaptive DPR
-
رنگآمیزی SDFهای سهبعدی Colouring 3D SDFs
-
پراکندگی جوی Atmospheric Scattering
-
Ambient Occlusion Ambient Occlusion
-
Fresnel Effect Fresnel Effect
-
حرکت براونی فرکتال – بخش ۱ Fractal Brownian Motion : Part 1
-
حرکت براونی فرکتال – بخش ۲ Fractal Brownian Motion : Part 2
-
ریفکتورینگ Refactoring
-
افزودن آب Adding Water
-
ابرها Clouds
-
تکرار دامنه Domain Repetition
-
Mandelbulb Mandelbulb
-
Juliabulb Juliabulb
-
Kleinian Inversion Fractal Kleinian Inversion Fractal
https://donyad.com/d/3fa297
Sean Bradley
مهندس نرم افزار و شبکه به مدت 20 سال
نمایش نظرات